Aliases in Cypress

Cypress is a front-end testing tool. It allows us developers and QA Engineers who build web applications using the modern JavaScript framework to set up tests, write tests, run tests, and debug tests. It is popular as it lets us write faster, easier, and more reliable tests. Cypress can test anything that runs in a browser.

Let's learn more about the most basic component - aliases in Cypress.

What are Aliases in Cypress?

An alias is a name or label that is assigned to an element, a file, a user, or a command in a computer system which serves as an alternative way or a shortcut to refer to a more complicated command or name.

Aliases are simply the synonyms of commands for convenience. They are set with the .as() alias command.

An alias can be defined using the .as() command. It is referenced with the @ character and the name of the alias. For aliases of Primitive, regular objects, or even DOM elements, you can use cy.get().

Use of Cypress Aliases

An alias is an essential component that has many uses.

The various uses of Cypress Aliases are:

Let's discuss all the above uses individually and view its implementation as well.

1. Sharing Context

The simplest way to use aliases is to share contests. To alias something we use the .as(). We use the Mocha context objects to alias objects and primitives. The this.* is used to access the alias object. By default, mocha shares context for all the hooks that are applicable for the test and the alias properties are flushed post-execution of a test.

Code:

describe('element', () => {
   beforeEach(() => {
      cy.wrap('ele1').as('x')
   })
   context('subelement', () => {
      beforeEach(() => {
         cy.wrap('ele2').as('y')
      })
         it('aliases properties', function () {
            expect(this.x).to.eq(' ele1 ')
            expect(this.y).to.eq(' ele2 ')
         })
      })
   })

By sharing context we can handle fixtures. Instead of using this. We can use @ character to access an alias. We use cy.get() command (an asynchronous command) to access an alias using @, this is a synchronous command.

Code

beforeEach(() => {
   //alias fixtures 
   cy.fixture('users.json').as('u')
})
it('scenario', function () {
   //'@' to handle aliases
   cy.get('@u').then((u) => {
   //access element argument
      const i = u[0]
   //verification
      cy.get('header').should('contain', u.name)
   })
})

2. Elements

We can use aliases with DOM elements and then reuse them later. (DOM stands for Document Object Model.)

By default, Cypress makes reference to td collection obtained as the alias cols. We need to used the cy.get() command to use the same cols. Since we use @ in cy.get() in the code below, Cypress will search for the present alias cols and gets its reference.

Code

//alias td in tr
cy.get('tr').find('td').as('cols')
cy.get('@cols').first().click()

3. Routes

We can use aliases with routes. This makes sure that the application has made request. Then it awaits a response from server and accesses the request for verification.

Code:

cy.intercept('POST', '/fruits', { SrNo: 12 }).as('s')
cy.get('#btn').click()
cy.wait('@s').then(({ request }) =>{
//assertion
   expect(request.body).to.have.property('Color', 'Fruit')
})
cy.contains('Fruit added')

4. Requests

We can use aliases with requests too. Here, we alias a request and use its properties later.

Code

cy.request('https://jsonplaceholder.cypress.io/comments').as('com')
// other implementations (...if any)
cy.get('@com').should((response) => {
   if (response.status === 404) {
      // assertion
         expect(response).to.have.property('duration')
      } else {
         // code to do something otherwise
      }
   })

Conclusion

Aliases help reduce the complexity of code and helps us simplify it to make it more efficient and accessible. It helps to essentially streamline the access to frequently used item. Learning its uses and using it in the right way increases program readability.