如何在Cypress中处理fade过渡？无需固定等待时长的优化方案

我有一个带.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) 可以解决问题
cy.get("#employeeFormModal").should("be.visible");

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

现在的问题是should("be.visible")和should("not.be.visible")两个断言居然同时通过了，这显然是fade过渡动画导致的时序问题。虽然在click()后添加一个超过0.15秒的cy.wait()能让.should("be.visible")按预期失败，但我不想依赖固定时长的等待，有没有更优的处理方式？

1. 断言.show类的移除 #

模态框的可见性是通过.show类控制的，直接断言这个类被移除，能精准捕捉模态框关闭的触发时机，避开过渡动画的干扰：

cy.get('button[class*="save"]').click();
// 等待.show类被移除，这是模态框关闭的核心标志
cy.get("#employeeFormModal").should("not.have.class", "show");
// 再断言模态框不可见
cy.get("#employeeFormModal").should("not.be.visible");

2. 断言opacity属性达到最终值 #

直接等待opacity变为0，Cypress会自动轮询直到属性符合预期，无需固定等待时长：

cy.get('button[class*="save"]').click();
cy.get("#employeeFormModal")
  .should("have.css", "opacity", "0");
// 也可以结合可见性断言
cy.get("#employeeFormModal")
  .should("have.css", "opacity", "0")
  .and("not.be.visible");

3. 禁用测试环境的过渡动画 #

从根源上消除动画对测试的影响，在全局配置中禁用所有过渡/动画效果：
在cypress/support/e2e.js中添加：

Cypress.on('window:before:load', (win) => {
  win.document.documentElement.style.transition = 'none';
  win.document.documentElement.style.animation = 'none';
});

如果只想针对当前模态框禁用，也可以这样写：

cy.get("#employeeFormModal").invoke('css', 'transition', 'none');
cy.get('button[class*="save"]').click();
cy.get("#employeeFormModal").should("not.be.visible");

4. 使用自定义等待逻辑（可选） #

如果需要更灵活的条件判断，可以借助cypress-wait-until插件实现自定义等待：

// 先安装插件：npm install cypress-wait-until --save-dev
cy.get('button[class*="save"]').click();
cy.waitUntil(() => 
  cy.get("#employeeFormModal").then($el => !$el.is(":visible"))
);

内容的提问来源于stack exchange，提问作者Toan Tran Van