cy.click() in Cypress - Test Execution Trace

Test Overview

This test opens a webpage, finds a button by its data-cy attribute, clicks it, and verifies that a confirmation message appears.

Test Code - Cypress

Cypress

describe('Button click test', () => {
  it('Clicks the submit button and checks confirmation', () => {
    cy.visit('https://example.com/form')
    cy.get('[data-cy="submit-button"]').click()
    cy.get('[data-cy="confirmation-message"]').should('be.visible').and('contain', 'Submitted successfully')
  })
})

Execution Trace - 6 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens and navigates to 'https://example.com/form'	Browser displays the form page with a submit button	-	PASS
3	Find element with selector '[data-cy=submit-button]'	Submit button is located on the page	Element exists and is visible	PASS
4	Click the submit button using cy.click()	Button is clicked, form submission triggered	-	PASS
5	Find element with selector '[data-cy=confirmation-message]'	Confirmation message element is present after click	Element is visible and contains text 'Submitted successfully'	PASS
6	Test ends	Test completed successfully with confirmation message shown	-	PASS

Failure Scenario

Failing Condition: The submit button is not found or not clickable

Execution Trace Quiz - 3 Questions

What does cy.click() do in this test?

A Navigates to the form page

B Clicks the submit button to trigger form submission

C Finds the confirmation message element

D Checks if the confirmation message is visible

Key Result

Always use clear, stable selectors like data-cy attributes for locating elements before clicking to ensure reliable tests.