cypress-extender-arrays

adds pure JS array functions to Cypress

Installation

To install the plugin to your project please use:

npm install cypress-extender-arrays

or use:

yarn add cypress-extender-arrays

Manual

Once cypress-extender-arrays is installed use:

import 'cypress-extender-arrays';

Or use:

        require('cypress-extender-arrays');

Or add it to the plugin file.

Usage

Once you done, you'll be able to enjoy the following Cypress commands:

Map function

When you get Cypress Chainable elements

you can use the JS map function,

with a callback function to call on each element

of the returned elements from the previous chainable command.

        cy.get('li').map(e => e.text().trim()).then(texts => {
            cy.log('Texts are: ', texts);
        });

Another example (previous element is an array):

        cy.wrap([11,22,33]).map(e => e + 5).then(array => {
            cy.wrap(array[0]).should('eq', 16);
            cy.wrap(array[1]).should('eq', 27);
            cy.wrap(array[2]).should('eq', 38);
        });

Reduce function

When you get Cypress Chainable elements

you can use the JS reduce function,

with a callback function to call on each element

of the returned elements from the previous chainable command.

    it('test array reduce with array', () => {
        cy.get('a').map(e => e.text()).reduce((acc, val) => {
            acc.push(val[0]);
            return acc;
        }, []).should('have.length.gt', 0);
    });

    it('test array reduce with string', () => {
        cy.get('a').map(e => e.text()).reduce((acc, val) => {
            acc += val[0] || '';
            return acc;
        }, '').should('have.length.gt', 0);
    });

    it('test array reduce with number', () => {
        cy.get('a').map(e => e.text()).reduce((acc, val) => acc += val.length, 0)
        .should('be.gt', 0);
    });

Every function

When you get Cypress Chainable elements

you can use the JS every function,

with a callback function to call on each element

it returns chainable true if the callback returned true for all elements, otherwise it returns false.

Use:

it('test that every from the prevSubjet is a string', () => {
    cy.get('a').map(e => e.text()).every(v => typeof v === 'string').should('be.true');
});

Join function

What is join function ?

When you get Cypress Chainable elements with string values

you can use the join function,

exactly as you do in a normal JS

which returns a joined string from the array of strings

NOTICE: when you use chainable which is not a strings array, the joined value will be ''

Use:

it('test join texts are given', () => {
    cy.get('a').map(e => e.text()).join("HOWAREYOU").should('include', 'HOWAREYOU');
});

Reverse function

What is reverse function ?

When you get Cypress Chainable elements with values

you can use the reverse function,

exactly as you do in a normal JS

which returns an array with the values reversed

Use:

    it('test array reverse', () => {
        cy.get('a').map(e => e.text()).reverse().then(values => {
            cy.get('a').reverse().map(e => e.text()).should('deep.eq', values);
        });
    });