cypress-extender

Cypress Extender, extends the basic functinality of Cypress to ease its usage.

Why

In the usual cy.get , every test fails, when element doesn't exist.

Where sometimes, we want to test cases where element doesn't exist, or we want to wait while while the element doesn't exist

i.e. open dropdown and wait for inner element to be created there, to identify, it's opened

With Cypress Extender it's possible, in fact we can use an if ccondition, or while loop, to test condition of element

Prerequisites

In order to use this plugin:

• Cypress must be installed.

Installation

To install the plugin to your project please use:

npm install cypress-extender

in order to also add it to your package.json file so you can use:

npm install --save-prod cypress-extender

Manual

Once Cypress Extender is installed,

there are 2 main options to use this plugin

• initCypress - adds this plugin's commands to cypress
• load and use specific function - doesn't change anything in cypress commands

initCypress

in order to load all the extender commands to cypress use:

const { initCypress } = require('cypress-extender');
initCypress();

or alternativly:

import { initCypress } from 'cypress-extender';
initCypress();

in both ways, you'll get many new functions added to cypress, such as:

        cy.exists('body').should('be.true');
        cy.exists('bodyy').should('be.false'); 
        cy.isVisible('body').should('be.true');
        cy.isVisible('bodyy').should('be.false'); 
        cy.hasText('body', 'default blank page').should('be.true');
        cy.hasText('body', 'default blanket page').should('be.false');        

and many more options, as you can find below, in this page.

Load required function

in order to load specific function, use:

const { exists } = require('cypress-extender');

or alternativly:

import { exists } from 'cypress-extender';

in both ways you'll be able to test things like:

if (exists('body')) { /* DO SOMETHING */ }
while (exists('body')) { /* DO SOMETHING */ }
for (let i = 0; i <  SOME_MAX_TRIES && exists('body'); i++ ) {
    /* DO SOMETHING */
}

so you'll be able for example to implement something like

const isOpened = () => exists(' SELECTOR THAT APPEARS WHEN OPENED');
const openDropDown = !isOpened() && cy.get('SOME SELECTOR TO OPEN').click();

Also here we support visible in a differnt way, than the usual cy.get('SELECTOR').should('be.visible');

what if, for example you want to wait for element to exist and to be visible, now you can. Simply use something like:

import { isVisible } from 'cypress-extender';
while (isVisible('SELECTOR OF ELEMENT')) {
    /* DO SOMETHING */
}

very simple to use, and should make cypress code much easier to use.

Supported functions

    </tbody>
</table>

there are more options available for this plugin, and hopefully I will find some time to update all of them here.