[Cypress] Create Aliases for DOM Elements in Cypress Tests

We’ll often need to access the same DOM elements multiple times in one test. Your first instinct might be to use cy.getand assign the result to a variable for reuse. This might appear to work fine at first, but can lead to trouble. Everything in Cypress is done asynchronously and you’re interacting with an application’s DOM, which is changing as your tests interact with it. In this lesson, we’ll see how we can reference DOM elements in multiple places with the alias feature in Cypress.

    it('should Delete an item', function () {
        cy.server();
        cy.route({
            method: 'DELETE',
            url: '/api/todos/*',
            response: {}
        }).as('delete');
 
        cy.seedAndVisit();
 
        cy.get('.todo-list li')
            .first()
            .find('.destroy')
            .invoke('show') // Make the hidden button appear
            .click();
 
        cy.wait('@delete');
 
        cy.get('.todo-list li')
            .should('have.length', 3);
    });

The code above, we have use 'cy.get('.todo-list li')' in two places.

We can use alias for DOM element as well to reduce duplication:

    it('Using alias for the DOM element', function () {
        cy.server();
        cy.route({
            method: 'DELETE',
            url: '/api/todos/*',
            response: {}
        }).as('delete');
 
        cy.seedAndVisit();
 
        cy.get('.todo-list li')
            .as('list'); // alias the DOM element
 
        cy.get('@list')
            .first()
            .find('.destroy')
            .invoke('show')
            .click();
 
        cy.wait('@delete');
 
        cy.get('@list')
            .should('have.length', 3);
    });