🚀 Enhance Your Cypress Tests with Custom Commands

Learn how to streamline your Cypress test suite by adding custom commands that enhance readability and maintainability. Whether you're automating login flows or validating UI elements, these custom commands make your tests more robust.

Enhance Your Cypress Tests with Custom Commands

Cypress is a robust framework for end-to-end testing of web applications, known for its simplicity and powerful capabilities. By adding custom commands with TypeScript, you can enhance your testing suite's readability and maintainability. This guide will walk you through the steps required to integrate custom commands into your Cypress setup.

Prerequisites

Before proceeding, ensure you have set up Cypress in your project. Here’s a typical folder structure:

cypress
├── downloads
├── e2e
├── fixtures
└── support
    ├── commands.ts
    └── index.d.ts

Step-by-Step Guide

Step 1: Install TypeScript

If you haven't already installed TypeScript, do so by running the following command:

npm install typescript --save-dev

Step 2: Configure TypeScript

Create a tsconfig.json file at the root of your Cypress folder with the following configuration:

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es5", "dom"],
        "types": ["cypress", "node"]
    },
    "include": ["**/*.ts"]
}

This configuration ensures TypeScript compiles your code to ES5, includes necessary typings for Cypress and Node.js, and processes all .ts files.

Step 3: Define Custom Commands

Navigate to /cypress/support/commands.ts and define your custom commands. For example, let's create a command for user login:

// /cypress/support/commands.ts

Cypress.Commands.add('loginByUi', (email: string, password: string) => {
    // Visit login page
    cy.visit('http://localhost:3000/');

    // Enter email and password
    cy.get('input[id="email"]').type(email);
    cy.get('input[id="password"]').type(password);

    // Click submit button
    cy.get('button[type="submit"]').click();
});

Step 4: Declare Custom Command Types

Create a declaration file index.d.ts inside /cypress/support to provide TypeScript with type definitions for your custom commands:

// /cypress/support/index.d.ts

declare namespace Cypress {
    interface Chainable {
        /**
         * Custom command to login via UI.
         * @example cy.loginByUi('email', 'password')
         */
        loginByUi(email: string, password: string): void;
    }
}

Step 5: Implement and Use Custom Commands

Once defined, you can use your custom command in Cypress test files (e.g., app.cy.ts):

// /cypress/integration/app.cy.ts

describe('App component', () => {
    it('Should navigate to app component', () => {
        // Perform login using custom command
        cy.loginByUi(email, password);

        // Assert post-login elements
        cy.get('img').should('be.visible'); // Check for image logo
        cy.contains('p', 'Edit').should('be.visible'); // Check for 'Edit' text
        cy.contains('a', 'Learn React').should('be.visible'); // Check for 'Learn React' link
    });
});

Conclusion

By following these steps, you can efficiently extend Cypress with custom commands using TypeScript, making your tests more concise and maintainable. This approach enhances the clarity of your test scripts and promotes reusability across your testing scenarios. Start integrating custom commands today to optimize your Cypress testing workflow and ensure robust application testing. Happy testing! 🚀