Retry-ability of commands in Cypress - Build an Automation Script

Verify retry-ability of Cypress commands on a dynamic loading element

Preconditions (3)

Step 1: Open the web page

Step 2: Click the button with id 'load-content-btn'

Step 3: Wait for the dynamic content to appear inside the div with id 'dynamic-content'

Step 4: Verify that the dynamic content contains the text 'Content Loaded Successfully'

✅ Expected Result: The test should pass by retrying the command to find the dynamic content until it appears or timeout occurs

Automation Requirements - Cypress

Assertions Needed:

Verify the button is clickable

Verify the dynamic content div contains the expected text after loading

Best Practices:

Use Cypress built-in retry-ability by chaining commands

Avoid using arbitrary waits like cy.wait() unless necessary

Use proper selectors with ids or data attributes

Use assertions that automatically retry until passing or timeout

Automated Solution

Cypress

describe('Retry-ability of commands test', () => {
  beforeEach(() => {
    cy.visit('https://example.com/dynamic-loading')
  })

  it('should retry commands until dynamic content appears', () => {
    // Click the button to load content
    cy.get('#load-content-btn').should('be.visible').click()

    // Verify dynamic content appears with expected text
    cy.get('#dynamic-content')
      .should('be.visible')
      .and('contain.text', 'Content Loaded Successfully')
  })
})

This test visits the page before each test run to start fresh.

It clicks the button with id load-content-btn after verifying it is visible and clickable.

Then it uses cy.get() to find the dynamic content div and asserts it is visible and contains the expected text.

Cypress automatically retries cy.get() and the assertions until they pass or timeout, demonstrating retry-ability.

No arbitrary waits are used, making the test efficient and reliable.

Common Mistakes - 3 Pitfalls

Using cy.wait() with fixed time instead of relying on retry-ability

Using overly complex or fragile selectors like long XPath expressions

{'mistake': 'Not asserting visibility before clicking a button', 'why_bad': 'Clicking an invisible or disabled button can cause test failures or unexpected behavior.', 'correct_approach': "Use assertions like .should('be.visible') before performing actions."}

Bonus Challenge

Now add data-driven testing with 3 different buttons that load different dynamic content texts

Show Hint