chore: Trying to resolve issue with 404 on chrome driver installation (…

…#633)
dmtrKovalenko · Feb 16, 2024 · a5ec233 · a5ec233
1 parent 89812b4
commit a5ec233
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 20 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,6 +1,6 @@
 version: 2.1
 orbs:
-  cypress: cypress-io/cypress@3.1.4
+  cypress: cypress-io/cypress@3.3.0
 jobs:
   install:
     executor: cypress/default

diff --git a/cypress/e2e/press.cy.ts b/cypress/e2e/press.cy.ts
@@ -1,12 +1,7 @@
 describe("cy.realPress", { retries: 10 }, () => {
   it("Can type into an input", () => {
-    cy.intercept("http://presstest.com/", (req) => {
-      const html = document.implementation.createHTMLDocument();
-      html.body.innerHTML = `<input type="text">`;
-      req.reply(html.documentElement.innerHTML);
-    });
-    cy.visit("http://presstest.com/");
-    cy.get("input").focus();
+    cy.visit("https://w3c.github.io/uievents/tools/key-event-viewer");
+    cy.get("#input").focus();
 
     cy.realPress("c");
     cy.realPress("y");
@@ -20,18 +15,13 @@ describe("cy.realPress", { retries: 10 }, () => {
   });
 
   it("Can fire native Tab focus switch", () => {
-    cy.intercept("http://presstest.com/", (req) => {
-      const html = document.implementation.createHTMLDocument();
-      html.body.innerHTML = [
-        `<input type="text">`,
-        `<button type="button">Click me</button>`,
-      ].join("");
-      req.reply(html.documentElement.innerHTML);
-    });
-    cy.visit("http://presstest.com/");
-    cy.get("input").click();
-    cy.realPress("Tab");
-    cy.get("button").should("be.focused");
+    cy.visit("./cypress/fixtures/focus-order.html");
+    cy.window().focus();
+    cy.get("#tab1").realPress("Tab"); // focus switches to tab2
+    cy.get("#tab2").should("have.class", "active");
+
+    cy.get("#tab2").realPress("Tab"); // focus switches to tab3
+    cy.get("#tab3").should("have.class", "active");
   });
 
   context("Keyboard a11y testing", () => {

diff --git a/cypress/fixtures/focus-order.html b/cypress/fixtures/focus-order.html
@@ -0,0 +1,66 @@
+<!-- ChatGPT did this -->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+
+    .tabs {
+      display: flex;
+    }
+
+    .tab-button {
+      border: 1px solid #ccc;
+      padding: 10px;
+      cursor: pointer;
+      flex: 1;
+      text-align: center;
+      background-color: #f0f0f0;
+    }
+
+    .tab-button.active {
+      background-color: #fff;
+    }
+
+    .tab-content {
+      border: 1px solid #ccc;
+      padding: 10px;
+      display: none;
+    }
+
+    .tab-content.active {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="tabs">
+    <div id="tab1" class="tab-button active" tabindex="0">Tab 1</div>
+    <div id="tab2" class="tab-button" tabindex="1">Tab 2</div>
+    <div id="tab3" class="tab-button" tabindex="2">Tab 3</div>
+  </div>
+  <div id="content1" class="tab-content active">Content 1</div>
+  <div id="content2" class="tab-content">Content 2</div>
+  <div id="content3" class="tab-content">Content 3</div>
+
+  <script>
+    let tabs = document.querySelectorAll('.tab-button');
+    let contents = document.querySelectorAll('.tab-content');
+
+    tabs.forEach((tab, index) => {
+      tab.addEventListener('focus', () => {
+        tabs.forEach(t => t.classList.remove('active'));
+        contents.forEach(c => c.classList.remove('active'));
+
+        tab.classList.add('active');
+        contents[index].classList.add('active');
+      });
+    });
+  </script>
+</body>
+
+</html>