# cypress-plugin-steps

> Add steps to your tests

Latest version **1.2.2** (published 2026-11-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install cypress-plugin-steps
pnpm add cypress-plugin-steps
yarn add cypress-plugin-steps
bun add cypress-plugin-steps
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2026-11-10 |
| First published | 2023-02-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 77 |
| Author | Filip Hric |
| Maintainers | filiphric |

## Links

- npm: https://www.npmjs.com/package/cypress-plugin-steps
- Repository: https://github.com/filiphric/cypress-plugin-steps
- Homepage: https://github.com/filiphric/cypress-plugin-steps#readme
- Issues: https://github.com/filiphric/cypress-plugin-steps/issues
- npm.io page: https://npm.io/package/cypress-plugin-steps

## Recent versions

- 1.2.2 (latest) — 2026-11-10
- 1.2.1 — 2025-05-28
- 1.2.0 — 2025-03-26
- 1.1.1 — 2023-03-17
- 1.1.0 — 2023-02-26
- 1.0.4 — 2023-02-23
- 1.0.3 — 2023-02-23
- 1.0.2 — 2023-02-14
- 1.0.1 — 2023-02-14

## README

<h2 align=center>Cypress Steps plugin</h2>
<p align="center">
<a href="https://github.com/sponsors/filiphric"><img src="https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86" /></a>
</p>

<p align="center">
A small Cypress helper that adds your test steps to the timeline and error logs.
</p>

### Table of contents
- [Table of contents](#table-of-contents)
- [Installation](#installation)
- [TypeScript support](#typescript-support)
- [Usage](#usage)
- [cy.step()](#cystep)
- [cy.todo()](#cytodo)
- [Error messages](#error-messages)
- [cy.section()](#cysection)
- [TIP: rename all your `cy.log()` to `cy.step()` commands](#tip-rename-all-your-cylog-to-cystep-commands)

### Installation

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')
```
### TypeScript support
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.

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

### cy.step()
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](images/screenshot.png)

### cy.todo()

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

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

### Error messages
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](images/error.png)

You can also see the scenario in terminal:
![error in terminal](images/terminal.png)

### cy.section()
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](images/sections.png)

### TIP: rename all your `cy.log()` to `cy.step()` commands

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

<hr>
<p align="center">
...powered by coffee and love ❤️  <a href="https://filiphric.com">Filip Hric
</p>

---
_Source: https://npm.io/package/cypress-plugin-steps · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._