[Cypress] Create a Single Custom Cypress Command from Multiple Commands-优快云博客

本文介绍如何使用Cypress的自定义命令功能来简化重复的测试步骤，通过创建一个可复用的命令来减少代码冗余，并展示了如何在多个测试场景中应用该命令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cypress provides a straightforward API that allows you to define custom commands. In this lesson, we’ll take a series of Cypress commands and wrap them up in a single custom command so we can easily repeat these steps in multiple specs.

We have this partten in the code:

    it('should have four initial todos and waiting loaded', function () {
        cy.server(); // open server
        cy.route('GET', '/api/todos', 'fixture:todos') // tell the endpoint, give fixture as data
            .as('loadingTodos'); // mark it as loading
        cy.visit('/'); // visit the page
        cy.wait('@loadingTodos'); // wait until the loading is finished

        cy.get('.todo-list > li')
            .should('have.length', 4);
    });

Those code which has comments actually can be reused in many places.

Cypress enalbes us to create custom commands to use, so that we can reuse part of code everytime.

Open cypress/support/commands.js, add following code:

Cypress.Commands.add('seedAndVisit', (seedData = 'fixture:todos') => { // using 'fixture:todos' if seedData is undefined
  cy.server()
  cy.route('GET', '/api/todos', seedData).as('load')

  cy.visit('/')

  cy.wait('@load')
});

To use the commands:

    it('should use Cypress commands to simplify the code: using default value', function () {
        cy.seedAndVisit();
        cy.get('.todo-list > li')
            .should('have.length', 4);
    });

    it('should use Cypress commands to simplify the code: using defined value', function () {
        cy.seedAndVisit([]);
        cy.get('.todo-list > li')
            .should('have.length', 0);
    });