1 files changed, 145 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_screenshot_command_selector.js b/devtools/client/webconsole/test/browser/browser_jsterm_screenshot_command_selector.js
new file mode 100644
index 0000000000..c6e35add8d
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_jsterm_screenshot_command_selector.js
@@ -0,0 +1,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();
+});