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

Cypress コマンド "clock" の詳細解説

cy.clock() コマンドは、Cypress テスト内で時間を操作するための強力なツールです。テストの特定の時点をシミュレートしたり、時間経過に依存する機能を検証したりするのに役立ちます。

使用方法

cy.clock() コマンドは、以下の 2 つの方法で使用できます。

1. 現在時刻を取得する

cy.clock().then((clock) => {
  // 現在時刻は clock.now() で取得できます
  const now = clock.now();
  // ...
});

1. 時間を進める

cy.clock().tick(1000); // 1秒進める
cy.get('button').click(); // ボタンをクリック
// ...

詳細

cy.clock() コマンドは、以下のオプションを受け取ります。

• now: 開始時刻をミリ秒単位で指定できます。
• speed: 時間の経過速度を倍率で指定できます。デフォルトは 1 です。
• aliases: 時間操作コマンドのエイリアスを指定できます。

例

• 特定の時点をシミュレートする

cy.clock(new Date('2024-03-21T16:53:00.000Z')); // 2024年3月21日 16:53:00 に設定
cy.get('button').click(); // ボタンをクリック
// ...

• 時間経過に依存する機能を検証する

cy.clock().tick(1000); // 1秒進める
cy.get('timer').should('have.text', '1 second'); // タイマーが "1秒" と表示されていることを確認
// ...

注意事項

• cy.clock() コマンドは、テスト内のすべてのコードに影響を与えます。
• cy.clock() コマンドを使用する前に、cy.tick() コマンドを使用して時間を進めることはできません。
• cy.clock() コマンドを使用するテストは、--no-sandbox フラグを使用して実行する必要があります。

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

cy.clock().then((clock) => {
  // 現在時刻は clock.now() で取得できます
  const now = clock.now();
  console.log(`現在時刻: ${now}`);
});

特定の時点をシミュレートする

cy.clock(new Date('2024-03-21T16:53:00.000Z')); // 2024年3月21日 16:53:00 に設定
cy.get('button').click(); // ボタンをクリック
// ...

時間経過に依存する機能を検証する

cy.clock().tick(1000); // 1秒進める
cy.get('timer').should('have.text', '1 second'); // タイマーが "1秒" と表示されていることを確認
// ...

時間の経過速度を変更する

cy.clock({ speed: 2 }); // 時間の経過速度を 2 倍にする
cy.get('animation').should('be.finished'); // アニメーションが完了していることを確認
// ...

時間操作コマンドのエイリアスを設定する

cy.clock({ aliases: { tick: 'advanceTime' } });
cy.advanceTime(1000); // 1秒進める
// ...

特定の時点まで時間を進める

cy.clock().then((clock) => {
  clock.tickUntil(() => {
    return new Date().getTime() >= 1653213580000; // 2024年3月21日 17:00:00 に達するまで待つ
  });
});

時間操作コマンドをチェーンする

cy.clock().tick(1000).then(() => {
  cy.get('button').click();
}).tick(2000).then(() => {
  cy.get('timer').should('have.text', '3 seconds'); // タイマーが "3秒" と表示されていることを確認
});

時間操作コマンドを beforeEach() で使用する

beforeEach(() => {
  cy.clock(new Date('2024-03-21T16:53:00.000Z')); // すべてのテストの前に 2024年3月21日 16:53:00 に設定
});

時間操作コマンドをafterEach() で使用する

afterEach(() => {
  cy.clock().restore(); // すべてのテストの後で時間を元に戻す
});

時間操作コマンドを Mocha テストで使用する

describe('My Test Suite', () => {
  it('My Test Case', () => {
    cy.clock(new Date('2024-03-21T16:53:00.000Z'));
    cy.get('button').click();
    // ...
  });
});

時間操作コマンドを Cypress テストランナーで使用する

cypress run --env clock=true

これらのサンプルコードは、Cypress clock コマンドのさまざまな使用方法を示しています。詳細については、Cypress の公式ドキュメントを参照してください。

Cypress で時間を操作するその他の方法

Date.now() を使用する

const now = Date.now();
// ...

setTimeout() を使用する

setTimeout(() => {
  // 1秒後に実行されるコード
}, 1000);

setInterval() を使用する

const interval = setInterval(() => {
  // 1秒ごとに実行されるコード
}, 1000);

clearInterval(interval); // インターバルを停止する

Cypress テストランナーの --env フラグを使用する

cypress run --env time=1653213580000 // 2024年3月21日 17:00:00 に設定

Cypress テストランナーの --config-file フラグを使用する

cypress run --config-file cypress.json // cypress.json ファイルに設定

Cypress テストランナーの --env-file フラグを使用する

cypress run --env-file .env // .env ファイルに設定

Cypress テストランナーの --spec フラグを使用する

cypress run --spec cypress/integration/my-spec.js // my-spec.js ファイルに設定

Cypress テストランナーの --tag フラグを使用する

cypress run --tag @time // @time タグが付いたテストのみ実行

Cypress テストランナーの --grep フラグを使用する

cypress run --grep "time" // "time" という文字列を含むテストのみ実行

Cypress テストランナーの --headless フラグを使用する

cypress run --headless // ヘッドレスモードで実行

これらの方法は、cy.clock() コマンドよりも柔軟性に欠ける場合もありますが、より軽量で使いやすく場合もあります。

注意事項

• これらの方法は、Cypress テスト内で時間操作を行うための代替手段です。
• cy.clock() コマンドとこれらの方法を組み合わせて使用することはできません。
• これらの方法を使用する前に、Cypress の公式ドキュメントを参照してください。