Skip to main content

Cypress then command

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.
Tags
Submitted by arilio666 on December 7, 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.