Cypress 中如何处理淡入淡出过渡？

Question

我有一个带有“.fade”类的弹出窗口

<div class="modal fade employee" id="employeeFormModal" />

它具有以下 CSS 属性：

.fade {
    transition: opacity 0.15s linear;
}

.fade:not(.show) {
    opacity: 0;
}

单击按钮时，弹出窗口将关闭。测试代码如下：

cy.get('button[class*="save"]').click();

// cy.wait(5000) will do the trick 
//cy.get("#employeeFormModal").should("be.visible");

cy.get("#employeeFormModal").should("not.be.visible");

问题是，即使我启用命令

cy.get("#employeeFormModal").should("be.visible")

，测试仍然通过，这表明

#employeeFormModal

同时可见和不可见。

我怀疑可能是由于淡入淡出过渡导致的时序问题，所以我在

cy.wait()

命令后面添加了

click()

，周期超过0.15秒。随后，

.should("be.visible")

断言失败，这正是我所期望的。

我的问题是： 有没有更好的方法来处理淡入淡出过渡效果，而不必等待特定的时间？（就像我所做的

cy.wait(5000)

）

Answer 1

同时可见和不可见仅在

defaultCommandTimeout

设置为0时适用。

但是每个命令都会重试设置的超时时间（默认 4 秒），所以

cy.get("#employeeFormModal").should("not.be.visible")

最初失败并重试整个链（get()和should()）直到它通过。

要查看重试调用，请使用

should()

的回调版本

cy.get('button[class*="save"]').click();
cy.get("#employeeFormModal").should('be.visible');

cy.get("#employeeFormModal")
  .should($el => {
    const isVisible = $el.is(':visible') 
    console.log(isVisible)                      // initially true, changes to false
    assert(!isVisible, 'Element is not visible')
})