Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch inspector-elements-03/04 to Chromium example #10390

Merged
merged 1 commit into from
Mar 1, 2024
Merged

Switch inspector-elements-03/04 to Chromium example #10390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/e2e-tests/examples.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions packages/e2e-tests/tests/inspector-elements-03_nested-node-selection.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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");
Expand Down
53 changes: 32 additions & 21 deletions packages/e2e-tests/tests/inspector-elements-04_key-shortcuts.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -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]);
});
Loading