【Cypress】時間制御のテスト方法

package	version
cypress	10.0.7
date-fns	2.29.3

cypress

cy.clock()
cy.tick()

やりたいこと

• setTimeoutやsetInterval、Dateなど、Cypress上で時間経過が必要な動作のテスト

setTimeout
clearTimeout
setInterval
clearInterval
Date

javascript

実際のコード

// setIntervalで1秒ごとにHTMLを更新（タイマー）
let seconds = 0;

let secondsDom = document.getElementById("seconds-elapsed");
setInterval(() => {
  secondsDom.innerHTML = ++seconds + ' seconds';
}, 1000);

E2Eテスト

cypress

//オブジェクトを生成
cy.clock()

//対象のページにアクセス
cy.visit("/test.html")

//1000ms(1秒)時間を進める
cy.tick(1000)

//タイマーが1秒経過したことを確認
cy.get('#seconds-elapsed').should('have.text', '1 seconds')

//さらに1000ms(1秒)時間を進める
cy.tick(1000)

//タイマーが2秒経過したことを確認
cy.get('#seconds-elapsed').should('have.text', '2 seconds')

参照

clock | Cypress Documentation
https://docs.cypress.io/api/commands/clock