cypress-bootstrap/cypress/tests/ui/inventory_page_tests.spec.ts

Cypress Bootstrap is a project scaffolding tool that sets up a Cypress automation framework with a standardized folder structure and Page Object Model (POM) design. It helps teams quickly start testing with built-in best practices and sample specs.

import LoginPage from '../../pages/LoginPage';
import InventoryPage from '../../pages/InventoryPage';

describe('Inventory Page Test Suite', () => {
  before(() => {
    LoginPage.createSession();
  });

  it(
    'should display products in the inventory page',
    { tags: ['@smoke', '@inventory-page'] },
    () => {
      InventoryPage.checkPageURL(InventoryPage.url);
      InventoryPage.title().should('be.visible');
      InventoryPage.inventoryItems().should('have.length.greaterThan', 0);
    }
  );

  it(
    'should display hamburger menu button and side menu buttons',
    { tags: ['@smoke', '@inventory-page'] },
    () => {
      InventoryPage.hamburgerMenuButton().should('be.visible').click();
      InventoryPage.sideMenu.overlay().should('be.visible');
      InventoryPage.sideMenu.aboutButton().should('be.visible');
      InventoryPage.sideMenu.allItemsButton().should('be.visible');
      InventoryPage.sideMenu.logOutButton().should('be.visible');
      InventoryPage.sideMenu.resetAppStateButton().should('be.visible');
      InventoryPage.sideMenu.closeButton().should('be.visible').click();
      InventoryPage.sideMenu.overlay().should('not.be.visible');
    }
  );

  it('should display filter options', { tags: ['@smoke', '@inventory-page'] }, () => {
    const filterOptions = [
      'Name (A to Z)',
      'Name (Z to A)',
      'Price (low to high)',
      'Price (high to low)',
    ];
    InventoryPage.filterButton().should('be.visible');
    InventoryPage.filterButton().click();
    InventoryPage.filterSelector().seeOption(filterOptions);
    InventoryPage.filterSelector().select('Price (low to high)');
    InventoryPage.activeFilterOption().should('have.text', 'Price (low to high)');
    InventoryPage.inventoryItems()
      .first()
      .within(() => {
        InventoryPage.inventoryItemNameLabel()
          .invoke('text')
          .then(lowPriceItemName => {
            Cypress.env('lowPriceItemName', lowPriceItemName);
          });
      });
    InventoryPage.filterButton().click();
    InventoryPage.filterSelector().seeOption(filterOptions);
    InventoryPage.filterSelector().select('Price (high to low)');
    InventoryPage.activeFilterOption().should('have.text', 'Price (high to low)');
    InventoryPage.inventoryItems()
      .first()
      .within(() => {
        InventoryPage.inventoryItemNameLabel()
          .invoke('text')
          .then(highPriceItemName => {
            expect(highPriceItemName).not.to.equal(Cypress.env('lowPriceItemName'));
          });
      });
  });

  it('should display social media links in the footer', { tags: ['@inventory-page'] }, () => {
    InventoryPage.footer.section().should('be.visible');
    InventoryPage.footer.twitterLink().should('be.visible');
    InventoryPage.footer.facebookLink().should('be.visible');
    InventoryPage.footer.linkedinLink().should('be.visible');
  });

  it(
    'should adhere to WCAG 2.1 and 2.0 A, AA, & best practice standards',
    { tags: ['@inventory-page', '@a11y'] },
    () => {
      const a11yOptions = {
        includedImpacts: [], // Setting the impacts to an empty array makes the tests not to fail even when there are violations
      };

      cy.injectAxe();
      // Check for accessibility violations with WCAG 2.0 and 2.1, A and AA standards and skip failing the test even if there are violations
      // The default wick-a11y command checks with WCAG 2.0 and 2.1, A and AA standards, and best practices
      cy.checkAccessibility(undefined, a11yOptions);
    }
  );

  it('should adhere to WCAG 2.0 A & AA standards', { tags: ['@inventory-page', '@a11y'] }, () => {
    const a11yOptions = {
      runOnly: ['wcag2a', 'wcag2aa'],
      includedImpacts: [], // Setting the impacts to an empty array makes the tests not to fail even when there are violations
    };

    cy.injectAxe();
    // Check for accessibility violations with WCAG 2.0 A & AA standards and skip failing the test if there are violations (skipFailures: true)
    cy.checkAccessibility(undefined, a11yOptions);
  });
});