Why custom commands reduce duplication in Cypress - Quick Recap

Recall & Review

beginner

What is a custom command in Cypress?

A custom command is a reusable function you create to perform common actions in tests, like logging in or filling forms, so you don't repeat the same code.

beginner

How do custom commands help reduce code duplication?

They let you write a piece of code once and use it many times, so you avoid copying and pasting the same steps in multiple tests.

beginner

Give an example of a situation where a custom command is useful.

When you need to log in to your app in many tests, a custom command can handle the login steps so you just call it instead of writing the steps each time.

intermediate

What is one benefit of reducing duplication with custom commands?

Tests become easier to maintain because if the login process changes, you only update the custom command once instead of every test.

beginner

Where do you define custom commands in Cypress?

You define them in the 'cypress/support/commands.js' file so they are available in all your test files.

Why should you use custom commands in Cypress tests?

A To write more code manually

B To make tests run slower

C To confuse other testers

D To avoid repeating the same code in multiple tests

Custom commands help avoid code repetition, making tests cleaner and easier to maintain.

Where do you usually add custom commands in a Cypress project?

A cypress/integration/tests.js

B cypress/support/commands.js

C package.json

D node_modules folder

The 'cypress/support/commands.js' file is the standard place to define custom commands.

What happens if you change a custom command used in many tests?

A Tests will fail immediately

B You must update each test manually

C All tests using it automatically use the updated command

D Nothing changes in the tests

Changing a custom command updates its behavior everywhere it is used, saving time and effort.

Which of these is NOT a benefit of using custom commands?

A Increasing test maintenance effort

B Reducing code duplication

C Improving test readability

D Making tests easier to update

Custom commands reduce maintenance effort, not increase it.

Custom commands in Cypress are best described as:

A Reusable test functions

B Test data files

C Browser plugins

D Test reports

Custom commands are reusable functions that simplify writing tests.

Explain how custom commands help reduce duplication in Cypress tests.

Think about how repeating login steps in many tests can be replaced by one command.

Describe where and why you would define a custom command in a Cypress project.

Consider the file that loads before tests run.

Practice

1. Why do custom commands in Cypress help reduce duplication in test code?

easy

A. They replace the need for assertions in tests.

B. They automatically find bugs in your code.

C. They let you write common actions once and reuse them in many tests.

D. They make tests run faster by skipping steps.

Solution

1. Step 1: Understand what duplication means in tests

   Duplication means writing the same code multiple times, which makes tests harder to maintain.

2. Step 2: Role of custom commands in Cypress

   Custom commands let you write a common action once, like logging in, and reuse it everywhere, reducing repeated code.

3. Final Answer:

   They let you write common actions once and reuse them in many tests. -> Option C

4. Quick Check:

   Reuse common actions = less duplication [OK]

Hint: Custom commands = write once, use many times [OK]

Common Mistakes:

• Thinking custom commands speed up test execution
• Believing custom commands remove the need for assertions
• Assuming custom commands automatically fix bugs

2. Which of the following is the correct way to define a custom command in Cypress?

easy

A. cy.addCommand('login', () => { cy.visit('/login') })

B. cy.Commands.create('login', () => { cy.visit('/login') })

C. Cypress.createCommand('login', () => { cy.visit('/login') })

D. Cypress.Commands.add('login', () => { cy.visit('/login') })

Solution

1. Step 1: Recall Cypress syntax for custom commands

   The correct method to add a custom command is Cypress.Commands.add.

2. Step 2: Check each option's syntax

   Only Cypress.Commands.add('login', () => { cy.visit('/login') }) uses Cypress.Commands.add correctly with the command name and function.

3. Final Answer:

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

4. Quick Check:

   Correct method is Cypress.Commands.add [OK]

Hint: Custom commands use Cypress.Commands.add() [OK]

Common Mistakes:

• Using cy.Commands instead of Cypress.Commands
• Using createCommand or addCommand which don't exist
• Mixing up method names and object names

3. Given this custom command definition:

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

What will happen when you run this test code?

 cy.login({name: 'alice', pass: '1234'}); cy.url().should('include', '/dashboard'); 

medium

A. The test types username and password, clicks submit, then checks URL includes '/dashboard'.

B. The test will fail because custom commands cannot take arguments.

C. The test will skip typing password and only type username.

D. The test will throw a syntax error due to missing return statement.

Solution

1. Step 1: Understand the custom command behavior

   The 'login' command types the username and password from the passed object and clicks submit.

2. Step 2: Analyze the test code execution

   Calling cy.login with user data runs the command, then the test asserts the URL includes '/dashboard'.

3. Final Answer:

   The test types username and password, clicks submit, then checks URL includes '/dashboard'. -> Option A

4. Quick Check:

   Custom command with args runs actions then assertion passes [OK]

Hint: Custom commands can take arguments and run steps [OK]

Common Mistakes:

• Thinking custom commands can't accept parameters
• Assuming missing return causes syntax error
• Believing some steps are skipped automatically

4. You wrote this custom command:

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

But your tests fail with "Cannot read property 'click' of undefined". What is the likely problem?

medium

A. You forgot to call cy.visit() before using the command.

B. The selector 'button.submit' does not match any element on the page.

C. Custom commands cannot use cy.get inside them.

D. The command name 'clickButton' is reserved and cannot be used.

Solution

1. Step 1: Understand the error message

   "Cannot read property 'click' of undefined" means cy.get did not find the element, so it returned undefined.

2. Step 2: Check possible causes

   If the selector does not match any element, cy.get returns nothing, causing the error when calling click.

3. Final Answer:

   The selector 'button.submit' does not match any element on the page. -> Option B

4. Quick Check:

   Selector missing element = click fails [OK]

Hint: Check if selector matches elements before clicking [OK]

Common Mistakes:

• Assuming cy.get can't be used in custom commands
• Forgetting to visit the page (may cause no elements)
• Thinking command names are reserved keywords

5. You want to create a custom command fillForm that fills multiple fields on a page. Which approach best reduces duplication and improves test readability?

hard

A. Create fillForm to accept an object with field names and values, then fill each field inside the command.

B. Write separate commands for each field and call them one by one in tests.

C. Copy and paste the same cy.get().type() lines in every test needing the form filled.

D. Use cy.exec() to run external scripts that fill the form.

Solution

1. Step 1: Consider duplication and readability

   Copy-pasting code (Copy and paste the same cy.get().type() lines in every test needing the form filled.) causes duplication and harder maintenance.

2. Step 2: Evaluate options for custom commands

   Creating one command that accepts an object and fills all fields (Create fillForm to accept an object with field names and values, then fill each field inside the command.) centralizes logic and improves readability.

3. Step 3: Analyze other options

   Separate commands (Write separate commands for each field and call them one by one in tests.) increase calls and complexity; cy.exec (Use cy.exec() to run external scripts that fill the form.) is not for UI actions.

4. Final Answer:

   Create fillForm to accept an object with field names and values, then fill each field inside the command. -> Option A

5. Quick Check:

   One command with params reduces duplication best [OK]

Hint: Use one paramized command for multiple fields [OK]

Common Mistakes:

• Writing many small commands instead of one flexible one
• Copy-pasting code in tests instead of reusing commands
• Using cy.exec for UI interactions