Skip to main content

​
Overview

Navbar is a component class that handles all interactions with the navigation menu, including user logout and accessing the shopping cart. Location: cypress/support/components/Navbar.ts
Unlike page objects, Navbar does NOT extend BasePage as it represents a reusable component rather than a full page.

​
Class Definition

export default class Navbar {
    private burgerMenuBtn: string
    private logoutBtn: string
    private checkoutIcon: string

    constructor() {
        this.burgerMenuBtn = '#react-burger-menu-btn'
        this.logoutBtn = '#logout_sidebar_link'
        this.checkoutIcon = '[data-test="shopping-cart-link"]'
    }
}

​
Constructor

Initializes the Navbar component with required selectors. 
const navbar = new Navbar()

​
Properties

PropertyTypeSelectorDescription
burgerMenuBtnstring#react-burger-menu-btnHamburger menu button to open sidebar
logoutBtnstring#logout_sidebar_linkLogout link in the sidebar menu
checkoutIconstring[data-test="shopping-cart-link"]Shopping cart icon link

​
Methods

​
userLogout

Performs a complete logout operation by opening the burger menu and clicking the logout button. 
public userLogout(): void
Implementation:
  1. Clicks the burger menu button to open the sidebar
  2. Clicks the logout link to sign out
Usage Example: 
// After completing test actions
homePage.verifyHomePageIsVisible()
navbar.userLogout()
loginPage.verifyLoginMainPage()
Real Test Example: 
it('Should log in successfully with valid credentials', () => {
    cy.get('@userData').then((user: any) => {
        loginPage.verifyLoginMainPage()
        loginPage.typeUsername(user.standard)
        loginPage.typePassword(user.password)
        loginPage.clickOnLoginButton()

        homePage.verifyHomePageIsVisible()

        navbar.userLogout()

        loginPage.verifyLoginMainPage()
    })
})

​
clickOnCheckoutIcon

Clicks the shopping cart icon to navigate to the cart page. 
public clickOnCheckoutIcon(): void
Usage Example: 
homePage.addProductToCart(0)
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()
    checkout.verifyThatCheckoutCounterMatch()
})

​
Complete Test Flow Examples

​
Login and Logout Flow

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

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

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

    it('Should log in and log out successfully', () => {
        cy.get('@userData').then((user: any) => {
            loginPage.verifyLoginMainPage()
            loginPage.typeUsername(user.standard)
            loginPage.typePassword(user.password)
            loginPage.clickOnLoginButton()

            homePage.verifyHomePageIsVisible()

            navbar.userLogout()

            loginPage.verifyLoginMainPage()
        })
    })
})

​
Shopping Cart Navigation Flow

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

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

describe('Cart Navigation Tests', () => {
    beforeEach(() => {
        cy.fixture('users').as('userData')
        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 navigate to cart and verify products', () => {
        homePage.addAllProductsToCart()
        navbar.clickOnCheckoutIcon()
        checkout.verifyCartPageIsVisible()
        checkout.verifyAllProductsWereAddedToCart()
    })
})

​
Usage Patterns

​
Pattern 1: Logout After Test

it('Test with logout', () => {
    // Perform test actions
    homePage.verifyHomePageIsVisible()
    
    // Logout at end
    navbar.userLogout()
    loginPage.verifyLoginMainPage()
})

​
Pattern 2: Cart Access

it('Test cart functionality', () => {
    // Add items to cart
    homePage.addProductToCart(0)
    
    // Navigate to cart
    navbar.clickOnCheckoutIcon()
    
    // Verify cart contents
    checkout.verifyCartPageIsVisible()
})

​
Pattern 3: Multi-User Testing

it('Should handle multiple user logins', () => {
    // Login as first user
    loginPage.userLogin(user.standard, user.password)
    homePage.verifyHomePageIsVisible()
    
    // Logout
    navbar.userLogout()
    
    // Login as different user
    loginPage.userLogin(user.visual, user.password)
    homePage.verifyHomePageIsVisible()
    
    // Logout
    navbar.userLogout()
})

​
Component vs Page Object

​
Key Differences

AspectNavbar (Component)Page Objects
Extends BasePageNoYes
ScopeReusable navigation elementFull page interactions
VisibilityPresent across multiple pagesSingle page context
InheritanceStandalone classInherits from BasePage

​
When to Use

Use Navbar when:
  • Logging out users
  • Navigating to the shopping cart
  • Accessing sidebar menu items
Use Page Objects when:
  • Interacting with page-specific elements
  • Performing page-specific validations
  • Working with page-specific workflows

LoginPage

Navigate here after logout

HomePage

Use navbar for logout and cart access

Checkout

Navigate here via cart icon

Build docs developers (and LLMs) love

Get started for freeTalk to us