Cypress 时钟函数使 html body 不可见

Question

在我的赛普拉斯测试中，我希望将时钟设置为特定时间，以便为每个测试提供一致的时间范围。

当我打电话时：

cy.visit('/path/to/page');
cy.get('#elementId').click();

一切都很好。

然而，当我这样做时：

cy.clock(Date.now());
cy.visit('/path/to/page');
cy.get('#elementId').click();

我收到以下错误：

This element `<button with Id i want to click>` is not visible 
because its parent `<body>` has CSS property: `display: none`

当我没有向 cy.clock() 传递参数时也会发生这种情况。为什么 cy.clock() 将此页面的 body 设置为不可见？我该如何避免这种情况？

Answer 1

你如何提供一个自定义输出让元素首先可见然后click()。

cy.get('#elementId', {timeout: 6000}).should('be.visible').click()

或者，您也可以使用 {force: true} 以防您想要单击隐藏的元素。

cy.get('#elementId', {timeout: 6000}).should('be.visible').click({force: true})

Answer 2

cy.clock() 命令覆盖并冻结与计时器相关的 javascript 函数 - setTimeout、setInterval 以及 Date 对象。

您的应用似乎在加载期间使用了 setTimeout，并且一些初始 javascript 未完成。

尝试在命令序列中添加一个 cy.tick()

cy.clock(Date.now());
cy.visit('/path/to/page');
cy.tick(1000);                 // try longer and shorter timings
cy.get('#elementId').click()

Cypress clock function makes html body invisible