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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
// Test that screenshot command works properly with the --selector arg
"use strict";
const TEST_URI =
"http://example.com/browser/devtools/client/webconsole/" +
"test/browser/test_jsterm_screenshot_command.html";
// on some machines, such as macOS, dpr is set to 2. This is expected behavior, however
// to keep tests consistant across OSs we are setting the dpr to 1
const dpr = "--dpr 1";
add_task(async function () {
await pushPref("devtools.webconsole.input.context", true);
const hud = await openNewTabAndConsole(TEST_URI);
info("wait for the iframes to be loaded");
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => {
await ContentTaskUtils.waitForCondition(
() => content.document.querySelectorAll(".loaded-iframe").length == 2
);
});
info("Test :screenshot --selector iframe");
const sameOriginIframeScreenshotFile = new FileUtils.File(
PathUtils.join(
PathUtils.tempDir,
"TestScreenshotFile-same-origin-iframe.png"
)
);
await executeAndWaitForMessageByType(
hud,
`:screenshot --selector #same-origin-iframe ${sameOriginIframeScreenshotFile.path} ${dpr}`,
`Saved to ${sameOriginIframeScreenshotFile.path}`,
".console-api"
);
let fileExists = sameOriginIframeScreenshotFile.exists();
if (!fileExists) {
throw new Error(`${sameOriginIframeScreenshotFile.path} does not exist`);
}
ok(
fileExists,
`Screenshot was saved to ${sameOriginIframeScreenshotFile.path}`
);
info("Create an image using the downloaded file as source");
let image = new Image();
image.src = PathUtils.toFileURI(sameOriginIframeScreenshotFile.path);
await once(image, "load");
info("Check that the node was rendered as expected in the screenshot");
checkImageColorAt({
image,
y: 0,
expectedColor: `rgb(255, 255, 0)`,
label:
"The top-left corner has the expected color, matching the same-origin iframe",
});
// Remove the downloaded screenshot file and cleanup downloads
await IOUtils.remove(sameOriginIframeScreenshotFile.path);
await resetDownloads();
info("Check using :screenshot --selector in a remote-iframe context");
// Select the remote iframe in the context selector
const evaluationContextSelectorButton = hud.ui.outputNode.querySelector(
".webconsole-evaluation-selector-button"
);
if (!isFissionEnabled() && !isEveryFrameTargetEnabled()) {
is(
evaluationContextSelectorButton,
null,
"context selector is only displayed when Fission or EFT is enabled"
);
return;
}
const remoteIframeUrl = await SpecialPowers.spawn(
gBrowser.selectedBrowser,
[],
async () => {
return content.document.querySelector("#remote-iframe").src;
}
);
selectTargetInContextSelector(hud, remoteIframeUrl);
await waitFor(() =>
evaluationContextSelectorButton.innerText.includes("example.org")
);
const remoteIframeSpanScreenshot = new FileUtils.File(
PathUtils.join(PathUtils.tempDir, "TestScreenshotFile-remote-iframe.png")
);
await executeAndWaitForMessageByType(
hud,
`:screenshot --selector span ${remoteIframeSpanScreenshot.path} ${dpr}`,
`Saved to ${remoteIframeSpanScreenshot.path}`,
".console-api"
);
fileExists = remoteIframeSpanScreenshot.exists();
if (!fileExists) {
throw new Error(`${remoteIframeSpanScreenshot.path} does not exist`);
}
ok(fileExists, `Screenshot was saved to ${remoteIframeSpanScreenshot.path}`);
info("Create an image using the downloaded file as source");
image = new Image();
image.src = PathUtils.toFileURI(remoteIframeSpanScreenshot.path);
await once(image, "load");
info("Check that the node was rendered as expected in the screenshot");
checkImageColorAt({
image,
y: 0,
expectedColor: `rgb(0, 100, 0)`,
label:
"The top-left corner has the expected color, matching the span inside the iframe",
});
info(
"Check that using a selector that doesn't match any element displays a warning in console"
);
await executeAndWaitForMessageByType(
hud,
`:screenshot --selector #this-element-does-not-exist`,
`The ‘#this-element-does-not-exist’ selector does not match any element on the page.`,
".warn"
);
ok(
true,
"A warning message is emitted when the passed selector doesn't match any element"
);
// Remove the downloaded screenshot file and cleanup downloads
await IOUtils.remove(remoteIframeSpanScreenshot.path);
await resetDownloads();
});
|
