Skip to main content
Home
  • Tutorials
    • Quality Assurance
    • Software Development
    • Machine Learning
    • Data Science
  • About Us
  • Contact
programsbuzz facebook programsbuzz twitter programsbuzz linkedin
  • Log in

Main navigation

  • Tutorials
    • Quality Assurance
    • Software Development
    • Machine Learning
    • Data Science
  • About Us
  • Contact

Cypress Aliases DOM elements

Profile picture for user arilio666
Written by arilio666 on 10/08/2021 - 13:42

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.
Related Content
Cypress Tutorial
Cypress Get Command
Cypress Difference between Get and Find command
Tags
Cypress
  • Log in or register to post comments

Choose Your Technology

  1. Agile
  2. Apache Groovy
  3. Apache Hadoop
  4. Apache HBase
  5. Apache Spark
  6. Appium
  7. AutoIt
  8. AWS
  9. Behat
  10. Cucumber Java
  11. Cypress
  12. DBMS
  13. Drupal
  14. GitHub
  15. GitLab
  16. GoLang
  17. Gradle
  18. HTML
  19. ISTQB Foundation
  20. Java
  21. JavaScript
  22. JMeter
  23. JUnit
  24. Karate
  25. Kotlin
  26. LoadRunner
  27. matplotlib
  28. MongoDB
  29. MS SQL Server
  30. MySQL
  31. Nightwatch JS
  32. PactumJS
  33. PHP
  34. Playwright
  35. Playwright Java
  36. Playwright Python
  37. Postman
  38. Project Management
  39. Protractor
  40. PyDev
  41. Python
  42. Python NumPy
  43. Python Pandas
  44. Python Seaborn
  45. R Language
  46. REST Assured
  47. Ruby
  48. Selenide
© Copyright By iVagus Services Pvt. Ltd. 2023. All Rights Reserved.

Footer

  • Cookie Policy
  • Privacy Policy
  • Terms of Use