Cypress.Commands.add() - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a custom Cypress command named 'login'.

Cypress

Cypress.Commands.add('[1]', (email, password) => {
  cy.get('#email').type(email);
  cy.get('#password').type(password);
  cy.get('button[type=submit]').click();
});

Drag options to blanks, or click blank then click option'

Aclick

Bvisit

Ctype

Dlogin

Attempts:

3 left

💡 Hint

Common Mistakes

Using an existing Cypress command name like 'click' or 'type' instead of a new custom name.

Forgetting to put the command name in quotes.

The Cypress.Commands.add() method registers a new custom command. Here, the command name should be 'login' to match the intended use.

2fill in blank

medium

Complete the code to call the custom command 'login' with email and password.

Cypress

cy.[1]('[e-mail]', 'mypassword');

Drag options to blanks, or click blank then click option'

Avisit

Blogin

Ctype

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using built-in commands like 'visit' or 'click' instead of the custom command name.

Forgetting to call the command on cy.

To use the custom command defined with Cypress.Commands.add('login', ...), you call it as cy.login().

3fill in blank

hard

Fix the error in the custom command definition by completing the missing part.

Cypress

Cypress.Commands.add('login', (email, password) => {
  cy.get('#email').[1](email);
  cy.get('#password').type(password);
  cy.get('button[type=submit]').click();
});

Drag options to blanks, or click blank then click option'

Atype

Bclick

Cvisit

Dshould

Attempts:

3 left

💡 Hint

Common Mistakes

Using click instead of type on input fields.

Using visit which is for navigation, not typing.

The type method is used to enter text into input fields. Using click or others here would cause errors.

4fill in blank

hard

Fill both blanks to create a custom command 'fillForm' that types name and email.

Cypress

Cypress.Commands.add('[1]', (name, email) => {
  cy.get('#name').[2](name);
  cy.get('#email').type(email);
});

Drag options to blanks, or click blank then click option'

AfillForm

Bclick

Ctype

Dvisit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'type' to enter text.

Using an unrelated command name.

The command name should be 'fillForm' to describe its purpose. The method to enter text is type.

5fill in blank

hard

Fill all three blanks to add a custom command 'submitForm' that fills username, password, and clicks submit.

Cypress

Cypress.Commands.add('[1]', (username, password) => {
  cy.get('#username').[2](username);
  cy.get('#password').[3](password);
  cy.get('button[type=submit]').click();
});

Drag options to blanks, or click blank then click option'

AsubmitForm

Btype

DfillForm

Attempts:

3 left

💡 Hint

Common Mistakes

Using different methods like 'click' instead of 'type' for inputs.

Using a wrong command name.

The command name is 'submitForm'. Both username and password inputs require the type method to enter text.

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