Cypress Utilities

A collection of utilities that can be used to help with testing using Cypress, the tool provides a lot of features out of the box, but sometimes we need to extend it to make it more powerful.

Installation

To install the utilities, you can use the following command:

npm install --save-dev cy-utilities

pnpm add --save-dev cy-utilities

yarn add --dev cy-utilities

bun add --dev cy-utilities

Usage

To use the utilities, you need to import the functions you want to use in your test files, for example:

// cypress/support/e2e.js
import 'cy-utilities'

// cypress/support/(your-file or your-folder)/*.js
import { SinglePOM, MultiPOM } from 'cy-utilities'

export const SitePOM = SinglePOM.create({
  ITEMS: 'div#tbodyid > div',
  ITEM_1: 'div#tbodyid > div:nth-child(1)',
  ITEM_2: 'div#tbodyid > div:nth-child(2)',
  ITEM_3: 'div#tbodyid > div:nth-child(3)',
  NEXT_ITEMS: 'ul.pagination > li > button#next2',
  PREV_ITEMS: 'ul.pagination > li > button#prev2'
})

export const SiteMultiPOM = MultiPOM.create({
  CART: {
    ITEMS: 'div#tbodyid > div',
    PLACE_ORDER: 'button#place-order',
    SUBTOTAL: 'span#subtotal'
  },
  HOME: {
    ITEMS: 'div#tbodyid > div',
    ITEM_1: 'div#tbodyid > div:nth-child(1)',
    ITEM_2: 'div#tbodyid > div:nth-child(2)'
  }
})

// cypress/e2e/your-test.spec.js
import { SitePOM, SiteMultiPOM } from '../support/(your-file or your-folder)/*.js';

describe('Test', () => {
  it('should do something', () => {
    cy.visit('https://example.com');
    SitePOM.get('ITEMS').should('have.length', 3);
    SitePOM.get('ITEM_1').should('have.text', 'Item 1');
    SitePOM.get('ITEM_2').should('have.text', 'Item 2');
    SitePOM.get('ITEM_3').should('have.text', 'Item 3');
    SitePOM.get('NEXT_ITEMS').click();
    SitePOM.get('PREV_ITEMS').click();
  });
  it('should do something with the command', () => {
    cy.visit('https://example.com');
    // it will wait for each command to finish before executing the next one the quantity of milliseconds is the second parameter
    cy.awaitableCluster([
      () => SitePOM.get('ITEMS').should('have.length', 3);
      () => SitePOM.get('ITEM_1').should('have.text', 'Item 1');
      () => SitePOM.get('ITEM_2').should('have.text', 'Item 2');
      () => SitePOM.get('ITEM_3').should('have.text', 'Item 3');
      () => SitePOM.get('NEXT_ITEMS').click();
      () => SitePOM.get('PREV_ITEMS').click();
    ], 200)
  });
  it('should do something with the multi command', () => {
    cy.visit('https://example.com');
    SiteMultiPOM.getMultiElement('CART', 'ITEMS').should('have.length', 3);
    SiteMultiPOM.getMultiElement('CART', 'PLACE_ORDER').click();
    SiteMultiPOM.getMultiElement('CART', 'SUBTOTAL').should('have.text', '100.00');
    SiteMultiPOM.getMultiElement('HOME', 'ITEMS').should('have.length', 2);
    SiteMultiPOM.getMultiElement('HOME', 'ITEM_1').should('have.text', 'Item 1');
    SiteMultiPOM.getMultiElement('HOME', 'ITEM_2').should('have.text', 'Item 2');
  });
});

[!Warning] You must be careful with the time and the quantity of commands you are going to execute, if you have a lot of commands and the time is too long, you can slow down the test execution.

// cypress/e2e/your-test.spec.js
import { SitePOM } from '../support/(your-file or your-folder)/*.js';

describe('Test', () => {
  it('should do something with the command', () => {
    cy.visit('https://example.com');
    // it will wait for each command to finish before executing the next one the quantity of milliseconds is the second parameter
    cy.awaitableCluster([
      () => SitePOM.get('ITEMS').should('have.length', 3);
      () => SitePOM.get('ITEM_1').should('have.text', 'Item 1');
      () => SitePOM.get('ITEM_2').should('have.text', 'Item 2');
      () => SitePOM.get('ITEM_3').should('have.text', 'Item 3');
      () => SitePOM.get('NEXT_ITEMS').click();
      () => SitePOM.get('PREV_ITEMS').click();
    ], 200)
  });
});

🛠️ Tools

Authors

🔗 Links