Cypress.Commands.add() - Test Execution Trace

Test Overview

This test adds a custom Cypress command to fill and submit a login form. It verifies that after submission, the user is redirected to the dashboard page.

Test Code - Cypress

Cypress

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

describe('Custom Command: login', () => {
  it('should login and redirect to dashboard', () => {
    cy.visit('/login');
    cy.login('testuser', 'testpass');
    cy.url().should('include', '/dashboard');
  });
});

Execution Trace - 7 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner is ready	-	PASS
2	Browser opens and navigates to '/login'	Login page is displayed with username, password fields and login button	-	PASS
3	Custom command 'login' is called with username 'testuser' and password 'testpass'	Username and password fields are empty	-	PASS
4	Find element '#username' and type 'testuser'	Username field contains 'testuser'	Verify username field value is 'testuser'	PASS
5	Find element '#password' and type 'testpass'	Password field contains 'testpass'	Verify password field value is 'testpass'	PASS
6	Find element '#login-button' and click	Login form submitted	-	PASS
7	Check that URL includes '/dashboard'	Browser navigated to dashboard page	URL contains '/dashboard'	PASS

Failure Scenario

Failing Condition: Login button element '#login-button' is missing or not clickable

Execution Trace Quiz - 3 Questions

What does the custom command 'login' do in this test?

A Only types the username

B Types username and password, then clicks login button

C Only clicks the login button

D Navigates to the dashboard page directly

Key Result

Using Cypress.Commands.add() helps reuse common actions like login, making tests cleaner and easier to maintain.