Why custom commands reduce duplication in Cypress - Test Execution Impact

Test Overview

This test demonstrates how using a custom Cypress command reduces code duplication by reusing a login process in multiple tests. It verifies that the user can successfully log in using the custom command.

Test Code - Cypress

Cypress

// cypress/support/commands.js
Cypress.Commands.add('login', (username, password) => {
  cy.get('#username').type(username)
  cy.get('#password').type(password)
  cy.get('#login-button').click()
})

// cypress/e2e/login_spec.cy.js
describe('Login Tests with Custom Command', () => {
  beforeEach(() => {
    cy.visit('/login')
  })

  it('logs in successfully using custom command', () => {
    cy.login('user1', 'pass123')
    cy.url().should('include', '/dashboard')
    cy.get('h1').should('contain', 'Welcome')
  })

  it('logs in another user using custom command', () => {
    cy.login('user2', 'pass456')
    cy.url().should('include', '/dashboard')
    cy.get('h1').should('contain', 'Welcome')
  })
})

Execution Trace - 9 Steps

Step	Action	System State	Assertion	Result
1	Test starts and browser opens	Browser is ready to run tests	-	PASS
2	Navigates to /login page	Login page is displayed with username, password fields and login button	URL includes '/login'	PASS
3	Calls custom command cy.login('user1', 'pass123')	Username and password fields are filled, login button is clicked	-	PASS
4	Checks URL includes '/dashboard' after login	Dashboard page is loaded	URL contains '/dashboard'	PASS
5	Checks page header contains 'Welcome'	Dashboard page shows welcome message	Header text contains 'Welcome'	PASS
6	Starts second test, navigates to /login page	Login page is displayed again	URL includes '/login'	PASS
7	Calls custom command cy.login('user2', 'pass456')	Username and password fields are filled with new user, login button clicked	-	PASS
8	Checks URL includes '/dashboard' after second login	Dashboard page is loaded for second user	URL contains '/dashboard'	PASS
9	Checks page header contains 'Welcome' for second user	Dashboard page shows welcome message	Header text contains 'Welcome'	PASS

Failure Scenario

Failing Condition: If the custom command cy.login fails to find username or password fields or login button

Execution Trace Quiz - 3 Questions

What is the main benefit of using the custom command cy.login in these tests?

A It changes the URL automatically

B It makes the test run faster by skipping login

C It reduces code duplication by reusing login steps

D It disables assertions in the test

Key Result

Using custom commands in Cypress helps keep tests clean and avoids repeating the same steps, making tests easier to maintain and read.