Skip to main content

​
Overview

BasePage is the foundational class that all page object classes extend. It provides common properties and protected methods that are inherited by all page objects in the framework. Location: cypress/support/pages/BasePage.ts

​
Class Definition

export default class BasePage {
    public inventoryItem: string

    constructor() {
        this.inventoryItem = '[data-test="inventory-item"]'
    }

    protected goToUrl(url: string): void {
        cy.visit(url)
    }
}

​
Constructor

The constructor initializes common selectors used across multiple pages. 
const basePage = new BasePage()

​
Properties

​
inventoryItem
string
default:"[data-test=\"inventory-item\"]"
Selector for inventory items, used across HomePage and Checkout pages for product manipulation and verification.

​
Methods

​
goToUrl

Navigates to a specified URL using Cypress visit command. 
protected goToUrl(url: string): void
​
url
string
required
The URL to navigate to
Access Level: Protected (only accessible to derived classes) Usage Example: 
import BasePage from './BasePage'

class CustomPage extends BasePage {
    public navigateToCustomPage() {
        this.goToUrl('/custom-page')
    }
}

​
Inheritance

The following page objects extend BasePage:
  • LoginPage - User authentication page
  • HomePage - Product listing and filtering page
  • Checkout - Shopping cart and checkout page

​
Design Pattern

BasePage implements the Page Object Model (POM) design pattern, which:
  • Encapsulates page-specific selectors and actions
  • Provides reusability through inheritance
  • Improves test maintainability
  • Reduces code duplication

LoginPage

User authentication page object

HomePage

Product listing page object

Build docs developers (and LLMs) love

Get started for freeTalk to us