Skip to content

Latest commit

 

History

History
223 lines (193 loc) · 5.41 KB

testFunctions.md

File metadata and controls

223 lines (193 loc) · 5.41 KB
Raw

Test functions

Why is it needed

Let's suppose that we have an element that appears ONLY after a specific event

In a usual cy.get approach,

our test will fail (or even worse will be flaky) depending if that event happend/didn't happen before we searched for the element

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,

You can use:

initCypress

to later be able to use cy... extended command

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

or alternativly:

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

you'll get new cypress commands such as:

cy.exists('body'); 
cy.isVisible('body'); 
cy.hasText('body', 'default blank page');

and others (see below in this page).

Load required function

you don't want to add cy... commands

instead you want to combine fast JQuery commands in:

if/while/for commands, this is probably the better option for you.

Use:

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

or alternativly:

import { exists } from 'cypress-extender';

exist is just one function (see below)

So you'll be able to combine commands as: 

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

how awesome is this, so now we can write an example like:

const openDropdown = () => {
    if (!exists('SELECTOR THAT APPEARS WHEN OPENED')) {
        ('SOME SELECTOR TO OPEN').click();
    }
};

or to wait for visible element, write somthing like:

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

Supported functions

function what is it
exists element should exist, in DOM
isVisible exists in DOM and visible
isCheckbox element exists and is a checkbox
isChecked element exists and is checked
contains element exists and its text contains GIVEN TEXT, this function get 2 arguments cssSelector, text
equals element exists and its text equals to GIVEN TEXT, this function get 2 arguments cssSelector, text(element should be equal to)
isEmpty element exists and has no children
hasNoChildren element exists and has no children
isDisabled element exists and is disabled
isEnabled element exists and is enabled (not disabled)
isFile element exists and is of type file (mostly input[type=file])
isFirstChild element exists and is the first child of its parent element
isFocused element exists and is in focus state
hasSelector element exists and has among its descendants element that matches the css selector
isHeader element exists and is of type header (h1, h2, h5 ...)
isHidden element exists and is hidden
isImage element exists and is of type image
isInput element exists and is of type input
isAnimated element exists and is recognized as running some animation (by JQuery)
isButton element exists and is of type button