summaryrefslogtreecommitdiffstats
path: root/devtools/client/webconsole/test/browser/browser_jsterm_screenshot_command_file.js
blob: f872745bbdc9ee1d652ed758ddbc8503e30e859e (plain)
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
/* Any copyright is dedicated to the Public Domain.
 * http://creativecommons.org/publicdomain/zero/1.0/ */

// Test that screenshot command works properly

"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 () {
  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 to file");
  const file = new FileUtils.File(
    PathUtils.join(PathUtils.tempDir, "TestScreenshotFile.png")
  );
  const command = `:screenshot ${file.path} ${dpr}`;
  await executeAndWaitForMessageByType(
    hud,
    command,
    `Saved to ${file.path}`,
    ".console-api"
  );

  const fileExists = file.exists();
  if (!fileExists) {
    throw new Error(`${file.path} does not exist`);
  }

  ok(fileExists, `Screenshot was saved to ${file.path}`);

  info("Create an image using the downloaded file as source");
  const image = new Image();
  image.src = PathUtils.toFileURI(file.path);
  await once(image, "load");

  // The page has the following structure
  // +--------------------------------------------------+
  // |        Fixed header [50px tall, red]             |
  // +--------------------------------------------------+
  // | Same-origin iframe [50px tall, rgb(255, 255, 0)] |
  // +--------------------------------------------------+
  // |    Remote iframe [50px tall, rgb(0, 255, 255)]   |
  // +--------------------------------------------------+
  // |  Image  |
  // |  100px  |
  // |         |
  // +---------+

  info("Check that the header is rendered in the screenshot");
  checkImageColorAt({
    image,
    y: 0,
    expectedColor: `rgb(255, 0, 0)`,
    label:
      "The top-left corner has the expected red color, matching the header element",
  });

  info("Check that the same-origin iframe is rendered in the screenshot");
  checkImageColorAt({
    image,
    y: 60,
    expectedColor: `rgb(255, 255, 0)`,
    label: "The same-origin iframe is rendered properly in the screenshot",
  });

  info("Check that the remote iframe is rendered in the screenshot");
  checkImageColorAt({
    image,
    y: 110,
    expectedColor: `rgb(0, 255, 255)`,
    label: "The remote iframe is rendered properly in the screenshot",
  });

  info("Test :screenshot to file default filename");
  const message = await executeAndWaitForMessageByType(
    hud,
    `:screenshot ${dpr}`,
    `Saved to`,
    ".console-api"
  );
  const date = new Date();
  const monthString = (date.getMonth() + 1).toString().padStart(2, "0");
  const dayString = date.getDate().toString().padStart(2, "0");
  const expectedDateString = `${date.getFullYear()}-${monthString}-${dayString}`;

  let screenshotDir;
  try {
    // This will throw if there is not a screenshot directory set for the platform
    screenshotDir = Services.dirsvc.get("Scrnshts", Ci.nsIFile).path;
  } catch (e) {
    const { Downloads } = ChromeUtils.importESModule(
      "resource://gre/modules/Downloads.sys.mjs"
    );
    screenshotDir = await Downloads.getPreferredDownloadsDirectory();
  }

  const { renderedDate, filePath } =
    /Saved to (?<filePath>.*Screen Shot (?<renderedDate>\d{4}-\d{2}-\d{2}) at \d{2}.\d{2}.\d{2}\.png)/.exec(
      message.node.textContent
    ).groups;
  is(
    renderedDate,
    expectedDateString,
    `Screenshot file has expected default name (full message: ${message.node.textContent})`
  );
  is(
    filePath.startsWith(screenshotDir),
    true,
    `Screenshot file is saved in default directory`
  );

  info("Remove the downloaded screenshot files and cleanup downloads");
  await IOUtils.remove(file.path);
  await IOUtils.remove(filePath);
  await resetDownloads();
});