Command timeout vs assertion timeout in Cypress - Automation Approaches Compared

Verify login button becomes enabled after user input with command and assertion timeouts

Preconditions (1)

Step 1: Locate the username input field and type 'testuser'

Step 2: Locate the password input field and type 'Password123!'

Step 3: Locate the login button which is initially disabled

Step 4: Wait for the login button to become enabled within 5000 milliseconds

Step 5: Click the login button

Step 6: Verify that the URL changes to '/dashboard' within 7000 milliseconds

✅ Expected Result: The login button becomes enabled within 5 seconds after typing credentials, clicking it navigates to the dashboard page within 7 seconds

Automation Requirements - Cypress

Assertions Needed:

Assert login button is enabled after typing credentials

Assert URL changes to '/dashboard' after clicking login button

Best Practices:

Use explicit command timeout for waiting login button to be enabled

Use assertion timeout for URL verification

Use cy.get() with proper selectors and chaining

Avoid hardcoded waits like cy.wait()

Use clear and descriptive test steps

Automated Solution

Cypress

describe('Login Button Enable and Navigation Test', () => {
  beforeEach(() => {
    cy.visit('/login');
  });

  it('should enable login button after input and navigate to dashboard', () => {
    // Type username
    cy.get('#username').type('testuser');

    // Type password
    cy.get('#password').type('Password123!');

    // Wait up to 5000ms for login button to become enabled
    cy.get('#login-button', { timeout: 5000 })
      .should('be.enabled')
      .click();

    // Assert URL changes to /dashboard within 7000ms
    cy.url({ timeout: 7000 }).should('include', '/dashboard');
  });
});

This test visits the login page first.

It types the username and password into their respective fields.

Then it waits up to 5 seconds for the login button to become enabled using cy.get with a timeout option and asserts it is enabled before clicking.

After clicking, it waits up to 7 seconds for the URL to include '/dashboard' to confirm navigation succeeded.

This shows the difference between command timeout (waiting for element state) and assertion timeout (waiting for condition to be true).

We avoid fixed waits and use Cypress's built-in retry and timeout features for reliable tests.

Common Mistakes - 3 Pitfalls

Using cy.wait() with fixed time instead of command or assertion timeouts

Not specifying timeout when waiting for element state changes

Asserting element state immediately after typing without waiting

Bonus Challenge

Now add data-driven testing with 3 different sets of username and password inputs to verify login button enabling and navigation.

Show Hint