Overwriting existing commands in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test after overwriting?

Consider the following Cypress command overwrite and test code. What will be the output in the test runner?

Cypress

Cypress.Commands.overwrite('click', (originalFn, subject, options) => {
  cy.log('Custom click called');
  return originalFn(subject, options);
});

describe('Overwrite click test', () => {
  it('should log custom message and click', () => {
    cy.visit('https://example.cypress.io')
    cy.get('a').first().click();
  });
});

A The test logs 'Custom click called' once and clicks the first link successfully.

B The test fails because the overwrite does not call the original function.

C The test logs 'Custom click called' multiple times but does not perform the click.

D The test throws a syntax error due to incorrect overwrite syntax.

💡 Hint

Remember that the overwrite calls the original function after logging.

The overwrite wraps the original 'click' command, logs a message, then calls the original click. This means the click still happens and the log appears once.

❓ assertion

intermediate

Which assertion correctly verifies the overwritten command was called?

You have overwritten the 'type' command to log a message. Which assertion below correctly checks that the log was called during a test?

Cypress

Cypress.Commands.overwrite('type', (originalFn, subject, text, options) => {
  cy.log('Custom type called');
  return originalFn(subject, text, options);
});

// Test code
cy.get('input').type('hello');

A cy.get('input').type('hello').should('have.value', 'Custom type called');

B cy.get('input').should('contain', 'Custom type called');

C cy.get('input').type('hello').should('have.text', 'Custom type called');

D cy.spy(cy, 'log').should('have.been.calledWith', 'Custom type called');

💡 Hint

Think about how to check if a Cypress command like cy.log was called with a specific argument.

Using cy.spy on cy.log allows checking if it was called with the expected message. The other options incorrectly check DOM elements or text.

🔧 Debug

advanced

Why does this overwritten command cause a test to hang?

Analyze the following overwrite code. Why does the test hang indefinitely when calling cy.get('button').click()?

Cypress

Cypress.Commands.overwrite('click', (originalFn, subject, options) => {
  cy.log('Click overwrite start');
  cy.get('button').click();
  return originalFn(subject, options);
});

A Because the overwrite calls cy.get('button').click() recursively causing infinite loop.

B Because cy.log is asynchronous and blocks the command chain.

C Because originalFn is called without subject causing an error.

D Because the overwrite does not return anything.

💡 Hint

Think about what happens when the overwritten command calls itself inside.

Calling cy.get('button').click() inside the click overwrite calls the overwritten click again, causing infinite recursion and hanging the test.

🧠 Conceptual

advanced

What is the main benefit of overwriting Cypress commands?

Why would a tester choose to overwrite an existing Cypress command instead of creating a new custom command?

A To prevent Cypress from logging commands in the test runner.

B To change the default behavior of existing commands globally without changing test code.

C To make tests run faster by skipping command execution.

D To disable commands temporarily during test execution.

💡 Hint

Think about how overwriting affects all uses of a command.

Overwriting allows changing how existing commands behave everywhere, so tests can keep using the same commands but with new behavior.

❓ framework

expert

How to properly overwrite 'visit' command to add a default timeout?

You want to overwrite Cypress's 'visit' command to add a default timeout of 10000ms if no timeout is specified. Which overwrite implementation is correct?

Cypress

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  // Your code here
});

A return originalFn(url, options || { timeout: 10000 });

B return originalFn(url, { ...options, timeout: 10000 });

C return originalFn(url, { timeout: 10000, ...options });

D return originalFn(url, options.timeout ? options : { timeout: 10000 });

💡 Hint

Remember that later properties in object spread override earlier ones.

Using { timeout: 10000, ...options } sets timeout to 10000 by default but allows options.timeout to override it if provided. Other options either override timeout incorrectly or ignore options.