cy.click() in Cypress - Build an Automation Script

Verify clicking the Submit button navigates to the confirmation page

Preconditions (2)

Step 1: Locate the Submit button by its data-cy attribute 'submit-btn'

Step 2: Click the Submit button

Step 3: Wait for navigation to the confirmation page

✅ Expected Result: The browser navigates to '/confirmation' URL after clicking the Submit button

Automation Requirements - Cypress

Assertions Needed:

Verify the Submit button is visible before clicking

Verify the URL changes to '/confirmation' after clicking

Best Practices:

Use data-cy attributes for selectors

Use cy.get() with assertions before clicking

Avoid hardcoded waits; rely on Cypress automatic waits

Chain commands for readability

Automated Solution

Cypress

describe('Form Submit Button Click Test', () => {
  it('should navigate to confirmation page after clicking Submit', () => {
    cy.visit('/form');
    cy.get('[data-cy=submit-btn]')
      .should('be.visible')
      .click();
    cy.url().should('include', '/confirmation');
  });
});

This test visits the form page first using cy.visit(). Then it locates the Submit button using the data-cy attribute selector, which is a best practice for stable selectors. Before clicking, it asserts the button is visible to ensure the element is ready for interaction. The click() command simulates the user clicking the button. Finally, it asserts the URL includes '/confirmation' to confirm navigation happened as expected. Cypress automatically waits for elements and page loads, so no explicit waits are needed.

Common Mistakes - 3 Pitfalls

Using CSS classes or IDs that may change instead of data-cy attributes for selectors

{'mistake': 'Calling click() without checking if the element is visible or enabled', 'why_bad': 'Clicking on hidden or disabled elements causes test failures or false positives', 'correct_approach': "Use assertions like should('be.visible') before clicking"}

Using cy.wait() with fixed time before clicking

Bonus Challenge

Now add data-driven testing to click Submit button on three different form pages with URLs '/form1', '/form2', '/form3' and verify navigation each time

Show Hint