Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"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)"
);
});