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.

Practice

1. What is the main purpose of Cypress.Commands.add() in Cypress testing?

easy

A. To configure browser settings

B. To add new test cases automatically

C. To create reusable custom commands for cleaner test code

D. To generate test reports

Solution

1. Step 1: Understand the function of Cypress.Commands.add()

   This method allows you to define your own commands that you can reuse in tests.

2. Step 2: Identify the benefit of reusable commands

   Reusable commands help keep test code clean and avoid repetition.

3. Final Answer:

   To create reusable custom commands for cleaner test code -> Option C

4. Quick Check:

   Reusable commands = Cleaner code [OK]

Hint: Remember: add() creates custom commands you can reuse [OK]

Common Mistakes:

• Thinking it adds test cases automatically
• Confusing it with test report generation
• Assuming it changes browser settings

2. Which of the following is the correct syntax to add a custom command named login in Cypress?

easy

A. Cypress.Commands.create('login', () => { /* code */ })

B. Cypress.addCommand('login', () => { /* code */ })

C. Commands.add('login', () => { /* code */ })

D. Cypress.Commands.add('login', () => { /* code */ })

Solution

1. Step 1: Recall the correct method name

   The correct method to add commands is Cypress.Commands.add().

2. Step 2: Check the syntax format

   The first argument is the command name as a string, the second is a function.

3. Final Answer:

   Cypress.Commands.add('login', () => { /* code */ }) -> Option D

4. Quick Check:

   Correct method and syntax = Cypress.Commands.add('login', () => { /* code */ }) [OK]

Hint: Use Cypress.Commands.add('name', function) always [OK]

Common Mistakes:

• Using Cypress.addCommand instead of Commands.add
• Omitting Cypress.Commands prefix
• Using create instead of add

3. Given the code below, what will be the output when cy.login() is called in a test?

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

// In test
cy.login('user1', 'pass1')

medium

A. Types 'user1' in #user, 'pass1' in #pass, then clicks #submit

B. Throws an error because login needs no parameters

C. Clicks #submit without typing anything

D. Types 'user1' in #pass and 'pass1' in #user

Solution

1. Step 1: Analyze the custom command parameters

   The command takes username and password and types them into respective fields.

2. Step 2: Follow the command actions

   It types username into '#user', password into '#pass', then clicks '#submit'.

3. Final Answer:

   Types 'user1' in #user, 'pass1' in #pass, then clicks #submit -> Option A

4. Quick Check:

   Parameters map to correct fields = Types 'user1' in #user, 'pass1' in #pass, then clicks #submit [OK]

Hint: Match parameters to fields carefully [OK]

Common Mistakes:

• Assuming no parameters are needed
• Mixing up username and password fields
• Ignoring the click action

4. Identify the error in the following custom command definition:

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

medium

A. Missing chaining of click() to cy.get()

B. Wrong command name, should be clickbutton

C. Should use cy.find() instead of cy.get()

D. No error, code is correct

Solution

1. Step 1: Review the command chaining

   cy.get('#button') returns an element, but cy.click() is called separately, not chained.

2. Step 2: Understand correct chaining

   Click should be chained to the element: cy.get('#button').click().

3. Final Answer:

   Missing chaining of click() to cy.get() -> Option A

4. Quick Check:

   Method chaining required = Missing chaining of click() to cy.get() [OK]

Hint: Always chain commands like cy.get(...).click() [OK]

Common Mistakes:

• Calling cy.click() separately
• Changing command name unnecessarily
• Using cy.find() instead of cy.get() without reason

5. You want to create a custom command fillForm that fills multiple fields and submits a form. Which approach correctly uses Cypress.Commands.add() to accept an object with field values and perform the actions?

hard

A. Cypress.Commands.add('fillForm', () => {
cy.get('#name').type(name)
cy.get('#email').type(email)
cy.get('#submit').click()
})

B. Cypress.Commands.add('fillForm', (data) => {
cy.get('#name').type(data.name)
cy.get('#email').type(data.email)
cy.get('#submit').click()
})

C. Cypress.Commands.add('fillForm', (name, email) => {
cy.get('#name').type(name)
cy.get('#email').type(email)
cy.get('#submit').click()
})

D. Cypress.Commands.add('fillForm', (data) => {
cy.get('#name').type(data[0])
cy.get('#email').type(data[1])
cy.get('#submit').click()
})

Solution

1. Step 1: Understand parameter passing

   Using a single object parameter data with named properties is clear and flexible.

2. Step 2: Check usage of object properties

   Accessing data.name and data.email matches the object keys.

3. Final Answer:

   Cypress.Commands.add('fillForm', (data) => { cy.get('#name').type(data.name) cy.get('#email').type(data.email) cy.get('#submit').click() }) -> Option B

4. Quick Check:

   Object parameter with named fields = Cypress.Commands.add('fillForm', (data) => { cy.get('#name').type(data.name) cy.get('#email').type(data.email) cy.get('#submit').click() }) [OK]

Hint: Pass one object with named fields for clarity [OK]

Common Mistakes:

• Using undefined variables without parameters
• Passing multiple parameters instead of one object
• Accessing object fields by index instead of name