CODEWITHSUNDEEP
cypress
opensas
opensas

Reputation: 63445

Cypress: why do I need to run cy.wait(0) before each test?

I'm testing the following app: https://objective-benz-e53b25.netlify.app/

It's a bootstrap dashboard and I'm just testing clicking on a drop-down menu, then clicking and item, and checking that I'm being redirected.

this is are tests I run:

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

});

And it gives me the following error:

  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

If I switched the logout (third) test for the settings (second) test, then the failing one is logout.

I had to add a cy.wait(0) on the beofreEach and it solved it.

The strange thing is that now it is working ok, even with the cy.wait commented out.

I shared the code with a colleague of mine and he had the same trouble.

Any idea why it was failling, and why now it seems to work ok?

Upvotes: 2

Views: 1180

Answers (1)

Radha
Radha

Reputation: 106

Issue is hapening with cy.get('nav a.dropdown-toggle').click(); click is not working on User Icon hence the drop down is not visible and test fails. One of the solution is to use { force: true }. This option is to disable error checking on drop down click.

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

Upvotes: 1

Related Questions