Cypress.Commands.add() - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this custom command usage?

Consider this Cypress custom command added to support login:

 Cypress.Commands.add('login', (username, password) => {
   cy.get('#user').type(username);
   cy.get('#pass').type(password);
   cy.get('#submit').click();
 });

What will happen when the test runs this code?

 cy.login('user1', 'pass123'); 

Cypress

Cypress.Commands.add('login', (username, password) => {
  cy.get('#user').type(username);
  cy.get('#pass').type(password);
  cy.get('#submit').click();
});

cy.login('user1', 'pass123');

A The test only clicks #submit without typing anything.

B The test throws an error because cy.login is not a valid Cypress command.

C The test types 'login' in #user and 'user1' in #pass, then clicks #submit.

D The test types 'user1' in #user, 'pass123' in #pass, then clicks #submit.

💡 Hint

Remember that Cypress.Commands.add creates a new command callable by cy..

The custom command 'login' is defined to type the username and password into the respective fields and then click submit. Calling cy.login('user1', 'pass123') runs this sequence exactly.

❓ assertion

intermediate

Which assertion correctly verifies the custom command was called?

You added a custom command 'fillForm' that types into inputs and clicks submit.
How do you assert that the command was called once during the test?

Cypress

Cypress.Commands.add('fillForm', () => {
  cy.get('#name').type('Alice');
  cy.get('#email').type('[e-mail]');
  cy.get('#submit').click();
});

// Test code
cy.fillForm();

A cy.spy(Cypress.Commands, 'fillForm').should('have.been.calledOnce');

B cy.stub(Cypress.Commands, 'fillForm').should('have.been.calledOnce');

C cy.get('@fillForm').should('have.been.calledOnce');

D cy.get('fillForm').should('have.been.calledOnce');

💡 Hint

Use cy.spy to watch if a function was called.

Using cy.spy on Cypress.Commands for 'fillForm' lets you check if the command was called. The other options misuse stubs or selectors.

🔧 Debug

advanced

Why does this custom command fail to run?

This custom command is added:

Cypress.Commands.add('clickButton', () => {
  cy.get('.btn').click
});

When the test calls cy.clickButton(), it fails. Why?

Cypress

Cypress.Commands.add('clickButton', () => {
  cy.get('.btn').click
});

cy.clickButton();

A Because custom commands cannot use arrow functions.

B Because cy.get('.btn').click is missing parentheses to invoke the click function.

C Because '.btn' selector is invalid and causes an error.

D Because cy.clickButton() is not a valid Cypress command.

💡 Hint

Check if all functions are properly called.

The code references cy.get('.btn').click without parentheses, so the click function is not executed. Adding () fixes it.

🧠 Conceptual

advanced

What is the main benefit of using Cypress.Commands.add()?

Why do testers create custom commands with Cypress.Commands.add() instead of writing the same steps repeatedly?

A To reuse common test steps easily and keep tests clean and readable.

B To make tests run faster by compiling commands into native code.

C To avoid writing any selectors in tests.

D To automatically generate test reports.

💡 Hint

Think about code reuse and maintenance.

Custom commands help reuse common sequences, making tests simpler and easier to maintain. They do not affect speed or reporting directly.

❓ framework

expert

How to properly add a custom command that returns a value for chaining?

You want to add a custom command 'getUserName' that gets text from '#username' and returns it for chaining.
Which code correctly implements this?

Cypress

Cypress.Commands.add('getUserName', () => {
  return cy.get('#username').invoke('text');
});

A Cypress.Commands.add('getUserName', () => { cy.get('#username').invoke('text'); });

B Cypress.Commands.add('getUserName', () => { return cy.get('#username').text(); });

C Cypress.Commands.add('getUserName', () => cy.get('#username').invoke('text'));

D Cypress.Commands.add('getUserName', () => cy.get('#username').text());

💡 Hint

Remember to return the Cypress chainable for chaining.

Option C returns the chainable correctly. Option C misses return, so returns undefined. Options C and D use .text() which is not a Cypress command and causes errors.