Cypress: зачем мне запускать cy.wait (0) перед каждым тестом?

Question

Я тестирую следующее приложение: https://objective-benz-e53b25.netlify.app/

Это панель инструментов bootstrap, и я просто тестирую, нажимая на раскрывающееся меню, затем нажимая и выбирая и проверяю, что меня перенаправляют.

Это тесты, которые я запускаю:

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')
    });

});

И выдает следующую ошибку:

  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

Если Я переключил (третий) тест выхода из системы для теста настроек (второй), затем неудачным является выход из системы.

Мне пришлось добавить cy.wait (0) в beofreEach, и он решил это.

Странно то, что теперь он работает нормально, даже с закомментированным cy.wait.

Я поделился кодом с моим коллегой, и у него возникла та же проблема.

Есть идеи, почему это было неудачно, и почему теперь все работает нормально?

Answer 1

Проблема происходит с cy.get ('nav a.dropdown-toggle'). Click (); щелчок не работает на значке пользователя, поэтому раскрывающийся список не отображается и тест не пройден. Одним из решений является использование {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");
  });
});