1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Testing getNodeFrontSelectorsFromTopDocument
add_task(async () => {
const html = `
<html>
<head>
<meta charset="utf8">
<title>Test</title>
</head>
<body>
<header>
<span>hello</span>
<span>world</span>
</header>
<main>
<iframe src="data:text/html,${encodeURIComponent(
"<html><body><h2 class='frame-child'>foo</h2></body></html>"
)}"></iframe>
</main>
<footer></footer>
<test-component>
<div slot="slot1" id="el1">content</div>
</test-component>
<script>
'use strict';
customElements.define('test-component', class extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<slot class="slot-class" name="slot1"></slot>';
}
});
</script>
</body>
</html>`;
const tab = await addTab("data:text/html," + encodeURIComponent(html));
const commands = await CommandsFactory.forTab(tab);
await commands.targetCommand.startListening();
const walker = (
await commands.targetCommand.targetFront.getFront("inspector")
).walker;
const checkSelectors = (...args) =>
checkSelectorsFromTopDocumentForNode(commands, ...args);
let node = await getNodeFrontInFrames(["meta"], { walker });
await checkSelectors(
node,
["head > meta:nth-child(1)"],
"Got expected selectors for the top-level meta node"
);
node = await getNodeFrontInFrames(["body"], { walker });
await checkSelectors(
node,
["body"],
"Got expected selectors for the top-level body node"
);
node = await getNodeFrontInFrames(["header > span"], { walker });
await checkSelectors(
node,
["body > header:nth-child(1) > span:nth-child(1)"],
"Got expected selectors for the top-level span node"
);
node = await getNodeFrontInFrames(["iframe"], { walker });
await checkSelectors(
node,
["body > main:nth-child(2) > iframe:nth-child(1)"],
"Got expected selectors for the iframe node"
);
node = await getNodeFrontInFrames(["iframe", "body"], { walker });
await checkSelectors(
node,
["body > main:nth-child(2) > iframe:nth-child(1)", "body"],
"Got expected selectors for the iframe body node"
);
const hostFront = await getNodeFront("test-component", { walker });
const { nodes } = await walker.children(hostFront);
const shadowRoot = nodes.find(hostNode => hostNode.isShadowRoot);
node = await walker.querySelector(shadowRoot, ".slot-class");
await checkSelectors(
node,
["body > test-component:nth-child(4)", ".slot-class"],
"Got expected selectors for the shadow dom node"
);
await commands.destroy();
});
async function checkSelectorsFromTopDocumentForNode(
commands,
nodeFront,
expectedSelectors,
assertionText
) {
const selectors =
await commands.inspectorCommand.getNodeFrontSelectorsFromTopDocument(
nodeFront
);
is(
JSON.stringify(selectors),
JSON.stringify(expectedSelectors),
assertionText
);
}
|
