効率的なCypressテストデバッグ：一時停止とデバッグのベストプラクティス

cy.pause() コマンド

最も基本的な方法は、cy.pause() コマンドを使用することです。このコマンドは、テストの実行を即座に停止し、すべての Cypress コマンドの実行をブロックします。テストランナーウィンドウには、テストが一時停止されたことを示すメッセージが表示されます。

cy.get('#my-element').click();
cy.pause();
cy.get('#my-other-element').type('some text');

この例では、#my-element 要素をクリックした後、テストは一時停止されます。その後、デベロッパーツールを使用して DOM を調べたり、テストコードを変更したりすることができます。cy.pause() の後に cy.resume() を呼び出すことで、テストの実行を再開することができます。

debugger キーワード

もう1つの方法は、JavaScript の debugger キーワードを使用することです。これは、テストランナーが現在の行で停止するように強制するものです。これは、cy.pause() と似ていますが、より詳細な制御を提供します。

cy.get('#my-element').click();
debugger;
cy.get('#my-other-element').type('some text');

この例では、#my-element 要素をクリックした後、テストランナーは一時停止し、現在の行 (上記の debugger ステートメント) でブレークポイントが設定されます。その後、デバッガを使用してコードを実行ทีละบรรทัดステップ実行し、変数の値を調べることができます。 F8 キーを押すと、テストの実行を再開することができます。

さらに柔軟性を高めるために、カスタムコマンドを作成してテストを一時停止することができます。これは、特定の状況下でテストを一時停止する必要がある場合に役立ちます。

Cypress.Commands.add('pauseUntilClicked', (selector) => {
  cy.wait(selector).click();
  cy.pause();
});

cy.get('#my-button').click();
cy.pauseUntilClicked('#my-other-button');
cy.get('#my-input').type('some text');

この例では、pauseUntilClicked というカスタムコマンドを作成しました。このコマンドは、要素がクリックされるまでテストを一時停止します。上記の例では、#my-button 要素をクリックしてから pauseUntilClicked コマンドを呼び出し、#my-other-button 要素がクリックされるまでテストを一時停止します。

Cypress テストは、Chrome DevTools と同じようにデバッグすることができます。つまり、ブレークポイントを設定したり、コードを実行ทีละบรรทัดステップ実行したりすることができます。
テストを一時停止している間、テストランナーウィンドウの 「Debugger」 タブを使用して、変数の値を調べたり、コールスタックを表示したりすることができます。
テストの実行を一時停止する前に、スクリーンショットを撮るようにしてください。これにより、デバッグ時に何が起こっていたのかをよりよく理解することができます。

これらの機能を活用することで、Cypress テストをより効果的にデバッグし、問題を迅速に解決することができます。

リソース

describe('My Test Suite', () => {
  it('should pause the test', () => {
    cy.visit('https://www.example.com');
    cy.get('#my-element').click();
    cy.pause();
    cy.get('#my-other-element').type('some text');
  });
});

この例では、cy.pause() コマンドを使用して、#my-element 要素をクリックした後、テストを一時停止します。

describe('My Test Suite', () => {
  it('should pause the test with debugger keyword', () => {
    cy.visit('https://www.example.com');
    cy.get('#my-element').click();
    debugger;
    cy.get('#my-other-element').type('some text');
  });
});

この例では、debugger キーワードを使用して、#my-element 要素をクリックした後、テストを一時停止します。

describe('My Test Suite', () => {
  it('should pause the test using a custom command', () => {
    cy.visit('https://www.example.com');
    cy.get('#my-button').click();
    cy.pauseUntilClicked('#my-other-button');
    cy.get('#my-input').type('some text');
  });
});

Cypress.Commands.add('pauseUntilClicked', (selector) => {
  cy.wait(selector).click();
  cy.pause();
});

この例では、pauseUntilClicked というカスタムコマンドを作成し、#my-other-button 要素がクリックされるまでテストを一時停止します。

代替方法

- 長所: シンプルで使いやすい
- 短所: 詳細な制御ができない、テストランナーウィンドウから再開できない
カスタムコマンド
- 長所: 柔軟性と制御性に優れている、特定の状況に合わせた一時停止ロジックを作成できる
- 短所: 作成とメンテナンスに時間がかかる
サードパーティ製のライブラリ
- 長所: テストを一時停止するための追加機能を提供するものがある
- 短所: 導入とセットアップが必要、互換性の問題が発生する可能性がある

各代替方法の詳細

debugger キーワード

debugger キーワードを使用すると、テストの実行を現在の行で一時停止できます。これは、シンプルな一時停止が必要な場合に役立ちます。

cy.get('#my-element').click();
debugger;
cy.get('#my-other-element').type('some text');

この例では、#my-element 要素をクリックした後、テストは一時停止し、現在の行 (上記の debugger ステートメント) でブレークポイントが設定されます。

カスタムコマンド

カスタムコマンドを作成すると、テストを一時停止するためのより多くの制御と柔軟性を提供できます。これは、特定の状況下でテストを一時停止する必要がある場合に役立ちます。

Cypress.Commands.add('pauseUntilClicked', (selector) => {
  cy.wait(selector).click();
  cy.pause();
});

cy.get('#my-button').click();
cy.pauseUntilClicked('#my-other-button');
cy.get('#my-input').type('some text');

この例では、pauseUntilClicked というカスタムコマンドを作成しました。このコマンドは、要素がクリックされるまでテストを一時停止します。

サードパーティ製のライブラリ

Cypress テストを一時停止するための追加機能を提供するサードパーティ製のライブラリがいくつかあります。これらのライブラリは、より洗練された一時停止機能を提供する場合がありますが、導入とセットアップが必要で、互換性の問題が発生する可能性があります。

Cypress テストは、Chrome DevTools と同じようにデバッグすることができます。つまり、ブレークポイントを設定したり、コードを実行ทีละบรรทัดステップ実行したりすることができます。
テストを一時停止している間、テストランナーウィンドウの 「Debugger」 タブを使用して、変数の値を調べたり、コールスタックを表示したりすることができます。
テストを一時停止する前に、スクリーンショットを撮ると、デバッグ時に何が起こっていたのかをよりよく理解することができます。