[Cypress] Create a Single Custom Cypress Command from Multiple Commands

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);
    });