Skip to main content

​
Overview

HomePage handles all interactions with the product inventory page, including product filtering, sorting, and adding items to the cart. Location: cypress/support/pages/HomePage.ts Extends: BasePage

​
Class Definition

import BasePage from "./BasePage";

export default class HomePage extends BasePage {
    private inventoryContainer: string
    private prodSortContainer: string

    constructor() {
        super()
        this.inventoryContainer = '#inventory_container'
        this.prodSortContainer = '[data-test="product-sort-container"]'
    }
}

​
Constructor

Initializes the HomePage with required selectors. 
const homePage = new HomePage()

​
Properties

PropertyTypeSelectorDescription
inventoryContainerstring#inventory_containerMain inventory container element
prodSortContainerstring[data-test="product-sort-container"]Product sort dropdown
inventoryItemstring[data-test="inventory-item"]Individual product items (inherited from BasePage)

​
Methods

​
verifyHomePageIsVisible

Verifies that the home page inventory container is visible. 
public verifyHomePageIsVisible(): void
Usage Example: 
loginPage.userLogin(user.standard, user.password)
homePage.verifyHomePageIsVisible()

​
Filter Selection Methods

​
selectFilterAtoZ

Selects the “Name (A to Z)” filter option. 
public selectFilterAtoZ(): void
Usage Example: 
homePage.selectFilterAtoZ()
homePage.verifyFilterAtoZ()

​
selectFilterZtoA

Selects the “Name (Z to A)” filter option. 
public selectFilterZtoA(): void
Usage Example: 
homePage.selectFilterZtoA()
homePage.verifyFilterZtoA()

​
selectFilterPriceLowtoHigh

Selects the “Price (low to high)” filter option. 
public selectFilterPriceLowtoHigh(): void
Usage Example: 
homePage.selectFilterPriceLowtoHigh()
homePage.verifyFilterPriceLowtoHigh()

​
selectFilterPriceHightoLow

Selects the “Price (high to low)” filter option. 
public selectFilterPriceHightoLow(): void
Usage Example: 
homePage.selectFilterPriceHightoLow()
homePage.verifyFilterPriceHightoLow()

​
Filter Verification Methods

​
verifyFilterAtoZ

Verifies that products are sorted alphabetically from A to Z. 
public verifyFilterAtoZ(): void
Implementation:
  • Extracts all product names from inventory items
  • Sorts names alphabetically (A to Z)
  • Compares actual order with expected sorted order
Usage Example: 
it('Should verify the A to Z selection', () => {
    homePage.selectFilterAtoZ()
    homePage.verifyFilterAtoZ()
})

​
verifyFilterZtoA

Verifies that products are sorted alphabetically from Z to A. 
public verifyFilterZtoA(): void
Implementation:
  • Extracts all product names from inventory items
  • Sorts names reverse alphabetically (Z to A)
  • Compares actual order with expected sorted order
Usage Example: 
it('Should verify the Z to A selection', () => {
    homePage.selectFilterZtoA()
    homePage.verifyFilterZtoA()
})

​
verifyFilterPriceLowtoHigh

Verifies that products are sorted by price from lowest to highest. 
public verifyFilterPriceLowtoHigh(): void
Implementation:
  • Extracts all product prices from inventory items
  • Parses prices by removing ’$’ symbol
  • Sorts prices in ascending order
  • Compares actual order with expected sorted order
Usage Example: 
it('Should verify the price low to high selection', () => {
    homePage.selectFilterPriceLowtoHigh()
    homePage.verifyFilterPriceLowtoHigh()
})

​
verifyFilterPriceHightoLow

Verifies that products are sorted by price from highest to lowest. 
public verifyFilterPriceHightoLow(): void
Implementation:
  • Extracts all product prices from inventory items
  • Parses prices by removing ’$’ symbol
  • Sorts prices in descending order
  • Compares actual order with expected sorted order
Usage Example: 
it('Should verify the price high to low selection', () => {
    homePage.selectFilterPriceHightoLow()
    homePage.verifyFilterPriceHightoLow()
})

​
Cart Management Methods

​
addProductToCart

Adds a specific product to the cart by its index position. 
public addProductToCart(productIndex: number): void
​
productIndex
number
required
Zero-based index of the product to add (0 = first product)
Usage Example: 
// Add the first product
homePage.addProductToCart(0)

// Add the third product
homePage.addProductToCart(2)
Real Test Example: 
it('Should add successfully one product into the cart', () => {
    homePage.addProductToCart(0)
    navbar.clickOnCheckoutIcon()
    checkout.verifyCartPageIsVisible()
    checkout.verifyProductWasAddedToCart()
})

​
addAllProductsToCart

Adds all available products to the cart. 
public addAllProductsToCart(): void
Implementation:
  • Iterates through all inventory items
  • Clicks the “Add to Cart” button for each product
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()
})

​
Complete Test Flow Examples

​
Filter Testing

import LoginPage from "../../support/pages/LoginPage"
import HomePage from "../../support/pages/HomePage"

let loginPage: LoginPage
let homePage: HomePage

describe('Home Page Filter Tests', () => {
    beforeEach(() => {
        cy.fixture('users').as('userData')
        loginPage = new LoginPage()
        homePage = new HomePage()
        cy.visit('/')

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

        homePage.verifyHomePageIsVisible()
    })

    it('Should verify the A to Z selection', () => {
        homePage.selectFilterAtoZ()
        homePage.verifyFilterAtoZ()
    })

    it('Should verify the price low to high selection', () => {
        homePage.selectFilterPriceLowtoHigh()
        homePage.verifyFilterPriceLowtoHigh()
    })
})

​
Cart Management Testing

it('Should add and verify products in cart', () => {
    // Add single product
    homePage.addProductToCart(0)
    navbar.clickOnCheckoutIcon()
    checkout.verifyProductWasAddedToCart()
    
    // Navigate back and add all products
    cy.go('back')
    homePage.addAllProductsToCart()
    navbar.clickOnCheckoutIcon()
    checkout.verifyAllProductsWereAddedToCart()
    checkout.verifyThatCheckoutCounterMatch()
})

BasePage

Parent class providing common functionality

LoginPage

Login before accessing home page

Checkout

Navigate here after adding products

Navbar

Access cart from navigation

Build docs developers (and LLMs) love

Get started for freeTalk to us