cypress-should-really

Read the blog posts Functional Helpers For Cypress Tests and Check Items For Duplicates. 🎓 Covered in my course Cypress Plugins.

Example

Grab text from each list item, convert the strings into Dates, convert Dates into timestamps, then confirm they are sorted using chai-sorted assertion.

import { innerText, toDate, invoke } from 'cypress-should-really'
cy.get('.dates')
  .then(map('innerText'))
  .then(map(toDate))
  .then(invoke('getDate'))
  .should('be.sorted')

The above separates each operation using cy.then commands, which are not retried. Luckily, we can easily combine the individual steps into a single data transformation function using the pipe command.

import { innerText, toDate, invoke, pipe } from 'cypress-should-really'
const transform = pipe(map('innerText'), map(toDate), invoke('getDate'))
cy.get('.dates').then(transform).should('be.sorted')

The above commands are still NOT retrying the first cy.get command, thus if the page changes, the assertion still fails since it never "sees" the changed elements. We need to remove the .then(transform) step and directly tie the cy.get command to the assertion. We can move the data transformation into the assertion callback that transforms the data AND runs the assertion using really function.

import { innerText, toDate, invoke, pipe, really } from 'cypress-should-really'
const transform = pipe(map('innerText'), map(toDate), invoke('getDate'))
cy.get('.dates').should(really(transform, 'be.sorted'))

Finally, we can skip using the pipe function, since it is built into the really automatically. All functions before the assertion are applied and then the assertion runs.

import { innerText, toDate, invoke, really } from 'cypress-should-really'
cy.get('.dates').should(
  really(map('innerText'), map(toDate), invoke('getDate'), 'be.sorted'),
)

Installation

$ npm i -D cypress-should-really
# or install using Yarn
$ yarn add -D cypress-should-really

API

• map
• invoke
• constructor
• toDate (deprecated) use constructor(Date) instead
• its
• greaterThan
• flipTwoArguments
• partial
• pipe
• tap
• filter
• isEqual
• really

invoke

invoke(<method name>, ...arguments) returns a function that waits for an object or an array, then calls the method and returns the results

const calc = {
  add(a, b) {
    return a + b
  },
}
invoke('add', 1, 2)(calc)
// 3

See invoke-spec.js

constructor

Takes a constructor function, returns a function that waits for a single argument and calls with the new keyword.

import {constructor} from 'cypress-should-really'
// converts a string to Date object
.then(constructor(Date))

tap

Passes the argument into the given function, but returns the original argument. Useful for debugging pipes of functions - insert it in every place of the pipeline to see the values.

const o = {
  name: 'Joe',
}
cy.wrap(o).should(really(its('name'), tap(console.log), 'equal', 'Mary'))
// change the name to Mary after some time
setTimeout(() => {
  o.name = 'Mary'
}, 1000)

In the above example, the console.log the string "Joe" multiple times, before logging "Mary" once and passing the test.

See tap-spec.js

Videos

• Filter Input Elements By Value Using cypress-should-really Plugin

See also

• cypress-recurse
• cypress-map for Cypress v12+

Small print

Author: Gleb Bahmutov <gleb.bahmutov@gmail.com> © 2021

• @bahmutov
• glebbahmutov.com
• blog
• videos
• presentations
• cypress.tips

License: MIT - do anything with the code, but don't blame me if it does not work.

Support: if you find any problems with this module, email / tweet / open issue on Github