Cypress plugin grep-boxes

A companion Cypress plugin for cy-grep that allows user to run specific test(s) in open mode.

Features

• ✅ A new UI test selection within cypress open to filter and run only selected tests in a given spec

Table of Contents

• Installation
• Setup
• Open mode
  • Use Required Test Tags Instead Of Skipping Tests
• Contributions

---

📦 Installation

1. Install the following packages:

npm install --save-dev @bahmutov/cy-grep # Dependent package for the plugin
npm install --save-dev cypress-plugin-grep-boxes

2. In cypress/support/e2e.js (For E2E tests) and/or cypress/support/component.js (For Component tests),

import { greppedTestToggle, addGrepButtons } from 'cypress-plugin-grep-boxes';
import registerCypressGrep from '@bahmutov/cy-grep/src/support';

registerCypressGrep();

greppedTestToggle();
addGrepButtons();

---

🦺 Setup

Recommended: Set two common environment variables tied to the @bahmutov/cy-grep package to enhance the experience utilizing the grep logic within the Cypress Test Runner UI using cypress open:

{
  "env": {
    "grepOmitFiltered": true,
    "grepFilterSpecs": true
  }
}

Note

More information on grepOmitFiltered and grepFilterSpecs can be read within the README for @bahmutov/cy-grep.

✅ Open mode

Within each spec, you can select any given number of suite(s) or individual test(s) and click the filter toggle located on the reporter above:

Use Required Test Tags Instead Of Skipping Tests

Note

Read more about this topic within a blog post Use Required Test Tags Instead Of Skipping Tests and within the README for @bahmutov/cy-grep.

Normally, any Cypress test or suite of tests marked with a .skip will be shown when running tests or within the Cypress test runner UI.

Since this plugin uses @bahmutov/cy-grep plugin, we can instead designate skipped tests using a required tag:

it('deletes an item', { requiredTags: '@skip' }, () => {
  expect(1).to.equal(2);
});

Now running or opening Cypress in interactive mode, you will not see any tests with requiredTags including @skip (unless setting environment variable grepTags=@skip).

To run just those tests with the required tag @skip in interactive mode:

npx cypress open --env grepTags=@skip

Contributions

Feel free to open a pull request or drop any feature request or bug in the issues.

Please see more details in the contributing doc.