cypress-plugin-last-failed 2.0.9 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-plugin-last-failed",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "description": "Cypress plugin to rerun last failed tests in cypress run and open mode",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
@@ -18,8 +18,8 @@
     "cypress-plugin"
   ],
   "devDependencies": {
-    "@bahmutov/cy-grep": "^2.0.22",
-    "cypress": "^13.9.0"
+    "@bahmutov/cy-grep": "^2.0.37",
+    "cypress": "^15.4.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/toggle.js

@@ -50,23 +50,27 @@ const failedTestToggle = () => {
         #runFailedControls label {
           background-color: transparent;
           padding-top: 5px;
+          padding-right: 2px;
         }
         #runFailedControls #runFailedTooltip {
           visibility: hidden;
-          width: 134px;
+          width: 150px;
           background-color: #f3f4fa;
           color: #1b1e2e;
           text-align: center;
           padding: 5px;
           border-radius: 3px;
           position: absolute;
-          z-index: 1;
-          top: 27px;
-          left: 0px;
+          z-index: 99999;
+          top: 33px;
+          right: -2px;
           height: 28px;
+          overflow: visible;
         }
         #runFailedControls:hover #runFailedTooltip {
           visibility: visible;
+          z-index: 99999;
+          overflow: visible;
         }
         #runFailedButton #runFailedLabel {
           cursor: pointer;
@@ -75,15 +79,20 @@ const failedTestToggle = () => {
           content: " ";
           position: absolute;
           bottom: 100%;  /* At the top of the tooltip */
-          right: 85%;
+          left: 89%;
+          z-index: 99999;
           margin-left: -5px;
           border-width: 5px;
           border-style: solid;
+          overflow: visible;
           border-color: transparent transparent #f3f4fa transparent;
         }
         .reporter:has(#runFailed:checked) .command.command-name-request:has(.command-is-event) {
           display:none
         }
+        .spec-container {
+          overflow: visible !important
+        }
         `;
   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"/>
@@ -99,15 +108,27 @@ const failedTestToggle = () => {
 
   // append styles
   if (!hasStyles) {
-    const reporterEl = top?.document.querySelector('#unified-reporter');
+    let reporterEl;
     const reporterStyleEl = document.createElement('style');
+    if (Cypress.version >= '15.0.0') {
+      reporterEl = window.top?.document.querySelector('.runnable-header');
+    } else {
+      reporterEl = window.top?.document.querySelector('#unified-reporter');
+    }
     reporterStyleEl.setAttribute('id', 'runFailedStyle');
     reporterStyleEl.innerHTML = defaultStyles;
     reporterEl?.appendChild(reporterStyleEl);
   }
 
   if (!hasToggleButton) {
-    const header = top?.document.querySelector('#unified-reporter header');
+    let header;
+    if (Cypress.version >= '15.0.0') {
+      // TODO: Cypress v15 GUI provides option for Cypress Studio which pushes the grep toggle button around the UI
+      // For simplicity, moving the toggle button to the spec container above the stop button
+      header = window.top?.document.querySelector('.runnable-header');
+    } else {
+      header = window.top?.document.querySelector('#unified-reporter header');
+    }
     const headerToggleDiv = document.createElement('div');
     const headerToggleSpan = document.createElement('span');
     const headerToggleTooltip = document.createElement('span');