/// <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.
