diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_inspect_mutated_node.js | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_inspect_mutated_node.js b/devtools/client/inspector/test/browser_inspector_inspect_mutated_node.js new file mode 100644 index 0000000000..f43fc0bf6f --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_inspect_mutated_node.js @@ -0,0 +1,72 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Check that Inspect Element works even if the selector of the inspected +// element changes after opening the context menu. +// For this test, we explicitly move the element when opening the context menu. + +const TEST_URL = + `data:text/html;charset=utf-8,` + + encodeURIComponent(` + + <div id="parent-1"> + <span>Inspect me</span> + </div> + <div id="parent-2"></div> + <div id="changing-id">My ID will change</div> + + <script type="text/javascript"> + document.querySelector("span").addEventListener("contextmenu", () => { + // Right after opening the context menu, move the target element in the + // tree to change its selector. + window.setTimeout(() => { + const span = document.querySelector("span"); + document.getElementById("parent-2").appendChild(span); + }, 0) + }); + + document.querySelector("#changing-id").addEventListener("contextmenu", () => { + // Right after opening the context menu, update the id of #changing-id + // to make sure we are not relying on outdated selectors to find the node + window.setTimeout(() => { + document.querySelector("#changing-id").id= "new-id"; + }, 0) + }); + </script> +`); + +add_task(async function () { + await addTab(TEST_URL); + await testNodeWithChangingPath(); + await testNodeWithChangingId(); +}); + +async function testNodeWithChangingPath() { + info("Test that inspect element works if the CSS path changes"); + const inspector = await clickOnInspectMenuItem("span"); + + const selectedNode = inspector.selection.nodeFront; + ok(selectedNode, "A node is selected in the inspector"); + is( + selectedNode.tagName.toLowerCase(), + "span", + "The selected node is correct" + ); + const parentNode = await selectedNode.parentNode(); + is( + parentNode.id, + "parent-2", + "The selected node is under the expected parent node" + ); +} + +async function testNodeWithChangingId() { + info("Test that inspect element works if the id changes"); + const inspector = await clickOnInspectMenuItem("#changing-id"); + + const selectedNode = inspector.selection.nodeFront; + ok(selectedNode, "A node is selected in the inspector"); + is(selectedNode.id.toLowerCase(), "new-id", "The selected node is correct"); +} |