cypress-plugin-grep-boxes 1.0.0

package/.github/workflows/main.yml

@@ -0,0 +1,14 @@
+name: Cypress Tests
+
+on: push
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      # Install npm dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v6

package/CONTRIBUTING.md

@@ -0,0 +1,43 @@
+# Contributing
+
+Thanks for being willing to contribute!
+
+**Working on your first Pull Request?** You can learn more from [Your First Pull Request on GitHub](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork)
+
+## Project setup
+
+1. Fork and clone the repo
+2. Run `npm install` to install dependencies
+3. Create a branch for your PR with `git checkout -b pr/your-branch-name`
+
+> Tip: Keep your `main` branch pointing at the original repository and make
+> pull requests from branches on your fork. To do this, run:
+>
+> ```
+> git remote add upstream https://github.com/dennisbergevin/cypress-plugin-grep-boxes
+> git fetch upstream
+> git branch --set-upstream-to=upstream/main main
+> ```
+>
+> This will add the original repository as a "remote" called "upstream," Then
+> fetch the git information from that remote, then set your local `main`
+> branch to use the upstream main branch whenever you run `git pull`. Then you
+> can make all of your pull request branches based on this `main` branch.
+> Whenever you want to update your version of `main`, do a regular `git pull`.
+
+## Committing and Pushing changes
+
+Please make sure to run tests in `open` mode to verify functionality before you commit your changes:
+
+```bash
+npx cypress open
+```
+
+Make sure to include any test changes (if they exist) in your commit.
+
+## Help needed
+
+Please checkout the [the open issues](https://github.com/dennisbergevin/cypress-plugin-grep-boxes/issues)
+
+Also, please watch the repo and respond to questions/bug reports/feature
+requests! Thanks!

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024, Dennis Bergevin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+<h2 align=center>Cypress plugin grep-boxes</h2>
+<p align="center">
+</p>
+
+<p align="center">
+A companion Cypress plugin for <code>cy-grep</code> that allows user to run specific test(s) in <code>open</code> mode.
+</p>
+
+![Cypress-plugin-grep-boxes](./assets/cypress-plugin-grep-boxes-demo.gif)
+
+## Features
+
+- ✅ A new UI test selection within `cypress open` to filter and run only selected tests in a given spec
+
+#### Table of Contents
+
+- [Installation](#-installation)
+- [Setup](#-setup)
+- [Open mode](#-open-mode)
+- [Contributions](#contributions)
+
+---
+
+## 📦 Installation
+
+1. Install the following packages:
+
+```sh
+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),
+
+```js
+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:
+
+```json
+{
+  "env": {
+    "grepOmitFiltered": true,
+    "grepFilterSpecs": true
+  }
+}
+```
+
+> [!NOTE]
+> More information on `grepOmitFiltered` and `grepFilterSpecs` can be read within the [README for `@bahmutov/cy-grep`](https://github.com/bahmutov/cy-grep?tab=readme-ov-file#pre-filter-specs-grepfilterspecs).
+
+## ✅ 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:
+
+![Cypress grep-boxes within UI mode](./assets/grep-boxes-ui.png)
+
+## Contributions
+
+Feel free to open a pull request or drop any feature request or bug in the [issues](https://github.com/dennisbergevin/cypress-plugin-grep-boxes/issues).
+
+Please see more details in the [contributing doc](./CONTRIBUTING.md).

package/cypress/e2e/1-getting-started/todo.cy.js

@@ -0,0 +1,143 @@
+/// <reference types="cypress" />
+
+// Welcome to Cypress!
+//
+// This spec file contains a variety of sample tests
+// for a todo list app that are designed to demonstrate
+// the power of writing tests in Cypress.
+//
+// To learn more about how Cypress works and
+// what makes it such an awesome testing tool,
+// please read our getting started guide:
+// https://on.cypress.io/introduction-to-cypress
+
+describe('example to-do app', () => {
+  beforeEach(() => {
+    // Cypress starts out with a blank slate for each test
+    // so we must tell it to visit our website with the `cy.visit()` command.
+    // Since we want to visit the same URL at the start of all our tests,
+    // we include it in our beforeEach function so that it runs before each test
+    cy.visit('https://example.cypress.io/todo');
+  });
+
+  it('displays two todo items by default', () => {
+    // We use the `cy.get()` command to get all elements that match the selector.
+    // Then, we use `should` to assert that there are two matched items,
+    // which are the two default items.
+    cy.get('.todo-list li').should('have.length', 2);
+
+    // We can go even further and check that the default todos each contain
+    // the correct text. We use the `first` and `last` functions
+    // to get just the first and last matched elements individually,
+    // and then perform an assertion with `should`.
+    cy.get('.todo-list li').first().should('have.text', 'Pay electric bill');
+    cy.get('.todo-list li').last().should('have.text', 'Walk the dog');
+  });
+
+  it('can add new todo items', () => {
+    // We'll store our item text in a variable so we can reuse it
+    const newItem = 'Feed the cat';
+
+    // Let's get the input element and use the `type` command to
+    // input our new list item. After typing the content of our item,
+    // we need to type the enter key as well in order to submit the input.
+    // This input has a data-test attribute so we'll use that to select the
+    // element in accordance with best practices:
+    // https://on.cypress.io/selecting-elements
+    cy.get('[data-test=new-todo]').type(`${newItem}{enter}`);
+
+    // Now that we've typed our new item, let's check that it actually was added to the list.
+    // Since it's the newest item, it should exist as the last element in the list.
+    // In addition, with the two default items, we should have a total of 3 elements in the list.
+    // Since assertions yield the element that was asserted on,
+    // we can chain both of these assertions together into a single statement.
+    cy.get('.todo-list li')
+      .should('have.length', 3)
+      .last()
+      .should('have.text', newItem);
+  });
+
+  it('can check off an item as completed', () => {
+    // In addition to using the `get` command to get an element by selector,
+    // we can also use the `contains` command to get an element by its contents.
+    // However, this will yield the <label>, which is lowest-level element that contains the text.
+    // In order to check the item, we'll find the <input> element for this <label>
+    // by traversing up the dom to the parent element. From there, we can `find`
+    // the child checkbox <input> element and use the `check` command to check it.
+    cy.contains('Pay electric bill')
+      .parent()
+      .find('input[type=checkbox]')
+      .check();
+
+    // Now that we've checked the button, we can go ahead and make sure
+    // that the list element is now marked as completed.
+    // Again we'll use `contains` to find the <label> element and then use the `parents` command
+    // to traverse multiple levels up the dom until we find the corresponding <li> element.
+    // Once we get that element, we can assert that it has the completed class.
+    cy.contains('Pay electric bill')
+      .parents('li')
+      .should('have.class', 'completed');
+  });
+
+  context('with a checked task', () => {
+    beforeEach(() => {
+      // We'll take the command we used above to check off an element
+      // Since we want to perform multiple tests that start with checking
+      // one element, we put it in the beforeEach hook
+      // so that it runs at the start of every test.
+      cy.contains('Pay electric bill')
+        .parent()
+        .find('input[type=checkbox]')
+        .check();
+    });
+
+    it('can filter for uncompleted tasks', () => {
+      // We'll click on the "active" button in order to
+      // display only incomplete items
+      cy.contains('Active').click();
+
+      // After filtering, we can assert that there is only the one
+      // incomplete item in the list.
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .first()
+        .should('have.text', 'Walk the dog');
+
+      // For good measure, let's also assert that the task we checked off
+      // does not exist on the page.
+      cy.contains('Pay electric bill').should('not.exist');
+    });
+
+    it('can filter for completed tasks', () => {
+      // We can perform similar steps as the test above to ensure
+      // that only completed tasks are shown
+      cy.contains('Completed').click();
+
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .first()
+        .should('have.text', 'Pay electric bill');
+
+      cy.contains('Walk the dog').should('not.exist');
+    });
+
+    it('can delete all completed tasks', () => {
+      // First, let's click the "Clear completed" button
+      // `contains` is actually serving two purposes here.
+      // First, it's ensuring that the button exists within the dom.
+      // This button only appears when at least one task is checked
+      // so this command is implicitly verifying that it does exist.
+      // Second, it selects the button so we can click it.
+      cy.contains('Clear completed').click();
+
+      // Then we can make sure that there is only one element
+      // in the list and our element does not exist
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .should('not.have.text', 'Pay electric bill');
+
+      // Finally, make sure that the clear button no longer exists.
+      cy.contains('Clear completed').should('not.exist');
+    });
+  });
+});

package/cypress/e2e/2-advanced-examples/window.cy.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+
+context('Window', () => {
+  beforeEach(() => {
+    cy.visit('https://example.cypress.io/commands/window');
+  });
+
+  it('cy.window() - get the global window object', () => {
+    // https://on.cypress.io/window
+    cy.window().should('have.property', 'top');
+  });
+
+  it('cy.document() - get the document object', () => {
+    // https://on.cypress.io/document
+    cy.document().should('have.property', 'charset').and('eq', 'UTF-8');
+  });
+
+  it('cy.title() - get the title', () => {
+    // https://on.cypress.io/title
+    cy.title().should('include', 'Kitchen Sink');
+  });
+});

package/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/cypress/support/e2e.js

@@ -0,0 +1,26 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+import { greppedTestToggle, addGrepButtons } from '../../index';
+import registerCypressGrep from '@bahmutov/cy-grep/src/support';
+
+registerCypressGrep();
+greppedTestToggle();
+addGrepButtons();
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress.config.js

@@ -0,0 +1,16 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  env: {
+    grepOmitFiltered: true,
+    grepFilterSpecs: true,
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      require('@bahmutov/cy-grep/src/plugin')(config);
+      // IMPORTANT: return the config object
+      return config;
+    },
+  },
+});

package/index.js

@@ -0,0 +1,315 @@
+import registerCypressGrep from '@bahmutov/cy-grep';
+/**
+ * Adds a toggle to reporter to grep selected tests.
+ */
+
+const tests = [];
+
+export const greppedTestToggle = () => {
+  registerCypressGrep();
+  const hasStyles = window.top?.document.querySelector('#grepTestToggleStyle');
+  const hasToggleButton = window.top?.document.querySelector('#grepTestToggle');
+  const defaultStyles = `
+        .reporter header {
+          overflow: visible;
+          z-index: 2;
+        }
+        #grepTestToggleControls {
+          position: relative;
+          display: inline-block;
+        }
+        #grepTestToggle {
+          display: none;
+        }
+        #grepTestToggleControls label {
+          background-color: transparent;
+          padding-top: 5px;
+        }
+        #grepTestToggleControls #grepTestToggleTooltip {
+          visibility: hidden;
+          width: 150px;
+          background-color: #f3f4fa;
+          color: #1b1e2e;
+          text-align: center;
+          padding: 5px;
+          border-radius: 3px;
+          position: absolute;
+          z-index: 1;
+          top: 27px;
+          left: 0px;
+          height: 28px;
+        }
+        #grepTestToggleControls:hover #grepTestToggleTooltip {
+          visibility: visible;
+        }
+        #grepTestToggleButton #grepTestToggleLabel {
+          cursor: pointer;
+        }
+        #grepTestToggleTooltip::after {
+          content: " ";
+          position: absolute;
+          bottom: 100%;  /* At the top of the tooltip */
+          right: 85%;
+          margin-left: -5px;
+          border-width: 5px;
+          border-style: solid;
+          border-color: transparent transparent #f3f4fa transparent;
+        }
+        .reporter:has(#grepTestToggle:checked) .command.command-name-request:has(.command-is-event) {
+          display:none
+        }
+        `;
+  const turnOngrepTestToggleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#afb3c7" class="bi bi-collection-play-fill" viewBox="0 0 16 16">
+  <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6zm6.258-6.437a.5.5 0 0 1 .507.013l4 2.5a.5.5 0 0 1 0 .848l-4 2.5A.5.5 0 0 1 6 12V7a.5.5 0 0 1 .258-.437"/>
+</svg>`;
+
+  const turnOffgrepTestToggleIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#afb3c7" class="bi bi-collection-play" viewBox="0 0 16 16">
+  <path d="M2 3a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 0-1h-11A.5.5 0 0 0 2 3m2-2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7A.5.5 0 0 0 4 1m2.765 5.576A.5.5 0 0 0 6 7v5a.5.5 0 0 0 .765.424l4-2.5a.5.5 0 0 0 0-.848z"/>
+  <path d="M1.5 14.5A1.5 1.5 0 0 1 0 13V6a1.5 1.5 0 0 1 1.5-1.5h13A1.5 1.5 0 0 1 16 6v7a1.5 1.5 0 0 1-1.5 1.5zm13-1a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5h-13A.5.5 0 0 0 1 6v7a.5.5 0 0 0 .5.5z"/>
+</svg>`;
+
+  const turnOffgrepTestToggleDescription = 'Filter selected tests';
+  const turnOngrepTestToggleDescription = 'Unfilter selected tests';
+
+  // append styles
+  if (!hasStyles) {
+    const reporterEl = window.top?.document.querySelector('#unified-reporter');
+    const reporterStyleEl = document.createElement('style');
+    reporterStyleEl.setAttribute('id', 'grepTestToggleStyle');
+    reporterStyleEl.innerHTML = defaultStyles;
+    reporterEl?.appendChild(reporterStyleEl);
+  }
+
+  if (!hasToggleButton) {
+    const header = window.top?.document.querySelector(
+      '#unified-reporter header'
+    );
+    const headerToggleDiv = document.createElement('div');
+    const headerToggleSpan = document.createElement('span');
+    const headerToggleTooltip = document.createElement('span');
+    const headerToggleButton = document.createElement('button');
+    const headerToggleInput = document.createElement('input');
+    const headerToggleLabel = document.createElement('label');
+
+    headerToggleInput.setAttribute('type', 'checkbox');
+
+    headerToggleInput.setAttribute('id', 'grepTestToggle');
+    headerToggleLabel.setAttribute('for', 'grepTestToggle');
+    headerToggleLabel.setAttribute('id', 'grepTestToggleLabel');
+    headerToggleLabel.innerHTML = turnOffgrepTestToggleIcon;
+
+    headerToggleDiv.setAttribute('class', 'controls');
+    headerToggleDiv.setAttribute('id', 'grepTestToggleControls');
+    headerToggleTooltip.setAttribute('id', 'grepTestToggleTooltip');
+    headerToggleTooltip.innerText = turnOffgrepTestToggleDescription;
+    headerToggleButton.setAttribute(
+      'aria-label',
+      turnOffgrepTestToggleDescription
+    );
+    headerToggleButton.setAttribute('id', 'grepTestToggleButton');
+
+    header?.appendChild(headerToggleDiv);
+    headerToggleDiv?.appendChild(headerToggleSpan);
+    headerToggleDiv?.appendChild(headerToggleTooltip);
+    headerToggleSpan?.appendChild(headerToggleButton);
+    headerToggleButton?.appendChild(headerToggleInput);
+    headerToggleButton?.appendChild(headerToggleLabel);
+  }
+
+  const grepTestToggleElement =
+    window.top?.document.querySelector('#grepTestToggle');
+  const grepTestToggleLabelElement = window.top?.document.querySelector(
+    '[for=grepTestToggle]'
+  );
+  const grepTestToggleTooltipElement = window.top?.document.querySelector(
+    '#grepTestToggleTooltip'
+  );
+
+  grepTestToggleElement?.addEventListener('change', (e) => {
+    const stopBtn = window.top?.document.querySelector('.reporter .stop');
+
+    if (e.target.checked) {
+      if (stopBtn) {
+        stopBtn.click();
+      }
+      // store all checked checkbox values then send to grep in accepted format
+      const tests = [
+        ...window.top?.document.querySelectorAll('.grep-test-checkbox:checked'),
+      ].map((e) => e.value);
+      // store all non-checked checkbox values
+      const uncheckedTests = [
+        ...window.top?.document.querySelectorAll(
+          '.grep-test-checkbox:not(:checked)'
+        ),
+      ].map((e) => e.value);
+
+      tests.forEach((t) => {
+        // if a checked test title begins with the grep inverted '-' symbol, remove the '-'
+        if (t[0] === '-') {
+          tests.push(t.slice(1));
+          tests.splice(
+            tests.findIndex((e) => e === t),
+            1
+          );
+        }
+        // if a non-checked test's title includes a checked test's title, invert grep for unchecked title
+        uncheckedTests.forEach((u) => {
+          if (u.includes(t)) {
+            tests.push(`-${u}`);
+          }
+        });
+      });
+
+      Cypress.grep(tests.join(';'));
+
+      // when checked, grep only selected tests in spec
+      grepTestToggleLabelElement.innerHTML = turnOngrepTestToggleIcon;
+      grepTestToggleTooltipElement.innerHTML = turnOngrepTestToggleDescription;
+    } else {
+      if (stopBtn) {
+        stopBtn.click();
+      }
+      // when unchecked, ungrep and show all tests in spec
+      Cypress.grep();
+      grepTestToggleLabelElement.innerHTML = turnOffgrepTestToggleIcon;
+      grepTestToggleTooltipElement.innerHTML = turnOffgrepTestToggleDescription;
+    }
+  });
+};
+
+/**
+ * Adds a checkbox for each suite and test for run selection.
+ */
+
+export const addGrepButtons = () => {
+  const hasStyles = window.top?.document.querySelector('#grepButtonsStyle');
+
+  const grepTestsBtnClass = 'grep-tests-btn';
+
+  const defaultStyles = `
+  .grep-tests-btn {
+    background: none;
+    color: inherit;
+    padding: 0 20px;
+    verticalAlign: baseline;
+  }
+
+  .grep-test-checkbox {
+    appearance: inherit;
+    cursor: pointer;
+  }
+  `;
+
+  if (!hasStyles) {
+    const runnablesEl = window.top?.document.querySelector('.runnables');
+    const runnablesStyleEl = window.top?.document.createElement('style');
+    runnablesStyleEl.setAttribute('id', 'grepButtonsStyle');
+    runnablesStyleEl.innerHTML = defaultStyles;
+    runnablesEl?.appendChild(runnablesStyleEl);
+  }
+  const testsAndSuites = window.top?.document.querySelectorAll(
+    '.test.runnable, .suite.runnable'
+  );
+  [...testsAndSuites].forEach((t) => {
+    const header = t.querySelector('.collapsible-header');
+    const title = header.querySelector('.runnable-title');
+    const testName = title.innerText.split('\n')[0];
+
+    // Don't add the button if it already exists
+    if (header.querySelectorAll(`.${grepTestsBtnClass}`).length) {
+      return;
+    }
+
+    const grepTestsBtn = window.top?.document.createElement('button');
+    grepTestsBtn.className = grepTestsBtnClass;
+    grepTestsBtn.style.background = 'none';
+    grepTestsBtn.style.color = 'inherit';
+    grepTestsBtn.style.padding = '0 20px';
+    grepTestsBtn.style.verticalAlign = 'baseline';
+    grepTestsBtn.setAttribute(
+      'aria-label',
+      'Checkbox to select suite/test for filtering'
+    );
+
+    // Add checkbox
+    const checkbox = window.top?.document.createElement('input');
+    checkbox.className = 'grep-test-checkbox';
+    checkbox.type = 'checkbox';
+    checkbox.value = testName;
+    if (tests.includes(checkbox.value)) {
+      checkbox.checked = true;
+    }
+
+    grepTestsBtn.appendChild(checkbox);
+    header.appendChild(grepTestsBtn);
+
+    // Push checked tests to an array for temporary storage
+    // This is for when a suite collapses in UI and removes a given test runnable
+    // When the collapsible expands, any previously checked test will remain checked
+    checkbox?.addEventListener('change', (e) => {
+      if (e.target.checked) {
+        tests.push(checkbox.value);
+      } else {
+        tests.splice(
+          tests.findIndex((e) => e === checkbox.value),
+          1
+        );
+      }
+    });
+
+    // To prevent a checkbox from expanding a runnable, click the collapsible
+    grepTestsBtn?.addEventListener('change', (e) => {
+      if (e.target.checked) {
+        header.click();
+      }
+    });
+  });
+};
+
+// Wrapping logic within isInteractive check
+// This targets cypress open mode where user can switch specs
+if (Cypress.config('isInteractive')) {
+  Cypress.on('window:unload', () => {
+    // Store the current Cypress test runner url
+    // This is to check against any spec change in test runner while the grep filter is activated
+    // If a user does switch spec while filter is active, the filter will be reset
+    const sidebarSpecLinkPage = window.top?.document.querySelector(
+      '[data-cy="sidebar-link-specs-page"]'
+    );
+    const grepTestToggleElement =
+      window.top?.document.querySelector('#grepTestToggle');
+
+    if (
+      window.top?.document.URL !=
+        sidebarSpecLinkPage.getAttribute('data-url') &&
+      grepTestToggleElement.checked
+    ) {
+      grepTestToggleElement.click();
+    }
+
+    sidebarSpecLinkPage.setAttribute('data-url', window.top?.document.URL);
+  });
+}
+
+Cypress.on('test:before:run', () => {
+  if (
+    // if the grep test toggle is checked, do not show checkboxes on each runnable
+    window.top?.document.querySelectorAll('#grepTestToggle:checked').length ===
+    0
+  ) {
+    addGrepButtons();
+  }
+});
+
+// To account for when the collapsible runnables are removed, add back grep buttons
+if (
+  // if the grep test toggle is checked, do not show checkboxes on each runnable
+  window.top?.document.querySelectorAll('#grepTestToggle:checked').length === 0
+) {
+  window.top?.document.addEventListener('click', () => {
+    addGrepButtons();
+  });
+  window.top?.document.addEventListener('keypress', () => {
+    addGrepButtons();
+  });
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "cypress-plugin-grep-boxes",
+  "version": "1.0.0",
+  "description": "Cypress plugin that allows user to run specific tests in open mode.",
+  "main": "./index.js",
+  "keywords": [
+    "cypress",
+    "testing",
+    "cypress-plugin"
+  ],
+  "devDependencies": {
+    "@bahmutov/cy-grep": "^1.9.17",
+    "cypress": "^13.10.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": "Dennis Bergevin",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dennisbergevin/cypress-plugin-grep-boxes.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dennisbergevin/cypress-plugin-grep-boxes/issues"
+  },
+  "homepage": "https://github.com/dennisbergevin/cypress-plugin-grep-boxes#readme"
+}