https://github.com/imrlopezag/cy-utilities
This repository contains 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.
https://github.com/imrlopezag/cy-utilities
cypress npm npm-package testing
Last synced: 5 months ago
JSON representation
This repository contains 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.
- Host: GitHub
- URL: https://github.com/imrlopezag/cy-utilities
- Owner: ImRLopezAG
- License: gpl-3.0
- Created: 2024-06-10T11:07:38.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-24T03:52:46.000Z (almost 2 years ago)
- Last Synced: 2025-09-07T01:47:29.529Z (10 months ago)
- Topics: cypress, npm, npm-package, testing
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/cy-utilities?activeTab=readme
- Size: 102 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cypress Utilities
This repository contains 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:
```bash
npm install --save-dev cy-utilities
```
```bash
pnpm add --save-dev cy-utilities
```
```bash
yarn add --dev cy-utilities
```
```bash
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:
```javascript
// cypress/support/e2e.js
import 'cy-utilities'
```
```javascript
// 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)'
}
})
```
```javascript
// 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.
```javascript
// 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
[](https://www.typescriptlang.org/)
[](https://www.cypress.io/)
[](https://eslint.org/)
[](https://prettier.io/)
[](https://nodejs.org/es/)
## Authors
[](https://github.com/ImRLopezAG)
## 🔗 Links
[](https://imrlopez.vercel.app)
[](https://www.linkedin.com/in/angel-gabriel-lopez/)
[](https://twitter.com/imr_lopez)