Cypress Steps plugin

A small Cypress helper that adds your test steps to the timeline and error logs.

$3

- Table of contents
- Installation
- TypeScript support
- Usage
- cy.step()
- cy.todo()
- Error messages
- cy.section()
- TIP: rename all your cy.log() to cy.step() commands

$3

Install this package:
``bash
npm i cypress-plugin-steps


or


yarn add cypress-plugin-steps
`

Import the plugin into your cypress/support/e2e.js file:
`js
import 'cypress-plugin-steps'
// or
require('cypress-plugin-steps')
`


$3


In most cases, types work just by installing plugin, but you can add the types to your tsconfig.json
`json
{
"types": ["cypress-plugin-steps"]
}
`
This will add types for cy.step(), cy.section(), and cy.todo() command.

$3

This will add two new commands to your Cypress library: cy.step() and cy.section() See the details below

$3

This works similarly to cy.log() command, but in addition, will add numbering to your tests:

`ts
it('numbers test steps', () => {

cy.step('open a page')
cy.visit('cypress/index.html')

cy.step('find all primary colors')
cy.get('.primary')

cy.step('select blue')
cy.get('.blue')

});
`

!screenshot.png

$3

This command is meant to note a part of the test missing implementation.

`js
cy.todo('Use better test selectors')
`

$3

If your test fails, your scenario will be added to the error message. This way your scenario will be visible right on the error screenshot that Cypress does automatically:

!error scenario

You can also see the scenario in terminal:
!error in terminal

$3

Works similarly to cy.step() but will be more prominent in Cypress runner (adding '---' to the log message) and will reset counter. This way you can divide your test into multiple secions.

!sections

$3

You can find and replace all your cy.log() commands by matching the word log with following regex:
`
(?:cy\s)?log\s
``

---

...powered by coffee and love ❤️ Filip Hric