Cypress テストをデバッグ・速度制御： pause コマンド活用術

Cypressにおけるpauseコマンド

pause()コマンドは、単独で使用することも、引数と組み合わせて使用することもできます。

単独で使用する場合:

• テストの実行を一時停止します。
• 画面中央に「Cypress Paused」というメッセージが表示されます。
• 実行を再開するには、EnterキーまたはSpaceキーを押します。

引数と組み合わせて使用する場合:

• メッセージやオプションを追加できます。

例：

// テストを一時停止し、「デバッグポイントに到達しました」というメッセージを表示
cy.pause('デバッグポイントに到達しました');

// テストを一時停止し、「続行するにはEnterキーを押してください」というメッセージを表示
cy.pause('続行するにはEnterキーを押してください', {
  duration: 5000, // メッセージ表示時間（ミリ秒）
  onKeydown: (key) => { // キー押下時の処理
    if (key === 'Enter') {
      // Enterキーが押されたらテストを再開
      cy.resume();
    }
  },
});

• テストの特定の部分に焦点を当て、詳細なデバッグを行うことができます。
• 特定の条件が発生するまでテストを待機させることができます。
• テストの実行速度を制御することができます。

pauseコマンドの注意点

• pauseコマンドを多用すると、テストの実行速度が遅くなります。
• テストコードが複雑になる可能性があります。
• テストの自動化の目的を損なう可能性があります。

pauseコマンドの代替手段

• debuggerステートメントを使用する
• Cypressのタイムアウト機能を使用する
• カスタムコマンドを作成する

まとめ

pauseコマンドは、Cypressテストをデバッグおよび制御するための強力なツールです。ただし、多用するとテストの実行速度が遅くなるため、注意が必要です。

Cypress pauseコマンドのサンプルコード

テストの実行を一時停止し、メッセージを表示する

cy.visit('https://www.example.com/');

// テストを一時停止し、「ログイン画面に移動しました」というメッセージを表示
cy.pause('ログイン画面に移動しました');

// ログイン処理を行う
cy.get('#username').type('user');
cy.get('#password').type('password');
cy.get('#login-button').click();

// テストを再開
cy.resume();

特定の条件が発生するまでテストを待機する

cy.visit('https://www.example.com/');

// 商品ページが表示されるまで待機
cy.get('.product-card').should('be.visible');

// テストを一時停止し、「商品ページが表示されました」というメッセージを表示
cy.pause('商品ページが表示されました');

// 商品詳細画面に遷移する
cy.get('.product-card').click();

// テストを再開
cy.resume();

テストの実行速度を制御する

cy.visit('https://www.example.com/');

// 1秒間待機
cy.pause(1000);

// テストを再開
cy.resume();

カスタムコマンドを作成する

Cypress.Commands.add('myPause', (message) => {
  cy.pause(message);
});

cy.visit('https://www.example.com/');

// テストを一時停止し、「カスタムメッセージが表示されました」というメッセージを表示
cy.myPause('カスタムメッセージが表示されました');

// テストを再開
cy.resume();

Cypressテストを一時停止する他の方法

debuggerステートメントを使用すると、テストの実行を特定のポイントで停止し、ブラウザの開発者ツールを使用してコードをステップ実行することができます。

例：

cy.visit('https://www.example.com/');

// ログイン処理を行う
cy.get('#username').type('user');
cy.get('#password').type('password');

// テストを一時停止
debugger;

// ログインボタンをクリック
cy.get('#login-button').click();

Cypressのタイムアウト機能を使用する

Cypressには、テストの特定の部分にタイムアウトを設定する機能があります。タイムアウトが発生すると、テストは自動的に一時停止されます。

例：

cy.visit('https://www.example.com/', {
  timeout: 10000, // テスト全体のタイムアウト
});

// ログイン処理を行う
cy.get('#username').type('user');
cy.get('#password').type('password');

// ログインボタンをクリック
cy.get('#login-button').click({
  timeout: 5000, // ログイン処理のタイムアウト
});

カスタムコマンドを作成する

特定のテストシナリオで繰り返し使用する必要がある場合は、カスタムコマンドを作成することができます。

例：

Cypress.Commands.add('waitForElement', (selector) => {
  cy.get(selector, { timeout: 10000 }).should('be.visible');
});

cy.visit('https://www.example.com/');

// 商品ページが表示されるまで待機
cy.waitForElement('.product-card');

// テストを継続

• デバッグ目的の場合は、debuggerステートメントを使用するのが最も簡単です。
• 特定の部分にタイムアウトを設定したい場合は、Cypressのタイムアウト機能を使用するのが適切です。
• 繰り返し使用する必要がある場合は、カスタムコマンドを作成するのが効率的です。

pauseコマンド以外にも、Cypressテストを一時停止する方法はいくつかあります。それぞれの方法の特徴を理解し、目的に合わせて使いこなしてください。