From a78a422bc90e1ba5e581dd9aff11d6ce21ca690c Mon Sep 17 00:00:00 2001
From: Holger Benl <hbenl@evandor.de>
Date: Fri, 1 Mar 2024 15:26:03 +0100
Subject: [PATCH] Switch inspector-elements-03/04 to Chromium example

---
 packages/e2e-tests/examples.json              |  4 +-
 ...-elements-03_nested-node-selection.test.ts |  4 +-
 ...nspector-elements-04_key-shortcuts.test.ts | 53 +++++++++++--------
 3 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/packages/e2e-tests/examples.json b/packages/e2e-tests/examples.json
index 9117dabb55c..6c87c997f9c 100644
--- a/packages/e2e-tests/examples.json
+++ b/packages/e2e-tests/examples.json
@@ -132,8 +132,8 @@
     "buildId": "linux-gecko-20230919-abf2e86b2910-4d0a9f5b9de2"
   },
   "doc_stacking_chromium.html": {
-    "recording": "fa5a2a8b-a095-44ef-83ca-324da9f7bde8",
-    "buildId": "linux-chromium-20240126-c9de98d17d37-50d01be708a2"
+    "recording": "6c3a6dd4-6880-4bfc-ace6-690013421ac3",
+    "buildId": "linux-chromium-20240227-947bd2cd266d-e0f1462455a7"
   },
   "flake/adding-spec.ts": {
     "recording": "a667c000-8432-45d7-b08d-a7e4f5002ecb",
diff --git a/packages/e2e-tests/tests/inspector-elements-03_nested-node-selection.test.ts b/packages/e2e-tests/tests/inspector-elements-03_nested-node-selection.test.ts
index 2583bc96cab..eab55183d70 100644
--- a/packages/e2e-tests/tests/inspector-elements-03_nested-node-selection.test.ts
+++ b/packages/e2e-tests/tests/inspector-elements-03_nested-node-selection.test.ts
@@ -19,7 +19,7 @@ import {
 import { debugPrint, waitFor } from "../helpers/utils";
 import test from "../testFixtureCloneRecording";
 
-test.use({ exampleKey: "doc_stacking.html" });
+test.use({ exampleKey: "doc_stacking_chromium.html" });
 // ref: `doc_stacking.html`
 // note the lack of a `>` on each tag string, due to how
 // the elements tree constructs the text for each node
@@ -91,7 +91,7 @@ test("inspector-elements-03: Nested node picker and selection behavior", async (
     `<div style="width: 40px; height: 20px; overflow: hidden;"`
   );
   await typeKeyAndVerifySelectedElement(page, "ArrowUp", `<div style="left: 200px; top: 300px;"`);
-  await typeKeyAndVerifySelectedElement(page, "ArrowUp", bodyChildDomNodes[15]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowUp", "</div>");
 
   // Searching for a nested node should expand everything above it
   await searchElementsPanel(page, "Foo");
diff --git a/packages/e2e-tests/tests/inspector-elements-04_key-shortcuts.test.ts b/packages/e2e-tests/tests/inspector-elements-04_key-shortcuts.test.ts
index f838cbb00da..8139872b664 100644
--- a/packages/e2e-tests/tests/inspector-elements-04_key-shortcuts.test.ts
+++ b/packages/e2e-tests/tests/inspector-elements-04_key-shortcuts.test.ts
@@ -13,7 +13,7 @@ import { closeSidePanel } from "../helpers/pause-information-panel";
 import { waitFor } from "../helpers/utils";
 import test from "../testFixtureCloneRecording";
 
-test.use({ exampleKey: "doc_stacking.html" });
+test.use({ exampleKey: "doc_stacking_chromium.html" });
 // ref: `doc_stacking.html`
 // note the lack of a `>` on each tag string, due to how
 // the elements tree constructs the text for each node
@@ -38,8 +38,6 @@ const bodyChildDomNodes = [
   `<div style="left: 300px; top: 300px;"`,
 ];
 
-const div0ChildDomNodes = [`<div class="box1"`, `<div class="box2"`];
-
 test("inspector-elements-04: Keyboard shortcuts should select the right DOM nodes", async ({
   pageWithMeta: { page, recordingId },
   exampleKey,
@@ -59,45 +57,58 @@ test("inspector-elements-04: Keyboard shortcuts should select the right DOM node
   await bodyTag.click();
   await waitForSelectedElementsRow(page, "body");
 
-  // Basic up/down selects the next element in the tree
+  // Basic up/down selects the next element in the tree and left arrow collapses it
   await typeKeyAndVerifySelectedElement(page, "ArrowDown", bodyChildDomNodes[0]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowLeft", bodyChildDomNodes[0]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowDown", bodyChildDomNodes[1]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowUp", bodyChildDomNodes[0]);
   await typeKeyAndVerifySelectedElement(page, "ArrowDown", bodyChildDomNodes[1]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowLeft", bodyChildDomNodes[1]);
   await typeKeyAndVerifySelectedElement(page, "ArrowDown", bodyChildDomNodes[2]);
-  await typeKeyAndVerifySelectedElement(page, "ArrowUp", bodyChildDomNodes[1]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowLeft", bodyChildDomNodes[2]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowDown", bodyChildDomNodes[3]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowLeft", bodyChildDomNodes[3]);
 
-  const div0Box1 = await getElementsListRow(page, { text: div0ChildDomNodes[0] });
+  const div2ChildNode = '<div class="box1" style="z-index: -1;"';
+  const div2Child = await getElementsListRow(page, { text: div2ChildNode });
 
-  expect(await div0Box1.isVisible()).toBe(false);
+  // Children should now be hidden
+  await waitFor(async () => {
+    expect(await div2Child.isVisible()).toBe(false);
+  });
 
   // Right arrow expands the currently selected element
-  await typeKeyAndVerifySelectedElement(page, "ArrowRight", bodyChildDomNodes[1]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowRight", bodyChildDomNodes[3]);
 
   // Children should now be visible
   await waitFor(async () => {
-    expect(await div0Box1.isVisible()).toBe(true);
+    expect(await div2Child.isVisible()).toBe(true);
   });
 
   // Pressing Down should select the first child, as it's the next row
-  await typeKeyAndVerifySelectedElement(page, "ArrowDown", div0ChildDomNodes[0]);
-  await typeKeyAndVerifySelectedElement(page, "ArrowDown", div0ChildDomNodes[1]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowDown", div2ChildNode);
 
   // Pressing Left jumps back to the parent
-  await typeKeyAndVerifySelectedElement(page, "ArrowLeft", bodyChildDomNodes[1]);
-  // and Right while it's open goes  to the child
-  await typeKeyAndVerifySelectedElement(page, "ArrowRight", div0ChildDomNodes[0]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowLeft", bodyChildDomNodes[3]);
+  // and Right while it's open goes to the child
+  await typeKeyAndVerifySelectedElement(page, "ArrowRight", div2ChildNode);
 
   // Going back to the parent and Left again collapses the node
-  await typeKeyAndVerifySelectedElement(page, "ArrowUp", bodyChildDomNodes[1]);
-  await typeKeyAndVerifySelectedElement(page, "ArrowLeft", bodyChildDomNodes[1]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowUp", bodyChildDomNodes[3]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowLeft", bodyChildDomNodes[3]);
 
   // PageDown should jump down 10 rows
-  await typeKeyAndVerifySelectedElement(page, "PageDown", bodyChildDomNodes[11]);
+  await typeKeyAndVerifySelectedElement(page, "PageDown", bodyChildDomNodes[6]);
 
   // PageUp should jump up 10 rows
-  await typeKeyAndVerifySelectedElement(page, "PageUp", bodyChildDomNodes[1]);
+  await typeKeyAndVerifySelectedElement(page, "PageUp", bodyChildDomNodes[3]);
 
   // If we expand the first child, it should still jump 10 rows total
-  await typeKeyAndVerifySelectedElement(page, "ArrowRight", bodyChildDomNodes[1]);
-  await typeKeyAndVerifySelectedElement(page, "PageDown", bodyChildDomNodes[8]);
-  await typeKeyAndVerifySelectedElement(page, "PageUp", bodyChildDomNodes[1]);
+  await typeKeyAndVerifySelectedElement(page, "ArrowRight", bodyChildDomNodes[3]);
+  await typeKeyAndVerifySelectedElement(
+    page,
+    "PageDown",
+    '<div class="box2" style="position: static;"'
+  );
+  await typeKeyAndVerifySelectedElement(page, "PageUp", bodyChildDomNodes[3]);
 });