cypress-queries-builder v0.0.7

Cypress Queries Builder

This is library for simplifying writing queries with Cypress.

Installation

To install with npm, run command:

npm i -D cypress-queries-builder@latest

Initialization

The library provides the set of interfaces and the build function,

import { build } from 'cypress-queries-builder';

Then, builder instance need to be initialized inside cypress context function (cy - Cypress instance):

describe('Main', () => {
    const _ = build(cy, params);

Here, symbol _ is used as builder instance variable name (to have it as shorter as possible).

With second argument params can be passed set of options:

The instance of cypress queries builder, allows to run next actions:

Usage

Builder instance provides next commands:

visit

Same as default Cypress visit, but with improves for storybook and it uses predefined pathPrefix, if it was used while initialization.

Example:

 _.visit('test-route/2');

testCases

Helps to have more flexible test cases usage, and provide two commands to do so - add and run:

The main flow is next: 1. Provide the test cases wrapped with function as input for add command. 2. Specify the number or numbers array in the input for run command.

add command returns run command, so test cases can be "runnned" inline, immediately, using call function braces _.add(...testcases)([1, 2])

Example usage, both example is doing the same:

_.testCases.add([
      () => it('1. Visit first route', () => _.visit('first-route'); ),
      () => it('2. Visit second route', () => _.visit('second-route'); ),
    ]);
_.testCases.run([2]); // so Cypress will execute only second test case

or

_.testCases.add([
() => it('1. Visit first route', 
  () => {
    _.visit('first-route')
  }),
() => it('2. Visit second route', 
  () => {
    _.visit('second-route')
  }),
])([2]) // so Cypress will execute only second test case

find

Command returns Cypress.Chainable object in order to do further test cases.

Input options extends: ExecuteOptions, FindOptions

Example usage:

// get second element with class "link", but wait 5 seconds before it
const finded = _.find({ 
    classNames: 'link', 
    elementNumber: 2, 
    wait: { before: 5000 } 
});
finded.click();

type

Input options extends: ExecuteOptions, DefaultOptions, ChildOptions

Example usage

_.type({ 
  text: 'test', 
  classNames: ['test-class1', 'test-class2'] 
});

clear

Input options extends: ExecuteOptions

Example usage:

_.clear({ classNames:  'test-class' });

click

Command proxy for cypress .click() chain.

Input options extends: ExecuteOptions, DefaultOptions, ChildOptions, TimerOptions

Example usage:

_.click({
    classNames:  'test-class', 
    force: true
});

exist

Input options extends: ExecuteOptions, DefaultOptions, TimerOptions

Example usage

_.exist({ 
  exist, 
  classNames: selectedItemClass, 
  elementNumber 
});

disabled

Input options extends: FindOptions

Example usage

_.disabled({ 
  disabled: true, 
  classNames: selectedItemClass, 
  elementNumber
});

contain

Input options extends: ExecuteOptions, PropertyOptions

Example usage

_.contain({ 
    value: true,
    expectedValue: text,
    classNames: loginEmailInputClass 
})

_.contain({ 
    text: true, 
    expectedValue: text, 
    classNames: loginEmailInputClass 
})

scrollable

Input options extends: ExecuteOptions, FindOptions

Example usage

_.scrollable({ 
    isScrollable, 
    classNames: classificationsScrollContainerClass 
});

trigger

Input options extends: ExecuteOptions, FindOptions

Example usage

_.trigger({ 
    triggerName: 'mouseover', 
    classNames: c.autocompleteInputClass 
});

have

Input options extends: ExecuteOptions, FindOptions

Have has next suboptions:

have.class

Example usage

_.have.class({ 
    className, 
    have, 
    classNames: 'looking-for'
});

have.child

Example usage

_.have.child({
    childClassNames: 'childe',
    have: true,
    selectors,
    elementNumber
});

have.length

Example usage

_.have.length({ 
    expectedLength,
    have: true,
    classNames: removeIconPath
});

style

Input options extends: ExecuteOptions, FindOptions

Have has next suboptions:

style.get

Example usage

_.style.get({
    styleName: 'width',
    classNames:  inputClass
});

style.compare

Input options extends CompareOptions

Example usage

_.style.compare({
    expectedValue,
    styleName: 'width',
    classNames: inputClass,
    equal
});

property

Input options extends: ExecuteOptions, FindOptions

Have has next suboptions:

property.get

Input options extends: PropertyOptions

Example usage

_.property.get({ 
    text: true, 
    selectors: ['table', 'td.cell'],
    elementNumber
});

property.is

Example usage

_.property.is({
    expectedValue,
    classNames: 'data',
    text: true,
    is: true
});

Common Options:

ElementOptions

ChildOptions

DefaultOptions

Extends: ElementOptions

ExecuteOptions

Extends: DefaultOptions

TimerOptions

FindOptions

Extends: DefaultOptions, ChildOptions, TimerOptions

KeyPressOptions

PropertyOptions

Extends: FindOptions

CompareOptions