products

Cypress Steps Plugin

Use cypress-plugin-steps for better Cypress Command Log messages.

Testing is a communication tool. The end-to-end test is the best way to express what the user flow should be. The test author communicates with the machine the test steps, but also communicates with other developers what the user is expected to do and see. I love clear tests and use a lot of log messages in my tests. Recently I have been using the plugin cypress-plugin-steps that makes the communication much clearer.

This plugin is simple to install:

  • npm i -D cypress-plugin-steps
  • add the import 'cypress-plugin-steps' line to your specs / support file

The plugin provides 3 commands: cy.section, cy.step, and the new command cy.todo. Each command takes a string argument: the message to print. Let's try a simple test:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
it("edits a task", () => {
  ...
  cy.step("Switch to Kanban view")
  cy...

  cy.step("Edit the task")
  ...

  cy.section("Checking")
  cy.step("Confirm the updated task")
  ...

  cy.todo("Check the task description")
})

I hid the intermediate commands in the test above, yet you should get a general idea of what is going on. Now let's look at the UI these custom commands are rendering in Cypress Command Log by injecting their own CSS styles:

Cypress steps commandsCypress steps commands

Eye-catching, right?

In addition to making the logical test steps pop, the plugin provides value when the test fails. I have changed the expected number of elements to make the test fail. Look at the error message: it includes the list of sections and steps that finished before the failure!

When the error fails the message includes the stepsWhen the error fails the message includes the steps

Nice! If you want to see this plugin cypress-plugin-steps in action, check out the video below.

Follow the plugin's author Filip Hric

PS: The demo application used in this blog post is an example from my new course in progress Cursor AI For Cypress Testing.