Cypress: set timeout to custom command

Question

I have a custom command where I want to override the default timeout of 4 seconds. I tried setting the timeout in the command's code and in the tests that use it but with no success yet.

Cypress.Commands.add("login", () => {
  Auth.signIn(username, password)
    .then(() => {
        console.log('Programmatically logged in as ' + username);
    })
    .catch(err => console.log('Error when login in: ', err));
})

I attempted the following:

Cypress.Commands.add("login", { timeout : 10000} () => {...}

and

Cypress.Commands.add("login", () => {
  Auth.signIn(username, password)
    .then(({ timeout : 10000}) => {
        console.log('Programmatically logged in as ' + username);
    })
    .catch(err => console.log('Error when login in: ', err));
})

EDIT/UPDATE

I added async/await to the Auth.signIn() call and that makes the execution wait for that method to finish, but if it reaches the 4 seconds default timeout it makes the test fail. The best I could do was include all the test code inside the then of the login command.

it('Test that requires login', () => {
    cy.login().then(function (){
        cy.visit('/');
        //...
    });
})

Although the test waits for the login operation to finish, it fails if the timeout is reached before it is logged in.

If the reason for your timeout is the time needed for the form to finish it`s work, I suggest to target a key element at the follow up page, that you will need for testing and wait for it to be visible. It is not 100% full proof, but in most cases is a better practice. — Rosen Mihaylov
@ManuelAbascal not exactly. The login operation takes between 3.5 to 8 seconds to finish, making the test flaky because when the login is completed before the 4 seconds timeout it passes, otherwise it doesn't — MauriR
@RosenMihaylov thanks for the suggestion. The trick is that in the app, when a not logged in user navigates to the home page it gets redirected to the /login page, so I the login process must be completed even before the start of the test and the command cy.visit — MauriR
@MauriR, in that case I would use cy.get('loginFormElement').should('be.visible') after cy.visit() and before the test starts — Rosen Mihaylov

Manuel Abascal Manuel Abascal · Accepted Answer · 2020-11-18T17:21:01

I'm not sure about timeout in Cypress's custom commands, but you could use a workaround by passing a default param into your custom command like so:

Cypress.Commands.add("login", (waitTimer = 1000) => {
  Auth.signIn(username, password)
    .then(() => {
        cy.wait(waitTimer);
        console.log('Programmatically logged in as ' + username);
    })
    .catch(err => console.log('Error when login in: ', err));
})

Note: Beware that passing timeouts or arbitrarily waiting for an x amount of seconds is not considered good practice. You should instead check for the response's status & assert it returns a 200 status or use route aliases.

Example:

......
.then(response => {
    if (response.status !== 200) {
      cy.log('An error happened while logging in');
    }

Cypress: set timeout to custom command

1 Answers