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