Writing First Test with cypress

Reading Time: 2 minutes

Hello everyone, In some of our previous posts we have discussed what is cypress? How to setup cypress? How cypress is different from selenium? Today we will discuss how to write the test cases with cypress to automated an e-commerce use case.

Writing your first test with cypress

In our first test we will implement the following use case:

• Visit an e-commerce site https://www.amazon.in/
• Search for any item.
• Add a particular item to the cart.
• Visit the shopping cart. 
• Verify that the correct item is added or not.

before writing test cases let’s understand the structure we are following to write the test cases:

Majorly there are 3 building blocks:

1. Describe: This keyword is used to denote your test suite.
2. It: It keyword used for writing you test cases.
3. Expect: This keyword is used for applying assertions related to your test cases.

we can use the following code snippet to full fill our use case.

/// <reference types="Cypress" />

describe('MyFirstTestSuite', () => {


    it('TC-1| verify that we are able to add an item into our cart', () => {
        cy.visit('https://www.amazon.in/') //url of our e-commerce site.
        cy.get('#twotabsearchtextbox').type("milton thermosteel 1000ml hot and cold")  // search any particular item.
        cy.get('.nav-search-submit > .nav-input').click() //click on search button.
        cy.get('[data-asin="B00JDACH3Q"] > .sg-col-inner > .celwidget > .s-expand-height > .a-spacing-medium > .rush-component > .a-link-normal > .a-section > .s-image').click() //select a particular item to add in our cart
        cy.visit('https://www.amazon.in/Milton-Thermosteel-Flask-Litre-EC-TMS-FIS-0043_Silver/dp/B00JDACH3Q/ref=sr_1_4?crid=2KYVK3Y2BNCSS&dchild=1&keywords=milton+thermosteel+1000ml+hot+and+cold&qid=1590943453&sprefix=milton+%2Caps%2C383&sr=8-4')  //As this will open in new tab so to handle this scenario we need to visit that new tab.
        cy.get('#add-to-cart-button').click() // clicking on add to cart button to add this particular item in our cart.
        cy.get('#nav-cart').click() // go to cart by clicking on cart icon
        cy.get('.a-link-normal > .a-size-medium')
            .should('be.visible')
            .and('contain', 'Milton')  //include the title we added in our cart.
    })
})

In the above code snippet, firstly we are visiting the site amazon.in and then we are searching a product then we are clicking on the desired product for further details and after that, we are adding that item into our cart.

In the end, we are clicking on the cart button and then we are verifying that the correct product is added into our cart.

you will see that all the assertions got a pass at the end of our test case execution.

Thanks for reading!

Reference:
https://www.cypress.io/
https://blog.knoldus.com/progressive-web-app-testing-with-cypress-io/
https://blog.knoldus.com/mocha-a-rich-javascript-framework/