Shopping Cart test example

February 21, 2020

Locators in Cypress
Locators DEMO
CSS Selectors
Try CSS Selector

selector

.class
#id
[attribute=value]
.class[attribute=value]

cy.get(selector)

Shopping Cart Test Scenario/Flow

1: Launch Browser & Open Url : https://demo.nopcommerce.com/
2: Enter Text in Search box : “HP Spectre XT Pro UltraBook"
3: Click on Search button
4: Click on ADD TO CART
5: Click on Shopping Cart Link at the top of the page : Locator : cy.get("#topcartlink > a > span.cart-label")
6: Verify the unit price $1,350.00 : Assertion : should('contain', '$1,350.00')
7: Enter Quantity 2
8: Update shopping cart
9: Verify Total $2,700.00 : Locator : cy.get(".value-summary > strong") : Assertion : .should(($total)=>{ expect($total).to.contain('$2,700.00') })

Cypress Test Script

cypress/integration/shopping-cart-test.js

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

describe('Shopping Cart Test Quantity Update', function(){
    it('Verify the total amount after the quantity updated', function(){
        //1: Launch Browser & Open Url
        cy.visit("https://demo.nopcommerce.com/")

        //2: Enter Text in Search box
        cy.get("#small-searchterms").type("HP Spectre XT Pro UltraBook")

        //3: Click on Search button
        cy.get(".search-box-button[type=submit]").click()

        //4: Click on ADD TO CART
        cy.get(".product-box-add-to-cart-button[value='Add to cart']").click()

        //5: Click on Shopping Cart Link at the top of the page
        cy.get("#topcartlink > a > span.cart-label").click()

        //6: Verify the unit price $1,350.00
        //cy.get(".product-unit-price").contains("$1,350.00")
        cy.get(".product-unit-price").should('contain', '$1,350.00')

        //7: Enter Quantity 2
        cy.get(".qty-input").clear().type('2')

        //8: Update shopping cart
        cy.get(".update-cart-button[name=updatecart]").click()

        //9: Verify Total  $2,700.00
        //cy.get(".value-summary > strong").contains('$2,700.00')
        cy.get(".value-summary > strong")
          .should(($total)=>{
              expect($total).to.contain('$2,700.00')
          })
    })
})

Cypress Run Command

npx cypress run --browser chrome --spec "cypress/integration/shopping-cart-test.js"