Skip to main content

​
Overview

Checkout (also referred to as the Cart Page) handles all interactions with the shopping cart, including verifying products, managing cart contents, and validating cart badge counts. Location: cypress/support/pages/Checkout.ts Extends: BasePage

​
Class Definition

import BasePage from "./BasePage";

export default class Checkout extends BasePage {
    private cartList: string
    private cartBadge: string
    private cartItem: string

    constructor() {
        super()
        this.cartList = '[data-test="cart-list"]'
        this.cartBadge = '.shopping_cart_badge'
    }
}

​
Constructor

Initializes the Checkout page with required selectors. 
const checkout = new Checkout()

​
Properties

PropertyTypeSelectorDescription
cartListstring[data-test="cart-list"]Shopping cart list container
cartBadgestring.shopping_cart_badgeCart badge showing item count
inventoryItemstring[data-test="inventory-item"]Individual cart items (inherited from BasePage)

​
Methods

​
verifyCartPageIsVisible

Verifies that the cart page is displayed and the cart list is visible. 
public verifyCartPageIsVisible(): void
Usage Example: 
navbar.clickOnCheckoutIcon()
checkout.verifyCartPageIsVisible()
Real Test Example: 
it('Should add successfully one product into the cart', () => {
    homePage.addProductToCart(0)
    navbar.clickOnCheckoutIcon()
    checkout.verifyCartPageIsVisible()
    checkout.verifyProductWasAddedToCart()
})

​
verifyProductWasAddedToCart

Verifies that exactly one product exists in the cart. 
public verifyProductWasAddedToCart(): void
Implementation:
  • Checks that the inventory items have a length of 1
Usage Example: 
homePage.addProductToCart(0)
navbar.clickOnCheckoutIcon()
checkout.verifyProductWasAddedToCart()
Real Test Example: 
it('Should add successfully one product into the cart', () => {
    homePage.addProductToCart(0)
    navbar.clickOnCheckoutIcon()
    checkout.verifyCartPageIsVisible()
    checkout.verifyProductWasAddedToCart()
    checkout.verifyThatCheckoutCounterMatch()
})

​
verifyAllProductsWereAddedToCart

Verifies that all 6 products are present in the cart. 
public verifyAllProductsWereAddedToCart(): void
Implementation:
  • Checks that the inventory items have a length of 6
Usage Example: 
homePage.addAllProductsToCart()
navbar.clickOnCheckoutIcon()
checkout.verifyAllProductsWereAddedToCart()
Real Test Example: 
it('Should add all the products successfully into the cart', () => {
    homePage.addAllProductsToCart()
    navbar.clickOnCheckoutIcon()
    checkout.verifyCartPageIsVisible()
    checkout.verifyAllProductsWereAddedToCart()
    checkout.verifyThatCheckoutCounterMatch()
})

​
verifyThatCheckoutCounterMatch

Verifies that the cart badge count matches the actual number of items in the cart. 
public verifyThatCheckoutCounterMatch(): void
Implementation:
  • Gets the length of inventory items in the cart
  • Extracts the text from the cart badge
  • Compares the badge number with the actual item count
Usage Example: 
homePage.addProductToCart(0)
navbar.clickOnCheckoutIcon()
checkout.verifyThatCheckoutCounterMatch()
Real Test Example: 
it('Should add successfully one product into the cart', () => {
    homePage.addProductToCart(0)
    navbar.clickOnCheckoutIcon()
    checkout.verifyCartPageIsVisible()
    checkout.verifyProductWasAddedToCart()
    checkout.verifyThatCheckoutCounterMatch()
})

​
DeleteAllProductsFromCart

Removes all products from the shopping cart. 
public DeleteAllProductsFromCart(): void
Implementation:
  • Iterates through all inventory items in the cart
  • Clicks the “Remove” button for each product
Usage Example: 
homePage.addAllProductsToCart()
navbar.clickOnCheckoutIcon()
checkout.DeleteAllProductsFromCart()
checkout.verifyAnyProductExists()
Real Test Example: 
it('Should delete all products from the cart', () => {
    homePage.addAllProductsToCart()
    navbar.clickOnCheckoutIcon()
    checkout.verifyCartPageIsVisible()
    checkout.DeleteAllProductsFromCart()
    checkout.verifyAnyProductExists()
})

​
verifyAnyProductExists

Verifies that no products exist in the cart. 
public verifyAnyProductExists(): void
Implementation:
  • Checks that inventory items do not exist in the DOM
Usage Example: 
checkout.DeleteAllProductsFromCart()
checkout.verifyAnyProductExists()
Real Test Example: 
it('Should delete all products from the cart', () => {
    homePage.addAllProductsToCart()
    navbar.clickOnCheckoutIcon()
    checkout.verifyCartPageIsVisible()
    checkout.DeleteAllProductsFromCart()
    checkout.verifyAnyProductExists()
})

​
Complete Test Flow Examples

​
Single Product Workflow

import LoginPage from "../../support/pages/LoginPage"
import HomePage from "../../support/pages/HomePage"
import Checkout from "../../support/pages/Checkout"
import Navbar from "../../support/components/Navbar"

let loginPage: LoginPage
let homePage: HomePage
let navbar: Navbar
let checkout: Checkout

describe('Checkout Tests', () => {
    beforeEach(() => {
        cy.fixture('users').as('userData')
        loginPage = new LoginPage()
        homePage = new HomePage()
        navbar = new Navbar()
        checkout = new Checkout()
        cy.visit('/')

        cy.get('@userData').then((user: any) => {
            loginPage.userLogin(user.standard, user.password)
        })

        homePage.verifyHomePageIsVisible()
    })

    it('Should add successfully one product into the cart', () => {
        homePage.addProductToCart(0)
        navbar.clickOnCheckoutIcon()
        checkout.verifyCartPageIsVisible()
        checkout.verifyProductWasAddedToCart()
        checkout.verifyThatCheckoutCounterMatch()
    })
})

​
Multiple Products Workflow

it('Should add all the products successfully into the cart', () => {
    homePage.addAllProductsToCart()
    navbar.clickOnCheckoutIcon()
    checkout.verifyCartPageIsVisible()
    checkout.verifyAllProductsWereAddedToCart()
    checkout.verifyThatCheckoutCounterMatch()
})

​
Cart Deletion Workflow

it('Should delete all products from the cart', () => {
    homePage.addAllProductsToCart()
    navbar.clickOnCheckoutIcon()
    checkout.verifyCartPageIsVisible()
    checkout.DeleteAllProductsFromCart()
    checkout.verifyAnyProductExists()
})

​
Common Test Patterns

​
Add and Verify Pattern

// Add product(s)
homePage.addProductToCart(0)

// Navigate to cart
navbar.clickOnCheckoutIcon()

// Verify cart state
checkout.verifyCartPageIsVisible()
checkout.verifyProductWasAddedToCart()
checkout.verifyThatCheckoutCounterMatch()

​
Add, Delete, and Verify Pattern

// Add all products
homePage.addAllProductsToCart()

// Navigate to cart
navbar.clickOnCheckoutIcon()

// Delete and verify empty
checkout.DeleteAllProductsFromCart()
checkout.verifyAnyProductExists()

BasePage

Parent class providing common functionality

HomePage

Add products from home page

Navbar

Navigate to cart via navbar

Build docs developers (and LLMs) love

Get started for freeTalk to us