很多时候 cypress 无法访问 /auth 页面并且找不到 id 或 class

Question

I am trying to visit /auth path and login in with cypress using the following code:

Cypress.Commands.add('login', (email, password) => {
  cy.get('.auth').find('.login').should(($login) => {
    expect($login).to.contain('auth.welcome')
  })

  cy.get('[name="email"]').type(email);
  cy.get('[name="password"]').type(password);

  cy.get('button.login')
    .click();
})

But Cypress fails with the following error message:

AssertionError: Timed out retrying: Expected to find element: `.auth`, but never found it.

Sometimes the code works and sometimes it fails.

my login page url is (http://localhost:3000/) or (http://localhost:3000/auth)

Answer 1

this command will wait the element:

cy.get('.auth').should('be.visible');

Add this command before interacting with it.

Answer 2

Custom commands are very good utilities, but encapsulating multiple UI actions inside, make the overall test execution very slow and flaky especially for login actions.

It is not wrong at all your approach, however I would suggest doing it via API calls, so in result you will have a stable and robust login function.

Cypress.Commands.add('login', (username, password) => {
    return cy
        .request('POST', `${<YOUR_API_URL>}/auth`, {
            username,
            password,
        })
        .its('body.token')
        .then(token => {
            cy.visit(`/`, {
                onBeforeLoad(win) {
                    win.sessionStorage.setItem('token', token);
                },
            });
        });
});