Tutorial 21 – Alias in cypress
What you will Learn :
Use of Alias in cypress
Alias syntax
Practical Examples
Use of Alias in cypress
Cypress has some limitations in using traditional way of using variables.
Let us go to
https://docs.cypress.io/guides/core-concepts/variables-and-aliases.html#Return-Values
Notice the comment below that says “this won’t work that way you think it does”. So basically, below represents the traditional way of using variables. We have a variable ‘button’ that is supposed to store the return value of cy.get(‘button’). Afterwards, button.click() is supposed to click the button. This does not work in cypress unlike selenium.
Notice below, it says you cannot work with the return values of any cypress command
So, in the above case, we cannot store the return value of cy.get command in a variable and hence we cannot click a button. So, the question arises, how do we handle this situation? To resolve this, we use Alias.
Alias syntax
Go to https://docs.cypress.io/api/commands/as.html#Syntax
Notice the syntax below .as(aliasName)
Also notice above the correct and incorrect usages. Let us see some practical examples now to understand this.
Practical Examples
Go to https://www.way2automation.com/angularjs-protractor/banking/#/manager/addCust
Inspect ‘First Name’ text field. This element has xPath:
//input[@placeholder='First Name']
So, in the below script, the first ‘it’ block launches the website and waits for 3 seconds. In the second ‘it’ block, we are locating the ‘First Name’ text field element (line#10)
Next, let us assign the whole locator to a variable/alias ‘userName’ (line#10). So ‘userName’ variable or alias is now holding the return value of cy.xpath("//input[@placeholder='First Name']").as('userName') command.
Next, to access the alias, we prefix @ before the alias name @userName, see line#11
Next, we will use the ‘type()’ method to type in something inside the text field
Our script looks as below
Save the script
Launch test runner
Run alias.spec.js
Notice below that cust1 gets typed in the ‘First Name’ field.
Similarly, using alias, let us add another ‘it’ block to type dummy text in ‘Last Name’ field
Save script, notice below that custLastName is typed in the ‘Last Name’ field
Similarly, add another ‘it’ block for post code
Save script, see below, 123456 is entered
Similarly, this time we will click the ‘Add Customer’ button, inspect it
So add another ‘it’ block
Save, see below that ‘Add Customer’ button is clicked (shown by orangle rectangle on right hand side)
So this is how we use alias in cypress.
Thank you for reading!