Assertion timeout customization in Cypress - Framework Patterns

Framework Mode - Assertion timeout customization

Folder Structure

  cypress/
  ├── e2e/                  # Test specs
  │   ├── login.cy.js       # Example test file
  │   └── dashboard.cy.js
  ├── support/              # Support files
  │   ├── commands.js       # Custom commands
  │   └── e2e.js            # Global setup
  ├── fixtures/             # Test data files
  │   └── user.json
  cypress.config.js         # Main Cypress config file
  package.json              # Project dependencies and scripts
  

Test Framework Layers

• Test Specs (cypress/e2e/): Contains test files where assertions with customized timeouts are written.
• Support Layer (cypress/support/): Holds reusable commands and global configurations, including timeout overrides.
• Fixtures (cypress/fixtures/): Stores static test data used in tests.
• Configuration (cypress.config.js): Central place to set default assertion timeouts and environment variables.

Configuration Patterns

Customize assertion timeouts in cypress.config.js using defaultCommandTimeout or responseTimeout. Override timeouts per assertion in test code using options like { timeout: 10000 }.

  // cypress.config.js
  import { defineConfig } from 'cypress'

  export default defineConfig({
    e2e: {
      baseUrl: 'https://example.com',
      defaultCommandTimeout: 8000,  // default timeout for commands and assertions
      env: {
        username: 'testuser',
        password: 'password123'
      }
    }
  })
  

Example of overriding timeout in a test assertion:

  cy.get('#submit-button', { timeout: 10000 }).should('be.visible')
  

Test Reporting and CI/CD Integration

Use Cypress built-in reporters or plugins like mochawesome for detailed reports including assertion timeout failures.

Integrate Cypress tests in CI/CD pipelines (GitHub Actions, Jenkins) to run tests with customized timeouts ensuring flaky tests are minimized.

  // Example GitHub Actions snippet
  name: Cypress Tests
  on: [push, pull_request]
  jobs:
    test:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v3
        - name: Install dependencies
          run: npm ci
        - name: Run Cypress tests
          run: npx cypress run
  

Best Practices

• Set a reasonable global default timeout in cypress.config.js to avoid tests failing too quickly.
• Override timeouts only when necessary for slow-loading elements or external resources.
• Use explicit timeout options in assertions rather than increasing global timeouts to keep tests fast.
• Keep timeout values consistent and documented to help team members understand test behavior.
• Monitor flaky tests caused by timeouts and adjust selectors or application performance instead of just increasing timeouts.

Self Check

Where in this folder structure would you add a custom command to globally apply a longer timeout for a specific assertion?

Key Result

Customize assertion timeouts in Cypress via config and per-assertion options for reliable, fast tests.

Practice

1. What does customizing the timeout option in Cypress assertions help with?

easy

A. It allows tests to wait longer or shorter for elements or conditions before failing.

B. It changes the browser window size during tests.

C. It disables all assertions in the test.

D. It automatically retries failed tests multiple times.

Solution

1. Step 1: Understand the purpose of timeout in Cypress assertions

   The timeout option controls how long Cypress waits for an element or condition before marking the test as failed.

2. Step 2: Identify what customizing timeout achieves

   By customizing timeout, you can adjust waiting time to match your app's response speed, avoiding false failures or unnecessary delays.

3. Final Answer:

   It allows tests to wait longer or shorter for elements or conditions before failing. -> Option A

4. Quick Check:

   Timeout customization = wait time adjustment [OK]

Hint: Timeout controls wait duration for assertions [OK]

Common Mistakes:

• Confusing timeout with browser size settings
• Thinking timeout disables assertions
• Assuming timeout retries tests automatically

2. Which of the following is the correct way to set a 10-second timeout for a cy.get() command in Cypress?

easy

A. cy.get('.btn').timeout(10000)

B. cy.get('.btn', { timeout: 10000 })

C. cy.get('.btn').setTimeout(10)

D. cy.get('.btn', timeout=10)

Solution

1. Step 1: Recall the syntax for setting timeout in Cypress commands

   The timeout option is passed as an object in the second argument of cy.get(), like { timeout: 10000 } for 10 seconds.

