/
injectHTML.test.ts
110 lines (101 loc) · 3.68 KB
/
injectHTML.test.ts
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
import { withBrowser } from 'pleasantest';
test(
'injectHTML',
withBrowser(async ({ utils, page }) => {
const getHTML = () =>
page.evaluate(() => document.documentElement.innerHTML.trim());
await utils.injectHTML('<div>Hi</div>');
expect(await getHTML()).toMatchInlineSnapshot(`
"<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:;base64,=">
<title>pleasantest</title>
</head>
<body><div>Hi</div></body>"
`);
// It should fully override existing content
await utils.injectHTML('<div>Hiya</div>');
expect(await getHTML()).toMatchInlineSnapshot(`
"<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:;base64,=">
<title>pleasantest</title>
</head>
<body><div>Hiya</div></body>"
`);
// Executes scripts by default
await utils.injectHTML(`
<div>hello</div>
<script>document.querySelector('div').textContent = 'changed'</script>
`);
expect(await getHTML()).toMatchInlineSnapshot(`
"<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:;base64,=">
<title>pleasantest</title>
</head>
<body>
<div>changed</div>
<script>document.querySelector('div').textContent = 'changed'</script>
</body>"
`);
// Can pass option to not execute
await utils.injectHTML(
`
<div>hello</div>
<script foo="bar" asdf>document.querySelector('div').textContent = 'changed'</script>
`,
{ executeScriptTags: false },
);
expect(await getHTML()).toMatchInlineSnapshot(`
"<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:;base64,=">
<title>pleasantest</title>
</head>
<body>
<div>hello</div>
<script foo="bar" asdf="">document.querySelector('div').textContent = 'changed'</script>
</body>"
`);
// Stuff in <head> should be left as-is and not re-executed after injectHTML is called again below
await page.evaluate(() => {
const script = document.createElement('script');
script.text =
'document.body.querySelector("div").innerHTML = "changed from script in head"';
document.head.append(script);
});
expect(await getHTML()).toMatchInlineSnapshot(`
"<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:;base64,=">
<title>pleasantest</title>
<script>document.body.querySelector("div").innerHTML = "changed from script in head"</script></head>
<body>
<div>changed from script in head</div>
<script foo="bar" asdf="">document.querySelector('div').textContent = 'changed'</script>
</body>"
`);
await utils.injectHTML(
`
<div>injected HTML</div>
`,
);
expect(await getHTML()).toMatchInlineSnapshot(`
"<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:;base64,=">
<title>pleasantest</title>
<script>document.body.querySelector("div").innerHTML = "changed from script in head"</script></head>
<body>
<div>injected HTML</div>
</body>"
`);
}),
);