diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_shadowdom_copy_paths.js | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_copy_paths.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_copy_paths.js new file mode 100644 index 0000000000..81af9ea3f0 --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_copy_paths.js @@ -0,0 +1,80 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that using copyCssPath, copyXPath and copyUniqueSelector with an element under a +// shadow root returns values relevant to the selected element, and relative to the shadow +// root. + +const TEST_URL = `data:text/html;charset=utf-8, + <test-component></test-component> + + <script> + 'use strict'; + customElements.define('test-component', class extends HTMLElement { + constructor() { + super(); + let shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.innerHTML = \` + <div id="el1"> + <span></span> + <span></span> + <span></span> + </div>\`; + } + }); + </script>`; + +add_task(async function () { + const { inspector } = await openInspectorForURL(TEST_URL); + const { markup } = inspector; + + info("Find and expand the test-component shadow DOM host."); + const hostFront = await getNodeFront("test-component", inspector); + const hostContainer = markup.getContainer(hostFront); + await expandContainer(inspector, hostContainer); + + info("Expand the shadow root"); + const shadowRootContainer = hostContainer.getChildContainers()[0]; + await expandContainer(inspector, shadowRootContainer); + + info("Select the div under the shadow root"); + const divContainer = shadowRootContainer.getChildContainers()[0]; + await selectNode(divContainer.node, inspector); + + info("Check the copied values for the various copy*Path helpers"); + await waitForClipboardPromise( + () => inspector.markup.contextMenu._copyXPath(), + '//*[@id="el1"]' + ); + await waitForClipboardPromise( + () => inspector.markup.contextMenu._copyCssPath(), + "div#el1" + ); + await waitForClipboardPromise( + () => inspector.markup.contextMenu._copyUniqueSelector(), + "#el1" + ); + + info("Expand the div"); + await expandContainer(inspector, divContainer); + + info("Select the third span"); + const spanContainer = divContainer.getChildContainers()[2]; + await selectNode(spanContainer.node, inspector); + + info("Check the copied values for the various copy*Path helpers"); + await waitForClipboardPromise( + () => inspector.markup.contextMenu._copyXPath(), + "/div/span[3]" + ); + await waitForClipboardPromise( + () => inspector.markup.contextMenu._copyCssPath(), + "div#el1 span" + ); + await waitForClipboardPromise( + () => inspector.markup.contextMenu._copyUniqueSelector(), + "#el1 > span:nth-child(3)" + ); +}); |