Skip to main content

Cypress Aliases DOM elements

Cypress aliases are an essential feature and have their own uses. To use aliases, we need to invoke/chain the target with .as() which you are gonna share. Imagine a web element with repeated usage. We cant use the selector on every place of the code.
Instead, we use the alias to name that web element line to a custom name which you are gonna use in the code repeatedly.

Then after naming, the alias object can be accessed with a hook(@).

Syntax:

.as('any name')

Let's dive into action on how these work.

Aliasing Elements:

I'm gonna use this in a simple login automation page.

describe('Automating The Signin Of Zero Site',()=> {
    it('visit the site ',()=>{
        cy.visit('http://zero.webappsecurity.com/login.html')
        cy.log('Before Reload')
        cy.reload()
        cy.log('After Reload')
    })
    it('Enter signin details',()=>{
        cy.get('#user_login').as("username")
        cy.get('@username').clear()
        cy.get('@username').type('ManThing')

    })
    it('Enter Password',()=>{
        cy.get('#user_password').as('password')
        cy.get('@password').clear()
        cy.get('@password').type('Shazam')
    })
    it('Tick checkbox',()=>{
        cy.get('input[type="checkbox"]').click()
    })
    it('click submit button',()=>{
        cy.contains('Sign in').click()
    })
    it('error verify',()=>{
        cy.get('.alert-error').should('be.visible').and('contain','Login and/or password are wrong.')
    })
})
  • Notice i have used an alias in both the place for username and password selectors.
  • As I need to use them repeatedly, i have implemented this, and the code looks more straightforward and understandable.

Let's see another example.

describe('Automate AutoPract',()=>{
    it('Should load the url ',()=>{
        cy.visit('http://www.autopract.com/#/home/fashion')
        //cy.url().contains('include','home')
        cy.get('.close').click()
        cy.get('.bar-style').click()
        cy.get('#sub-menu').should('be.visible')
        cy.get("ul[id='sub-menu'] li[class='ng-star-inserted']").find('a').contains(' clothing ').as('CLOTHING')
        cy.get('@CLOTHING').should('be.visible')
        
    })``

})
  • Here I have chained the get, find, and contains and named an alias to them.
  • So similarly, we can use the alias to name repeating future sharable web elements.

Tags
Submitted by arilio666 on October 8, 2021

Ashwin is working with iVagus as a Technical Lead. He has experience in various technologies like Cypress, JavaScript, TypeScript, Rest Assured, Selenium, Cucumber, and Java.

About

At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.