Cypress then command

Profile picture for user arilio666

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.


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 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.


describe('Automate AutoPract',()=>{
    before(() => {
        cy.get("button[aria-label='Close'] ").as('Popup')
    it('Should click POPUP',function(){

    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();
            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.