2. Step 2: Check each option for correct syntax

   cy.get('.btn', { timeout: 10000 }) uses the correct object syntax. Chained .timeout(10000) and .setTimeout(10) use invalid methods. cy.get('.btn', timeout=10) uses incorrect assignment syntax.

3. Final Answer:

   cy.get('.btn', { timeout: 10000 }) -> Option B

4. Quick Check:

   Timeout option passed as object = correct syntax [OK]

Hint: Timeout is an option object in command parentheses [OK]

Common Mistakes:

• Using method chaining for timeout instead of option object
• Passing timeout as a separate argument without braces
• Using assignment syntax inside command arguments

3. Consider this Cypress code snippet:

cy.get('#loading', { timeout: 5000 }).should('not.exist');

What happens if the element with id loading still exists after 5 seconds?

medium

A. The test ignores the assertion and continues.

B. The test passes immediately without waiting.

C. The test retries forever until the element disappears.

D. The test fails because the element still exists after the 5-second timeout.

Solution

1. Step 1: Understand the timeout effect on cy.get() and assertion

   The timeout: 5000 means Cypress waits up to 5 seconds for the element to appear or disappear as per the assertion.

2. Step 2: Analyze the assertion should('not.exist') with timeout

   If after 5 seconds the element still exists, the assertion fails because the condition was not met within the timeout.

3. Final Answer:

   The test fails because the element still exists after the 5-second timeout. -> Option D

4. Quick Check:

   Timeout reached without condition met = test failure [OK]

Hint: Timeout limits wait; failure if condition unmet [OK]

Common Mistakes:

• Thinking test passes immediately without waiting
• Assuming infinite retries beyond timeout
• Believing assertion is skipped on timeout

4. You wrote this Cypress test but it fails too quickly:

cy.contains('Submit', { timeout: 2000 }).click();

Your app sometimes takes 5 seconds to show the button. What is the best fix?

medium

A. Increase the timeout value to at least 5000 milliseconds.

B. Remove the timeout option completely.

C. Change cy.contains to cy.get without timeout.

D. Add a wait(2000) before cy.contains.

Solution

1. Step 1: Identify the problem with current timeout

   The timeout is set to 2000 ms, but the button appears after 5 seconds, so the test fails too early.

2. Step 2: Choose the best fix to wait longer for the button

   Increasing the timeout to 5000 ms or more lets Cypress wait long enough for the button to appear before failing.

3. Final Answer:

   Increase the timeout value to at least 5000 milliseconds. -> Option A

4. Quick Check:

   Timeout must match app response time [OK]

Hint: Match timeout to app load speed [OK]

Common Mistakes:

• Removing timeout and causing default short wait
• Using wait() which is less reliable than timeout
• Changing command type without fixing wait time

5. You want to check that a success message appears within 3 seconds after clicking a button, but the message may sometimes take up to 7 seconds. Which is the best way to customize the assertion timeout in Cypress?

hard

A. Use cy.get('.success').should('be.visible').wait(7000) after clicking.

B. Use cy.get('.success').should('be.visible', { timeout: 3000 }) after clicking.

C. Use cy.get('.success', { timeout: 7000 }).should('be.visible') after clicking.

D. Use cy.get('.success', { timeout: 3000 }).should('be.visible') after clicking.

Solution

1. Step 1: Understand the timing requirement for the success message

   The message can take up to 7 seconds to appear, so the timeout must be at least 7000 ms to avoid false failures.

2. Step 2: Identify correct syntax to set timeout on cy.get()

   The timeout option must be passed inside the cy.get() command as an object, not inside should() or using wait().

3. Final Answer:

   Use cy.get('.success', { timeout: 7000 }).should('be.visible') -> Option C

4. Quick Check:

   Set timeout on cy.get to max wait needed [OK]

Hint: Set timeout on cy.get, not on should or wait [OK]

Common Mistakes:

• Setting timeout inside should() which is ignored
• Using fixed wait() which delays unnecessarily
• Setting timeout too short causing test failure