Cypress Pipe

cy.pipe can be used as a simpler replacement for Cypress Custom Commands - you just write functions.

cy.pipe works very similarly to cy.then except for a few key differences:

• pipe will try to document the function name in the Command log (only works on named functions)
• pipe will create DOM snapshots to aid in debugging
• If the function passed to pipe resolves synchronously (doesn't contain Cypress commands)
  • AND returns a jQuery element, pipe will retry until the jQuery element list is not empty (most Cypress commands do this)
  • AND is followed by a cy.should, the function will be retried until the assertion passes or times out (most Cypress commands do this)

1const obj = { foo: 'bar' }
2const getFoo = s => s.foo
3setTimeout(() => { obj.foo = 'baz' }, 1000)
4
5cy.wrap(obj)
6  .pipe(getFoo)
7  .should('equal', 'baz')

The above assertion will pass after 1 second. The Cypress Command Log will look like:

WRAP       {foo: bar}
 - PIPE    getFoo
 - ASSERT  expected bar to equal bar

If the pipe was using a then, it would fail immediately and wouldn't show the getFoo functions anywhere in the Cypress Command Log.

If you care even more about log output and you have more generic functions that curry other functions, you can use loggable. That sounds scary, but you might have a function like getTodoByName where the function takes the name of the Todo and returns a function that takes a container. For example:

1import { loggable } from 'cypress-pipe'
2
3const getProp = loggable('getProp', prop => obj => obj[prop])
4// alternative
5const getProp = loggable(prop => function getProp(obj) { return obj[prop] })
6
7cy.wrap({ foo: 'bar' })
8  .pipe(getProp('foo'))
9  .should('equal', 'bar')

The loggable decorator function can either take a name as a string, or allow .pipe to get it from a named currried function.

The Cypress Log will look like:

WRAP       {foo: bar}
 - PIPE    getProp("foo")
 - ASSERT  expected bar to equal bar

This library is a proof of concept, but should be stable. The proposal can be found here: https://github.com/cypress-io/cypress/issues/1548

Best Practices

Use synchronous functions when possible

Synchronous functions can be retried, async functions cannot. Retrying allows implicit waiting which avoids confusing flaky failures where tests are dependant on timing.

1// bad
2// The `cy.*` command inside the function prevents automatic retries. The following will actually fail if the text `'foobar'` isn't immediately available in the DOM
3const getFirst = $el => cy.wrap($el).find('#first')
4
5// good
6// synchronous resolution - pipe will retry `getFirst` until it returns a non-empty jQuery element list and contains the text 'foobar'
7const getFirst = $el => $el.find('#first')
8
9cy.get('body')
10  .pipe(getFirst)
11  .should('contain', 'foobar')

Use cy commands for actions

pipe detects the use of Cypress commands and assumes side effects. It will take a 'before' and 'after' snapshots. 'before' is taken before any code is run. 'after' is taken at the end after the function is complete. For action helpers, this makes for a nice before/after snapshots. pipe doesn't prevent logging of Cypress commands from within a function (which can be confusing). If Cypress supports Command Log Grouping, pipe could invoke to have perfect logging.

1const submitForm = $el => cy.wrap($el).find('#submit').click()
2
3cy.get('form')
4  .pipe(submitForm) // has before/after of submitting form
5
6// Command Log:
7// GET        <form>
8//  -PIPE     submitForm
9//  -WRAP     <form>
10//  -FIND     #submit
11//  -CLICK

Name functions

Don't use anonymous functions and pick short and descriptive function names. The Command Log can be used as a tool for mapping the contents of a test to the screenshot/video. This is useful when finding out which step the test failed on.

1// okay
2cy.wrap({ foo: 'bar' })
3  .pipe(s => s.foo)
4  .should('equal', 'bar')
5
6// Command Log:
7// WRAP       {foo: bar}
8//  -PIPE     function() {}
9//  - ASSERT  expected 'bar' to equal 'bar'
10
11// good
12const getFoo = s => s.foo
13cy.wrap({ foo: 'bar' })
14  .pipe(getFoo)
15  .should('equal', 'bar')
16
17// Command Log:
18// WRAP       {foo: bar}
19//  -PIPE     getFoo
20//  - ASSERT  expected 'bar' to equal 'bar'

If you have a function that returns another function (curried for extra input), name that.

1// Name the returned curried function
2const getProp = key => function getProp(s) {
3  return s[key]
4}
5
6cy.wrap({ foo: 'bar' })
7  .pipe(getProp('foo'))
8  .should('equal', 'bar')
9
10// Command Log:
11// WRAP       {foo: bar}
12//  -PIPE     getProp
13//  - ASSERT  expected 'bar' to equal 'bar'

Here's a screenshot of a failure using cypress-pipe and loggable:

The code that produced this was:

1const getFirst = $el => $el.find('#first')
2const getSecond = loggable('getSecond', selector => $el => $el.find(selector))
3
4cy.get('body')
5  .pipe(getFirst)
6  .pipe(getSecond('#second1'))
7  .should('contain', 'foobar')

Pipe tries to add as much debugging information as possible.

Installation

npm install cypress-pipe -D

Add the following to your cypress/support/commands.js file:

1import 'cypress-pipe'