TypeScript support for custom commands in Cypress - Test Execution Trace

Test Overview

This test adds a custom Cypress command with TypeScript support and verifies it works correctly by checking the page title.

Test Code - Cypress

Cypress

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    login(username: string, password: string): Chainable<void>
  }
}

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

describe('Custom Command with TypeScript', () => {
  it('should login using custom command and verify title', () => {
    cy.visit('https://example.com/login')
    cy.login('user1', 'pass123')
    cy.title().should('include', 'Dashboard')
  })
})

Execution Trace - 6 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner initialized with TypeScript support	-	PASS
2	Browser opens and navigates to https://example.com/login	Login page is loaded with username, password fields and login button	-	PASS
3	Finds element #username and types 'user1'	Username input field contains 'user1'	-	PASS
4	Finds element #password and types 'pass123'	Password input field contains 'pass123'	-	PASS
5	Finds element #login-btn and clicks it	Login form submitted, page navigates to dashboard	-	PASS
6	Checks page title includes 'Dashboard'	Page title is 'User Dashboard - Example'	Title includes 'Dashboard'	PASS

Failure Scenario

Failing Condition: Custom command 'login' fails to find input fields or login button

Execution Trace Quiz - 3 Questions

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

A Only types username

B Types username and password then clicks login button

C Clicks login button without typing

D Navigates to the dashboard page

Key Result

Defining custom commands with TypeScript interfaces improves code completion and type safety, making tests easier to write and maintain.