cypress-plugin-last-failed 1.0.1 → 1.1.0

package/CONTRIBUTING.md

@@ -30,7 +30,7 @@ Thanks for being willing to contribute!
 Please make sure to run the node script before you commit your changes:
 
 ```bash
-npx cypress-last-failed run
+npx cypress-plugin-last-failed run
 ```
 
 For changes related to the `cypress open` toggle, you can run `npx cypress open` to test functionality in the Cypress Test Runner UI. Make sure to include any test changes (if they exist) in your commit.

package/README.md

@@ -24,6 +24,7 @@ A companion Cypress plugin for <code>cy-grep</code> that re-runs the last failed
   - [Setting up a `npm` script](#-setting-up-a-npm-script)
 - [Open mode](#-open-mode)
   - [Recommended open mode env variables](#recommended-open-mode-env-variables)
+  - [Use Required Test Tags Instead Of Skipping Tests](#use-required-test-tags-instead-of-skipping-tests)
 - [CI support](#continuous-integration-support)
 - [Typescript support](#typescript-support)
 - [Contributions](#contributions)
@@ -151,6 +152,29 @@ Toggling the filter will run any previously failed tests on the particular spec
 > [!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).
 
+### 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](https://glebbahmutov.com/blog/required-tags-instead-of-skipped-tests/) and within the [README for `@bahmutov/cy-grep`](https://github.com/bahmutov/cy-grep#required-tags).
+
+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**:
+
+```js
+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:
+
+```bash
+npx cypress open --env grepTags=@skip
+```
+
 ---
 
 ## Continuous integration support

package/cypress/e2e/tests.cy.js

@@ -6,9 +6,11 @@ describe('Should run expected tests', () => {
       expect(true).to.eq(false);
     }
   });
+
   it('should not run', () => {
     expect(true).to.eq(true);
   });
+
   it('needs to run', () => {
     if (Cypress.env('shouldPass')) {
       expect(1).to.eq(1);
@@ -16,6 +18,7 @@ describe('Should run expected tests', () => {
       expect(1).to.eq(2);
     }
   });
+
   it('will be included in failed tests', () => {
     if (Cypress.env('shouldPass')) {
       expect(10).to.eq(10);
@@ -23,4 +26,16 @@ describe('Should run expected tests', () => {
       expect(10).to.eq(2);
     }
   });
+
+  it('retry', { requiredTags: '@skip', retries: 1 }, () => {
+    if (Cypress.currentRetry === 0) {
+      expect(10).to.eq(2);
+    } else {
+      expect(10).to.eq(10);
+    }
+  });
+
+  it('skipped', { requiredTags: '@skip' }, () => {
+    expect(10).to.eq(10);
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-plugin-last-failed",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Cypress plugin to rerun last failed tests in cypress run and open mode",
   "main": "./src/index.js",
   "scripts": {

package/src/index.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-
+const failedTestToggle = require('./toggle');
 /**
  * Collects failed tests from the most recent Cypress test run
  *
@@ -52,143 +52,4 @@ const collectFailingTests = (on, config) => {
   return collectFailingTests;
 };
 
-/**
- * Toggle for use within a spec file during `cypress open`
- */
-
-const failedTestToggle = () => {
-  const hasStyles = top?.document.querySelector('#runFailedStyle');
-  const hasToggleButton = top?.document.querySelector('#runFailedToggle');
-  const defaultStyles = `
-      .reporter header {
-        overflow: visible;
-        z-index: 2;
-      }
-      #runFailedControls {
-        position: relative;
-        display: inline-block;
-      }
-      #runFailedToggle {
-        display: none;
-      }
-      #runFailedControls label {
-        background-color: transparent;
-        padding-top: 5px;
-      }
-      #runFailedControls #runFailedTooltip {
-        visibility: hidden;
-        width: 134px;
-        background-color: #f3f4fa;
-        color: #1b1e2e;
-        text-align: center;
-        padding: 5px;
-        border-radius: 3px;
-        position: absolute;
-        z-index: 1;
-        top: 27px;
-        left: 0px;
-        height: 28px;
-      }
-      #runFailedControls:hover #runFailedTooltip {
-        visibility: visible;
-      }
-      #runFailedButton #runFailedLabel {
-        cursor: pointer;
-      }
-      #runFailedTooltip::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(#runFailed:checked) .command.command-name-request:has(.command-is-event) {
-        display:none
-      }
-      `;
-  const turnOffRunFailedIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#f59aa9" class="bi bi-filter-circle" viewBox="0 0 16 16">
-    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
-    <path d="M7 11.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5"/>
-  </svg>`;
-
-  const turnOnRunFailedIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#f59aa9" class="bi bi-filter-circle-fill" viewBox="0 0 16 16">
-    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16M3.5 5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1M5 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m2 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5"/>
-  </svg>`;
-
-  const turnOffRunFailedDescription = 'Filter failed tests';
-  const turnOnRunFailedDescription = 'Unfilter failed tests';
-
-  // append styles
-  if (!hasStyles) {
-    const reporterEl = top?.document.querySelector('#unified-reporter');
-    const reporterStyleEl = document.createElement('style');
-    reporterStyleEl.setAttribute('id', 'runFailedStyle');
-    reporterStyleEl.innerHTML = defaultStyles;
-    reporterEl?.appendChild(reporterStyleEl);
-  }
-
-  if (!hasToggleButton) {
-    const header = 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', 'runFailedToggle');
-    headerToggleLabel.setAttribute('for', 'runFailedToggle');
-    headerToggleLabel.setAttribute('id', 'runFailedLabel');
-    headerToggleLabel.innerHTML = turnOffRunFailedIcon;
-
-    headerToggleDiv.setAttribute('class', 'controls');
-    headerToggleDiv.setAttribute('id', 'runFailedControls');
-    headerToggleTooltip.setAttribute('id', 'runFailedTooltip');
-    headerToggleTooltip.innerText = turnOffRunFailedDescription;
-    headerToggleButton.setAttribute('aria-label', turnOffRunFailedDescription);
-    headerToggleButton.setAttribute('id', 'runFailedButton');
-
-    header?.appendChild(headerToggleDiv);
-    headerToggleDiv?.appendChild(headerToggleSpan);
-    headerToggleDiv?.appendChild(headerToggleTooltip);
-    headerToggleSpan?.appendChild(headerToggleButton);
-    headerToggleButton?.appendChild(headerToggleInput);
-    headerToggleButton?.appendChild(headerToggleLabel);
-  }
-
-  const runFailedElement = top.document.querySelector('#runFailedToggle');
-  const runFailedLabelElement = top.document.querySelector(
-    '[for=runFailedToggle]'
-  );
-  const runFailedTooltipElement =
-    top.document.querySelector('#runFailedTooltip');
-
-  runFailedElement?.addEventListener('change', (e) => {
-    const stopBtn = window.top.document.querySelector('.reporter .stop');
-
-    if (e.target.checked) {
-      if (stopBtn) {
-        stopBtn.click();
-      }
-      // when checked, grep only failed tests in spec
-      Cypress.grepFailed();
-      runFailedLabelElement.innerHTML = turnOnRunFailedIcon;
-      runFailedTooltipElement.innerHTML = turnOnRunFailedDescription;
-    } else {
-      if (stopBtn) {
-        stopBtn.click();
-      }
-      // when unchecked, ungrep and show all tests in spec
-      Cypress.grep();
-      runFailedLabelElement.innerHTML = turnOffRunFailedIcon;
-      runFailedTooltipElement.innerHTML = turnOffRunFailedDescription;
-    }
-  });
-};
-
 module.exports = { collectFailingTests, failedTestToggle };

package/src/toggle.js

@@ -0,0 +1,195 @@
+/**
+ * Find and grep all the failed test titles designated within the Cypress Test Runner UI.
+ *
+ * Any retried tests that failed but ultimately passed will not be included.
+ *
+ * See README for recommendation on handling skipped tests ordinarily seen within the Cypress Test Runner UI.
+ */
+
+const grepFailed = () => {
+  // @ts-ignore
+  const failedTestTitles = [];
+
+  const failedTests = window.top?.document.querySelectorAll(
+    '.test.runnable.runnable-failed'
+  );
+
+  [...failedTests].forEach((test) => {
+    failedTestTitles.push(test.innerText.split('\n')[0]);
+  });
+
+  if (!failedTestTitles.length) {
+    console.log('No failed tests found');
+  } else {
+    console.log('running only the failed tests');
+    const grepTitles = failedTestTitles.join('; ');
+    // @ts-ignore
+    Cypress.grep(grepTitles);
+  }
+};
+
+/**
+ * Toggle for use within a spec file during `cypress open`
+ */
+
+const failedTestToggle = () => {
+  const hasStyles = top?.document.querySelector('#runFailedStyle');
+  const hasToggleButton = top?.document.querySelector('#runFailedToggle');
+  const defaultStyles = `
+        .reporter header {
+          overflow: visible;
+          z-index: 2;
+        }
+        #runFailedControls {
+          position: relative;
+          display: inline-block;
+        }
+        #runFailedToggle {
+          display: none;
+        }
+        #runFailedControls label {
+          background-color: transparent;
+          padding-top: 5px;
+        }
+        #runFailedControls #runFailedTooltip {
+          visibility: hidden;
+          width: 134px;
+          background-color: #f3f4fa;
+          color: #1b1e2e;
+          text-align: center;
+          padding: 5px;
+          border-radius: 3px;
+          position: absolute;
+          z-index: 1;
+          top: 27px;
+          left: 0px;
+          height: 28px;
+        }
+        #runFailedControls:hover #runFailedTooltip {
+          visibility: visible;
+        }
+        #runFailedButton #runFailedLabel {
+          cursor: pointer;
+        }
+        #runFailedTooltip::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(#runFailed:checked) .command.command-name-request:has(.command-is-event) {
+          display:none
+        }
+        `;
+  const turnOffRunFailedIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#f59aa9" class="bi bi-filter-circle" viewBox="0 0 16 16">
+      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+      <path d="M7 11.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5"/>
+    </svg>`;
+
+  const turnOnRunFailedIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#f59aa9" class="bi bi-filter-circle-fill" viewBox="0 0 16 16">
+      <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16M3.5 5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1M5 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m2 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5"/>
+    </svg>`;
+
+  const turnOffRunFailedDescription = 'Filter failed tests';
+  const turnOnRunFailedDescription = 'Unfilter failed tests';
+
+  // append styles
+  if (!hasStyles) {
+    const reporterEl = top?.document.querySelector('#unified-reporter');
+    const reporterStyleEl = document.createElement('style');
+    reporterStyleEl.setAttribute('id', 'runFailedStyle');
+    reporterStyleEl.innerHTML = defaultStyles;
+    reporterEl?.appendChild(reporterStyleEl);
+  }
+
+  if (!hasToggleButton) {
+    const header = 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', 'runFailedToggle');
+    headerToggleLabel.setAttribute('for', 'runFailedToggle');
+    headerToggleLabel.setAttribute('id', 'runFailedLabel');
+    headerToggleLabel.innerHTML = turnOffRunFailedIcon;
+
+    headerToggleDiv.setAttribute('class', 'controls');
+    headerToggleDiv.setAttribute('id', 'runFailedControls');
+    headerToggleTooltip.setAttribute('id', 'runFailedTooltip');
+    headerToggleTooltip.innerText = turnOffRunFailedDescription;
+    headerToggleButton.setAttribute('aria-label', turnOffRunFailedDescription);
+    headerToggleButton.setAttribute('id', 'runFailedButton');
+
+    header?.appendChild(headerToggleDiv);
+    headerToggleDiv?.appendChild(headerToggleSpan);
+    headerToggleDiv?.appendChild(headerToggleTooltip);
+    headerToggleSpan?.appendChild(headerToggleButton);
+    headerToggleButton?.appendChild(headerToggleInput);
+    headerToggleButton?.appendChild(headerToggleLabel);
+  }
+
+  const runFailedElement = top.document.querySelector('#runFailedToggle');
+  const runFailedLabelElement = top.document.querySelector(
+    '[for=runFailedToggle]'
+  );
+  const runFailedTooltipElement =
+    top.document.querySelector('#runFailedTooltip');
+
+  runFailedElement?.addEventListener('change', (e) => {
+    const stopBtn = window.top.document.querySelector('.reporter .stop');
+
+    if (e.target.checked) {
+      if (stopBtn) {
+        stopBtn.click();
+      }
+      // when checked, grep only failed tests in spec
+      grepFailed();
+
+      runFailedLabelElement.innerHTML = turnOnRunFailedIcon;
+      runFailedTooltipElement.innerHTML = turnOnRunFailedDescription;
+    } else {
+      if (stopBtn) {
+        stopBtn.click();
+      }
+      // when unchecked, ungrep and show all tests in spec
+      Cypress.grep();
+      runFailedLabelElement.innerHTML = turnOffRunFailedIcon;
+      runFailedTooltipElement.innerHTML = turnOffRunFailedDescription;
+    }
+  });
+  // 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 sidebarRunsLinkPage = window.top?.document.querySelector(
+        '[data-cy="sidebar-link-runs-page"]'
+      );
+      const runFailedToggleElement =
+        window.top?.document.querySelector('#runFailedToggle');
+
+      if (
+        window.top?.document.URL !=
+          sidebarRunsLinkPage.getAttribute('data-url') &&
+        runFailedToggleElement.checked
+      ) {
+        runFailedToggleElement.click();
+      }
+
+      sidebarRunsLinkPage.setAttribute('data-url', window.top?.document.URL);
+    });
+  }
+};
+
+module.exports = failedTestToggle;