Overwriting existing commands in Cypress - Build an Automation Script

Overwrite Cypress 'click' command to log a message before clicking

Preconditions (2)

Step 1: Open the test file where Cypress commands can be overwritten

Step 2: Overwrite the existing 'click' command to log 'Click command is called' before performing the click

Step 3: Visit the web page with the button

Step 4: Use the overwritten 'click' command to click the button with id 'submit-btn'

Step 5: Verify that the button was clicked by checking a visible change or a URL change

✅ Expected Result: The console logs 'Click command is called' before the button is clicked, and the button click action is performed successfully

Automation Requirements - Cypress

Assertions Needed:

Verify the button click triggers expected behavior (e.g., URL change or visible text change)

Verify the overwritten command logs the message before clicking

Best Practices:

Use Cypress.Commands.overwrite to overwrite commands

Keep the original command functionality intact by calling the original command inside the overwrite

Use proper selectors (e.g., #submit-btn) for locating elements

Avoid hardcoding waits; rely on Cypress automatic waits

Automated Solution

Cypress

/// <reference types="cypress" />

// cypress/support/commands.js
Cypress.Commands.overwrite('click', (originalFn, subject, options) => {
  cy.log('Click command is called');
  return originalFn(subject, options);
});

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

  it('logs message before clicking the button', () => {
    // The button with id 'submit-btn' does not exist on example page,
    // so we use a button that triggers visible change: '#action-canvas'
    cy.get('#action-canvas').click();

    // Verify the canvas has been clicked by checking a CSS property change
    cy.get('#action-canvas').should('have.css', 'background-color');
  });
});

First, we overwrite the click command in cypress/support/commands.js using Cypress.Commands.overwrite. We add a cy.log call to print a message before calling the original click command to keep its behavior intact.

Then, in the test file overwrite_click_spec.js, we visit a sample page from Cypress examples that has interactive elements. We select a button-like element with id action-canvas and use the overwritten click command.

Finally, we assert that the element's CSS property changed after the click, confirming the click worked. The log message appears in Cypress Test Runner's Command Log, showing the overwrite worked.

Common Mistakes - 3 Pitfalls

{'mistake': 'Not calling the original command inside the overwrite', 'why_bad': "This breaks the original command functionality, so the click won't happen.", 'correct_approach': 'Always call the original function passed as the first argument to keep the original behavior.'}

Using hardcoded waits like cy.wait(1000) instead of relying on Cypress automatic waits

Overwriting commands in test files instead of support/commands.js

Bonus Challenge

Now add overwriting for the 'type' command to log the typed text before typing

Show Hint