Merge pull request #11 from filiphric/9-error-reading-setattribute-in-cypress-v1300

9 error reading setattribute in cypress v1300

Author: filiphric

.gitignore

@@ -1,2 +1,4 @@
 node_modules/
-dist/
+dist/
+cypress/videos
+cypress/screenshots

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## 1.2.0 (2024-02-18)
+
+
+### Features
+
+* initial commit ([e16eba0](https://github.com/filiphric/cypress-plugin-xhr-toggle/commits/e16eba04542322227a6ce29bab8e217a016e7f95))
+
 ## 1.1.0 (2023-02-16)
 
 

cypress.config.ts

@@ -1,13 +1,17 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { defineConfig } from "cypress";
+import { plugin as replayPlugin } from "@replayio/cypress";
 
 export default defineConfig({
   fixturesFolder: false,
   e2e: {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
-    env: {
-      hideXhr: true
-    }
+      replayPlugin(on, config, {
+        upload: true,
+        apiKey: process.env.REPLAY_API_KEY,
+      });
+      return config;
+     },
   },
 });

cypress/e2e/spec.cy.ts

@@ -1,5 +1,5 @@
 it('test', () => {
 
-  expect(true).to.be.true
+  cy.visit('/server/index.html')
 
 });

cypress/support/e2e.ts

@@ -1 +1,2 @@
 import '../../dist/index'
+import '@replayio/cypress/support';

dist/addStyles.js

@@ -1,5 +1,4 @@
 export const addStyles = () => {
-    const { $ } = Cypress;
     const hasStyles = top === null || top === void 0 ? void 0 : top.document.querySelector('#xhrStyle');
     const hasToggleButton = top === null || top === void 0 ? void 0 : top.document.querySelector('#xhrToggle');
     const defaultStyles = `
@@ -45,6 +44,9 @@ export const addStyles = () => {
     border-style: solid;
     border-color: transparent transparent #f3f4fa transparent;
   }
+  .reporter:has(#xhrToggle:checked) .command.command-name-request:has(.command-is-event) {
+    display:none
+  }
   `;
     const turnOffXhrIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="#afb3c7" d="M12 6.5c2.76 0 5 2.24 5 5c0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16a.996.996 0 0 0 0 1.41l1.97 1.97A11.892 11.892 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72a.996.996 0 1 0 1.41-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5c0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57c0 1.66 1.34 3 3 3c.2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 0 0-2.64-2.64l2.64 2.64z"/></svg>`;
     const turnOnXhrIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="#afb3c7" d="M12 4C7 4 2.73 7.11 1 11.5C2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3z"/></svg>`;
@@ -82,37 +84,32 @@ export const addStyles = () => {
         headerToggleButton === null || headerToggleButton === void 0 ? void 0 : headerToggleButton.appendChild(headerToggleInput);
         headerToggleButton === null || headerToggleButton === void 0 ? void 0 : headerToggleButton.appendChild(headerToggleLabel);
     }
-    const xhrToggleElement = top === null || top === void 0 ? void 0 : top.document.querySelector('#xhrToggle');
-    const xhrToggleLabelElement = top === null || top === void 0 ? void 0 : top.document.querySelector('[for=xhrToggle]');
-    const xhrTooltipElement = top === null || top === void 0 ? void 0 : top.document.querySelector('#xhrTooltip');
-    const hideXhr = () => {
-        $("#unified-reporter", top === null || top === void 0 ? void 0 : top.document).find(".command.command-name-request").has(".command-is-event").css("display", "none");
-        xhrToggleLabelElement.innerHTML = turnOnXhrIcon;
-        xhrTooltipElement.innerHTML = turnOnXhrDescription;
-    };
-    const showXhr = () => {
-        $("#unified-reporter", top === null || top === void 0 ? void 0 : top.document).find(".command.command-name-request").has(".command-is-event").css("display", "block");
-        xhrToggleLabelElement.innerHTML = turnOffXhrIcon;
-        xhrTooltipElement.innerHTML = turnOffXhrDescription;
-    };
-    if (Cypress.env('hideXhr')) {
-        xhrToggleElement.setAttribute('checked', 'true');
-        Cypress.on('log:added', () => {
-            hideXhr();
-        });
-    }
-    else {
-        // just to be on the safe side when changing hideXhr variable
-        xhrToggleElement.setAttribute('checked', 'false');
-        showXhr();
+    const xhrToggleElement = top.document.querySelector('#xhrToggle');
+    const xhrToggleLabelElement = top.document.querySelector('[for=xhrToggle]');
+    const xhrTooltipElement = top.document.querySelector('#xhrTooltip');
+    if (xhrToggleElement && xhrToggleLabelElement && xhrTooltipElement) {
+        if (Cypress.env('hideXhr') === true || Cypress.env('hideXhr') === undefined) {
+            xhrToggleElement.checked = true;
+            xhrToggleLabelElement.innerHTML = turnOnXhrIcon;
+            xhrTooltipElement.innerHTML = turnOnXhrDescription;
+        }
+        else {
+            xhrToggleElement.checked = false;
+            xhrToggleLabelElement.innerHTML = turnOffXhrIcon;
+            xhrTooltipElement.innerHTML = turnOffXhrDescription;
+        }
     }
-    xhrToggleElement.addEventListener('change', (e) => {
+    xhrToggleElement === null || xhrToggleElement === void 0 ? void 0 : xhrToggleElement.addEventListener('change', (e) => {
         // @ts-ignore errors about HTMLElement
         if (e.target.checked) {
-            hideXhr();
+            // when checked, xhr elements are hidden
+            xhrToggleLabelElement.innerHTML = turnOnXhrIcon;
+            xhrTooltipElement.innerHTML = turnOnXhrDescription;
         }
         else {
-            showXhr();
+            // when unchecked, xhr elements are visible
+            xhrToggleLabelElement.innerHTML = turnOffXhrIcon;
+            xhrTooltipElement.innerHTML = turnOffXhrDescription;
         }
     });
 };