Today in this article we will be looking into a very interesting subject called the THEN command in cypress. The THEN command allows us to work with the subject yielded from the previous command.
- To put it simply it is used to play around with the yield of the previous command and work around with it in that case.
- THEN command is very useful and helpful in debugging the yield of the previous command.
- Then when you would love to compare the before and after values like extracting that certain values and verifying them.
- Also useful when working with aliases too by sharing context.
Syntax
cy.get('example').then($object => {
//THEN Operations to perform using the yielded object goes here
})- This command takes a callback function as an argument.
- $object is the object that cy.get yields.
Enough talking and let us dive into action:
- Today for demonstration purposes we will be automating using the http://autopract.com/#/home/fashion site.
- You can check this out and automate it according to your daily need of requirements.
Today we will be doing the following things:
Step 1:- We need to visit the page.
Step 2:- We are going to close the appearing popup.
Step 3:- We are going to find the element of the particular dress item called the trim dress on the main page.
Step 4:- We will log and assert whether the trim dress has the cost and name that is supposed to have.
Sounds fun right? let's dive.
Example
describe('Automate AutoPract',()=>{
before(() => {
cy.visit('http://www.autopract.com/#/home/fashion')
cy.get("button[aria-label='Close'] ").as('Popup')
})
it('Should click POPUP',function(){
this.Popup.click()
})
it('Log Price And Verify Dress Name',()=>{
cy.get("body > app-root:nth-child(1) > app-fashion-one:nth-child(3) > section:nth-child(6) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > owl-carousel-o:nth-child(1) > div:nth-child(1) > div:nth-child(1) > owl-stage:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > app-product-box-one:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > h4:nth-child(4)").as('Dress')
cy.get('@Dress').then($Price => {
const Dprice = $Price.text();
cy.log(Dprice)
expect(Dprice).to.equal(' $87.00 $145.00')
})
})
})- So from the code, we can understand that we have used the autopract site to visit the page.
- From there we are closing the popup which appears immediately after the visit.
- Then we are getting the CSS of the particular dress with which we are gonna log the price.
- We have used the 'then' command and used the object called Price to get the yield of the previous 'Get' command.
- So the yield currently in the Price object is used to extract the text and store it in a variable called Dprice.
- We will be using the Dprice to log the value it is displaying.
- Then we have given an assertion here to verify the expected value stored into the Dprice to be equal to the value we give.
- From the output, we can see that both the test steps have passed and the price of the trim dress has been logged and asserted successfully using the 'then' command.
- Log in to post comments