Cypress：为什么每次测试前都需要运行cy.wait（0）？

我正在测试以下应用程序：

这是一个引导仪表板，我只是测试点击一个下拉菜单，然后点击和项目，并检查我是否被重定向

这是我运行的测试：

describe('Sapper template app', () => {
    beforeEach(() => {
        cy.visit('/')
        // cy.wait(0);
    });

    it('has the correct <h1>', () => {
        cy.contains('h1', 'Dashboard')
    });

    it('navigates to /settings', () => {
        cy.get('nav a.dropdown-toggle').click();
        cy.get('nav a.dropdown-item').contains('Settings').click();
        cy.url().should('include', '/settings');
        cy.contains('h3', 'Settings')
    });

    it('navigates to /logout', () => {
        cy.get('nav a.dropdown-toggle').click();
        cy.get('nav a.dropdown-item').contains('Logout').click();
        cy.url().should('include', '/pages/authentication/login');
        cy.contains('h3', 'Login')
    });

});

description（'Sapper模板应用'，（）=>{
在每个之前（（）=>{
cy.visit（“/”）
//cy.wait（0）；
});
它（'具有正确的'，（）=>{
cy.contains（'h1'，'Dashboard'）
});
它（'导航到/设置'，（）=>{
cy.get（'nav a.dropdown-toggle'）。单击（）；
cy.get（'nav a.dropdown-item'）。包含（'Settings'）。单击（）；
cy.url（）应该（'include'，'/settings'）；
cy.contains（'h3'，'Settings'）
});
它（'导航到/注销'，（）=>{
cy.get（'nav a.dropdown-toggle'）。单击（）；
cy.get（'nav a.dropdown-item'）。包含（'Logout'）。单击（）；
cy.url（）应该（'include'，'/pages/authentication/login'）；
cy.contains（'h3'，'Login'）
});
});

它给出了以下错误：

  2 passing (10s)
  1 failing

  1) Sapper template app navigates to /settings:
     CypressError: Timed out retrying: cy.click() failed because this element is not visible:

<a class="dropdown-item" href="settings">Settings</a>

This element <a.dropdown-item> is not visible because its parent <div.dropdown-menu.dropdown-menu-right> has CSS property: display: none

2次通过（10秒）
1失败
1） Sapper模板应用程序导航到/设置：
CypressError:超时重试：cy.click（）失败，因为此元素不可见：
此元素不可见，因为其父元素具有CSS属性：display:none

如果我将注销（第三次）测试切换为设置（第二次）测试，那么失败的是注销

我不得不在beofreach上添加一个cy.wait（0），它解决了这个问题

奇怪的是，现在它工作正常，即使cy.wait被注释掉了

我和我的一个同事分享了代码，他也有同样的问题

---

你知道它为什么会出故障，为什么现在看起来工作正常吗？

问题在于cy.get（'nav a.dropdown-toggle'）。单击（）； 单击“用户”图标无效，因此下拉列表不可见，测试失败。 解决方案之一是使用{force:true}。此选项用于禁用下拉单击时的错误检查

  beforeEach(() => {
    cy.visit("https://objective-benz-e53b25.netlify.app/");
  });

  it("has the correct <h1>", () => {
    cy.contains("h1", "Dashboard");
  });

  it("navigates to /settings", () => {
    cy.get("nav a.dropdown-toggle").click({ force: true });
    cy.get("nav a.dropdown-item").contains("Settings").click({ force: true });
    cy.url().should("include", "/settings");
    cy.contains("h3", "Settings");
  });

  it("navigates to /logout", () => {
    cy.get("nav a.dropdown-toggle").click({ force: true });
    cy.get("nav a.dropdown-item").contains("Logout").click({ force: true });
    cy.url().should("include", "/pages/authentication/login");
    cy.contains("h3", "Login");
  });
});

beforeach（（）=>{
访问（”https://objective-benz-e53b25.netlify.app/");
});
它（“具有正确的”，（）=>{
cy.contains（“h1”、“仪表板”）；
});
它（“导航到/设置”，（）=>{
cy.get（“导航a.dropdown-toggle”）。单击（{force:true}）；
cy.get（“导航a.dropdown-item”）。包含（“设置”）。单击（{force:true}）；
cy.url（）应（“包括”、“/settings”）；
包含（“h3”、“设置”）；
});
它（“导航到/注销”，（）=>{
cy.get（“导航a.dropdown-toggle”）。单击（{force:true}）；
cy.get（“nav a.dropdown-item”）。包含（“注销”）。单击（{force:true}）；
cy.url（）应该（“包括”、“/pages/authentication/login”）；
包含（“h3”、“登录”）；
});
});

非常感谢您的回答，我会尝试一下，您知道为什么它有时会起作用吗？为什么等待（0）似乎会停止呢？

.click（{force:true}）

之所以有效，是因为DOM中存在设置选项，但请注意，click事件没有传递到应用程序（没有调用下拉开关上的函数）。如果启用代码覆盖，您可能会发现这些函数未被覆盖。

cy.wait（0）

对该网站没有影响，但改用Firefox确实起到了作用。似乎与事件相关，因为在Chrome中，

。右下拉菜单

从未出现（它从未获得“show”类），但在Firefox中，事件按预期工作。