Overwriting existing commands in Cypress - Test Execution Trace

Test Overview

This test overwrites the default Cypress click command to add a console log before clicking. It verifies that the overwritten command works correctly by clicking a button and checking the button's text.

Test Code - Cypress

Cypress

// Overwrite the click command to add a console log
Cypress.Commands.overwrite('click', (originalFn, subject, options) => {
  console.log('Custom click command called')
  return originalFn(subject, options)
})

describe('Overwrite click command test', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io/commands/actions')
  })

  it('should use overwritten click command and verify button text', () => {
    cy.get('.action-btn').first().click()
    cy.get('.action-btn').first().should('have.text', 'Action')
  })
})

Execution Trace - 6 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner initialized	-	PASS
2	Browser opens and navigates to https://example.cypress.io/commands/actions	Page with action buttons loaded	Page loaded successfully	PASS
3	Find the first element with class '.action-btn'	Button element found	Element exists	PASS
4	Call overwritten click command on the button	Console logs 'Custom click command called', button is clicked	Click action performed	PASS
5	Find the first '.action-btn' again and check its text	Button element visible with text	Button text is 'Action'	PASS
6	Test ends	Test completed successfully	-	PASS

Failure Scenario

Failing Condition: The button element with class '.action-btn' is not found or click does not trigger correctly

Execution Trace Quiz - 3 Questions

What does the overwritten click command do before clicking?

A Changes the button text

B Prevents the click action

C Logs a message to the console

D Waits for 5 seconds

Key Result

Overwriting commands in Cypress allows adding custom behavior while preserving original functionality, which helps in extending tests without breaking existing commands.