Skip to content

Commit 56932f7

Browse files
OrKoNDevtools-frontend LUCI CQ
OrKoN
authored and
Devtools-frontend LUCI CQ
committed
[Recorder] inline test page for injected.test.ts
Bug: 402372244 Change-Id: I94ca2b569c79c4a275e381377e7f4816f4161e36 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6448390 Auto-Submit: Alex Rudenko <alexrudenko@chromium.org> Reviewed-by: Nikolay Vitkov <nvitkov@chromium.org> Commit-Queue: Nikolay Vitkov <nvitkov@chromium.org>
1 parent f66dcfb commit 56932f7

File tree

4 files changed

+101
-113
lines changed

4 files changed

+101
-113
lines changed

‎front_end/panels/recorder/injected.test.ts

Lines changed: 101 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,113 @@ import type {Schema} from './models/models.js';
77

88
describe('Injected', () => {
99
let iframe: HTMLIFrameElement|undefined;
10+
// TODO: use smaller test pages per test.
11+
const testPage = `<!DOCTYPE html>
12+
<html>
13+
<head>
14+
<meta charset="UTF-8" />
15+
<meta name="viewport" content="width=device-width" />
16+
<title>Recording Client example</title>
17+
<style>
18+
html, body, * {
19+
margin: 0;
20+
padding: 0;
21+
}
22+
button {
23+
width: 100px;
24+
height: 20px;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
30+
<button aria-role="button" aria-name="testButton" id="button"></button>
31+
<button id="buttonNoARIA"></button>
32+
<button id="buttonWithLength11">length a 11</button>
33+
<button id="buttonWithLength12">length aa 12</button>
34+
<button id="buttonWithLength32">length aaaaaaaaa aaaaaaaaa aa 32</button>
35+
<button id="buttonWithLength33">length aaaaaaaaa aaaaaaaaa aaa 33</button>
36+
<button id="buttonWithLength64">length aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaa 64</button>
37+
<button id="buttonWithLength65">length aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaa 65</button>
38+
<button id="buttonWithNewLines">
39+
with newlines
40+
</button>
41+
<input id="input"></input>
42+
43+
<script>
44+
class ShadowCSSSelectorElement extends HTMLElement {
45+
constructor() {
46+
super();
47+
const shadow = this.attachShadow({mode: 'open'});
48+
shadow.innerHTML = \`
49+
<p>sss</p>
50+
<button id="insideShadowRoot">Login</button>
51+
\`;
52+
}
53+
}
54+
customElements.define('shadow-css-selector-element', ShadowCSSSelectorElement);
55+
56+
class ShadowARIASelectorElement extends HTMLElement {
57+
constructor() {
58+
super();
59+
const shadow = this.attachShadow({mode: 'open'});
60+
shadow.innerHTML = \`
61+
<p>sss</p>
62+
<button aria-role="button" aria-name="login">Login</button>
63+
\`;
64+
}
65+
}
66+
customElements.define('shadow-aria-selector-element', ShadowARIASelectorElement);
67+
</script>
68+
<header>
69+
<shadow-css-selector-element></shadow-css-selector-element>
70+
</header>
71+
<main>
72+
<shadow-css-selector-element></shadow-css-selector-element>
73+
</main>
74+
75+
<div aria-role="header">
76+
<shadow-aria-selector-element></shadow-aria-selector-element>
77+
</div>
78+
<div aria-role="main">
79+
<shadow-aria-selector-element></shadow-aria-selector-element>
80+
</div>
81+
82+
<div aria-name="parent-name">
83+
<div id="no-aria-name-or-role" aria-name="" aria-role="">
84+
</div>
85+
86+
<host-element id="slotted-host-element">
87+
<template shadowrootmode="open">
88+
<slot></slot>
89+
</template>
90+
text in slot
91+
</host-element>
92+
93+
<button class="custom-selector-attribute" data-testid="unique">Custom selector</button>
94+
<button class="custom-selector-attribute" data-testid="123456789">Custom selector (invalid CSS id)</button>
95+
96+
<host-element id="shadow-root-with-custom-selectors" data-qa="custom-id">
97+
<template shadowrootmode="open">
98+
<button data-testid="shadow button">Shadow button with testid</button>>
99+
</template>
100+
</host-element>
101+
102+
<div id="notunique"></div>
103+
<div id="notunique"></div>
104+
</body>
105+
</html>`;
10106

107+
/**
108+
* Loads scripts injected by Recorder into a new iframe to make sure
109+
* they run in dedicated environment.
110+
*/
11111
async function createSandbox(): Promise<Window> {
12112
const url = new URL('./injected/injected.generated.js', import.meta.url);
13113

14114
iframe = document.createElement('iframe');
15115
const {promise, resolve} = Promise.withResolvers();
16-
iframe.src = new URL('../../ui/components/docs/recorder_injected/basic.html', import.meta.url).toString();
116+
iframe.srcdoc = testPage;
17117
iframe.onload = resolve;
18118
document.body.append(iframe);
19119
await promise;

‎front_end/ui/components/docs/BUILD.gn

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ group("docs") {
4242
"./radio_button",
4343
"./recorder_control_button",
4444
"./recorder_create_recording_view",
45-
"./recorder_injected",
4645
"./recorder_recording_list_view",
4746
"./recorder_recording_view",
4847
"./recorder_select_button",

‎front_end/ui/components/docs/recorder_injected/BUILD.gn

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎front_end/ui/components/docs/recorder_injected/basic.html

Lines changed: 0 additions & 100 deletions
This file was deleted.

0 commit comments

Comments
 (0)