@argos-ci/puppeteer 2.2.13 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +4 -6
- package/dist/index.d.ts +12 -3
- package/dist/index.js +211 -0
- package/package.json +10 -11
- package/dist/index.mjs +0 -201
package/dist/index.cjs
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
const argosScreenshot =
|
|
3
|
-
|
|
4
|
-
const { argosScreenshot } = await import('./index.mjs');
|
|
5
|
-
return argosScreenshot(...args);
|
|
1
|
+
const argosScreenshot = async (...args) => {
|
|
2
|
+
const { argosScreenshot } = await import("./index.js");
|
|
3
|
+
return argosScreenshot(...args);
|
|
6
4
|
};
|
|
7
|
-
|
|
5
|
+
|
|
8
6
|
exports.argosScreenshot = argosScreenshot;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { ElementHandle, Page
|
|
2
|
-
import { ViewportOption } from
|
|
1
|
+
import { ScreenshotOptions, ElementHandle, Page } from 'puppeteer';
|
|
2
|
+
import { ViewportOption, StabilizationOptions } from '@argos-ci/browser';
|
|
3
|
+
|
|
3
4
|
/**
|
|
4
5
|
* Accepts all Puppeteer screenshot options and adds Argos-specific options.
|
|
5
6
|
*/
|
|
@@ -27,6 +28,13 @@ type ArgosScreenshotOptions = Omit<ScreenshotOptions, "encoding" | "type" | "omi
|
|
|
27
28
|
* @default 0.5
|
|
28
29
|
*/
|
|
29
30
|
threshold?: number;
|
|
31
|
+
/**
|
|
32
|
+
* Wait for the UI to stabilize before taking the screenshot.
|
|
33
|
+
* Set to `false` to disable stabilization.
|
|
34
|
+
* Pass an object to customize the stabilization.
|
|
35
|
+
* @default true
|
|
36
|
+
*/
|
|
37
|
+
stabilize?: boolean | StabilizationOptions;
|
|
30
38
|
};
|
|
31
39
|
/**
|
|
32
40
|
* Stabilize the UI and takes a screenshot of the application under test.
|
|
@@ -48,4 +56,5 @@ name: string,
|
|
|
48
56
|
* Options for the screenshot.
|
|
49
57
|
*/
|
|
50
58
|
options?: ArgosScreenshotOptions): Promise<void>;
|
|
51
|
-
|
|
59
|
+
|
|
60
|
+
export { type ArgosScreenshotOptions, argosScreenshot };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
// src/index.ts
|
|
2
|
+
import { resolve } from "node:path";
|
|
3
|
+
import { mkdir } from "node:fs/promises";
|
|
4
|
+
import { createRequire } from "node:module";
|
|
5
|
+
import {
|
|
6
|
+
resolveViewport,
|
|
7
|
+
getGlobalScript
|
|
8
|
+
} from "@argos-ci/browser";
|
|
9
|
+
import {
|
|
10
|
+
getScreenshotName,
|
|
11
|
+
readVersionFromPackage,
|
|
12
|
+
validateThreshold,
|
|
13
|
+
writeMetadata
|
|
14
|
+
} from "@argos-ci/util";
|
|
15
|
+
var require2 = createRequire(import.meta.url);
|
|
16
|
+
async function injectArgos(page) {
|
|
17
|
+
const injected = await page.evaluate(
|
|
18
|
+
() => typeof window.__ARGOS__ !== "undefined"
|
|
19
|
+
);
|
|
20
|
+
if (injected) return;
|
|
21
|
+
await page.addScriptTag({ content: getGlobalScript() });
|
|
22
|
+
}
|
|
23
|
+
async function getPuppeteerVersion() {
|
|
24
|
+
const pkgPath = require2.resolve("puppeteer/package.json");
|
|
25
|
+
return readVersionFromPackage(pkgPath);
|
|
26
|
+
}
|
|
27
|
+
async function getArgosPuppeteerVersion() {
|
|
28
|
+
const pkgPath = require2.resolve("@argos-ci/puppeteer/package.json");
|
|
29
|
+
return readVersionFromPackage(pkgPath);
|
|
30
|
+
}
|
|
31
|
+
function getViewport(page) {
|
|
32
|
+
const viewport = page.viewport();
|
|
33
|
+
if (!viewport) {
|
|
34
|
+
throw new Error("Can't take screenshots without a viewport.");
|
|
35
|
+
}
|
|
36
|
+
return viewport;
|
|
37
|
+
}
|
|
38
|
+
async function getBrowserInfo(page) {
|
|
39
|
+
const rawVersion = await page.browser().version();
|
|
40
|
+
const [browserName, browserVersion] = rawVersion.split("/");
|
|
41
|
+
return { browserName, browserVersion };
|
|
42
|
+
}
|
|
43
|
+
async function getScreenshotPath(name) {
|
|
44
|
+
if (name.endsWith(".png")) return name;
|
|
45
|
+
const screenshotFolder = resolve(process.cwd(), "screenshots/argos");
|
|
46
|
+
await mkdir(screenshotFolder, { recursive: true });
|
|
47
|
+
return resolve(screenshotFolder, name + ".png");
|
|
48
|
+
}
|
|
49
|
+
function checkIsFullPage(options) {
|
|
50
|
+
return options.fullPage !== void 0 ? options.fullPage : options.element === void 0;
|
|
51
|
+
}
|
|
52
|
+
async function setViewportSize(page, viewportSize) {
|
|
53
|
+
await page.setViewport(viewportSize);
|
|
54
|
+
await page.waitForFunction(
|
|
55
|
+
({ width, height }) => window.innerWidth === width && window.innerHeight === height,
|
|
56
|
+
{},
|
|
57
|
+
{ width: viewportSize.width, height: viewportSize.height }
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
async function setup(page, options) {
|
|
61
|
+
const { disableHover = true, argosCSS } = options;
|
|
62
|
+
const fullPage = checkIsFullPage(options);
|
|
63
|
+
await page.evaluate(
|
|
64
|
+
({ fullPage: fullPage2, argosCSS: argosCSS2 }) => window.__ARGOS__.setup({ fullPage: fullPage2, argosCSS: argosCSS2 }),
|
|
65
|
+
{ fullPage, argosCSS }
|
|
66
|
+
);
|
|
67
|
+
if (disableHover) {
|
|
68
|
+
await page.mouse.move(0, 0);
|
|
69
|
+
}
|
|
70
|
+
return async () => {
|
|
71
|
+
await page.evaluate(
|
|
72
|
+
({ fullPage: fullPage2, argosCSS: argosCSS2 }) => window.__ARGOS__.teardown({
|
|
73
|
+
fullPage: fullPage2,
|
|
74
|
+
argosCSS: argosCSS2
|
|
75
|
+
}),
|
|
76
|
+
{ fullPage, argosCSS }
|
|
77
|
+
);
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
async function argosScreenshot(page, name, options = {}) {
|
|
81
|
+
const {
|
|
82
|
+
element,
|
|
83
|
+
viewports,
|
|
84
|
+
argosCSS,
|
|
85
|
+
stabilize = true,
|
|
86
|
+
...puppeteerOptions
|
|
87
|
+
} = options;
|
|
88
|
+
if (!page) {
|
|
89
|
+
throw new Error("A Puppeteer `page` object is required.");
|
|
90
|
+
}
|
|
91
|
+
if (!name) {
|
|
92
|
+
throw new Error("The `name` argument is required.");
|
|
93
|
+
}
|
|
94
|
+
const [originalViewport] = await Promise.all([
|
|
95
|
+
getViewport(page),
|
|
96
|
+
// Inject Argos script into the page
|
|
97
|
+
injectArgos(page)
|
|
98
|
+
]);
|
|
99
|
+
const teardown = await setup(page, options);
|
|
100
|
+
const fullPage = checkIsFullPage(options);
|
|
101
|
+
async function collectMetadata() {
|
|
102
|
+
const [
|
|
103
|
+
colorScheme,
|
|
104
|
+
mediaType,
|
|
105
|
+
puppeteerVersion,
|
|
106
|
+
argosPuppeteerVersion,
|
|
107
|
+
{ browserName, browserVersion }
|
|
108
|
+
] = await Promise.all([
|
|
109
|
+
page.evaluate(
|
|
110
|
+
() => window.__ARGOS__.getColorScheme()
|
|
111
|
+
),
|
|
112
|
+
page.evaluate(
|
|
113
|
+
() => window.__ARGOS__.getMediaType()
|
|
114
|
+
),
|
|
115
|
+
getPuppeteerVersion(),
|
|
116
|
+
getArgosPuppeteerVersion(),
|
|
117
|
+
getBrowserInfo(page)
|
|
118
|
+
]);
|
|
119
|
+
const viewport = getViewport(page);
|
|
120
|
+
const metadata = {
|
|
121
|
+
url: page.url(),
|
|
122
|
+
viewport: { width: viewport.width, height: viewport.height },
|
|
123
|
+
colorScheme,
|
|
124
|
+
mediaType,
|
|
125
|
+
test: null,
|
|
126
|
+
browser: browserName || browserVersion ? {
|
|
127
|
+
name: browserName || "unknown",
|
|
128
|
+
version: browserVersion || "unknown"
|
|
129
|
+
} : void 0,
|
|
130
|
+
automationLibrary: {
|
|
131
|
+
name: "puppeteer",
|
|
132
|
+
version: puppeteerVersion
|
|
133
|
+
},
|
|
134
|
+
sdk: {
|
|
135
|
+
name: "@argos-ci/puppeteer",
|
|
136
|
+
version: argosPuppeteerVersion
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
metadata.transient = {};
|
|
140
|
+
if (options?.threshold !== void 0) {
|
|
141
|
+
validateThreshold(options.threshold);
|
|
142
|
+
metadata.transient.threshold = options.threshold;
|
|
143
|
+
}
|
|
144
|
+
return metadata;
|
|
145
|
+
}
|
|
146
|
+
async function stabilizeAndScreenshot(name2) {
|
|
147
|
+
if (stabilize) {
|
|
148
|
+
const stabilizationOptions = typeof stabilize === "object" ? stabilize : {};
|
|
149
|
+
try {
|
|
150
|
+
await page.waitForFunction(
|
|
151
|
+
(options2) => window.__ARGOS__.checkIsStable(options2),
|
|
152
|
+
void 0,
|
|
153
|
+
stabilizationOptions
|
|
154
|
+
);
|
|
155
|
+
} catch (error) {
|
|
156
|
+
const reasons = await page.evaluate(
|
|
157
|
+
(options2) => window.__ARGOS__.getStabilityFailureReasons(options2),
|
|
158
|
+
stabilizationOptions
|
|
159
|
+
);
|
|
160
|
+
throw new Error(
|
|
161
|
+
`
|
|
162
|
+
Failed to stabilize screenshot, found the following issues:
|
|
163
|
+
${reasons.map((reason) => `- ${reason}`).join("\n")}
|
|
164
|
+
`.trim(),
|
|
165
|
+
{ cause: error }
|
|
166
|
+
);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
const [screenshotPath, metadata] = await Promise.all([
|
|
170
|
+
getScreenshotPath(name2),
|
|
171
|
+
collectMetadata()
|
|
172
|
+
]);
|
|
173
|
+
await writeMetadata(screenshotPath, metadata);
|
|
174
|
+
const screenshotOptions = {
|
|
175
|
+
path: screenshotPath,
|
|
176
|
+
type: "png",
|
|
177
|
+
fullPage,
|
|
178
|
+
...puppeteerOptions
|
|
179
|
+
};
|
|
180
|
+
if (element === void 0) {
|
|
181
|
+
await page.screenshot(screenshotOptions);
|
|
182
|
+
return;
|
|
183
|
+
}
|
|
184
|
+
if (typeof element === "string") {
|
|
185
|
+
await page.waitForSelector(element);
|
|
186
|
+
const handle = await page.$(element);
|
|
187
|
+
if (!handle) {
|
|
188
|
+
throw new Error(`Unable to find element ${element}`);
|
|
189
|
+
}
|
|
190
|
+
await handle.screenshot(screenshotOptions);
|
|
191
|
+
return;
|
|
192
|
+
}
|
|
193
|
+
await element.screenshot(screenshotOptions);
|
|
194
|
+
}
|
|
195
|
+
if (viewports) {
|
|
196
|
+
for (const viewport of viewports) {
|
|
197
|
+
const viewportSize = resolveViewport(viewport);
|
|
198
|
+
await setViewportSize(page, viewportSize);
|
|
199
|
+
await stabilizeAndScreenshot(
|
|
200
|
+
getScreenshotName(name, { viewportWidth: viewportSize.width })
|
|
201
|
+
);
|
|
202
|
+
}
|
|
203
|
+
await setViewportSize(page, originalViewport);
|
|
204
|
+
} else {
|
|
205
|
+
await stabilizeAndScreenshot(name);
|
|
206
|
+
}
|
|
207
|
+
await teardown();
|
|
208
|
+
}
|
|
209
|
+
export {
|
|
210
|
+
argosScreenshot
|
|
211
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@argos-ci/puppeteer",
|
|
3
3
|
"description": "Puppeteer SDK for visual testing with Argos.",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.3.0",
|
|
5
5
|
"author": "Smooth Code",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"exports": {
|
|
30
30
|
".": {
|
|
31
31
|
"types": "./dist/index.d.ts",
|
|
32
|
-
"import": "./dist/index.
|
|
32
|
+
"import": "./dist/index.js",
|
|
33
33
|
"require": "./dist/index.cjs",
|
|
34
|
-
"default": "./dist/index.
|
|
34
|
+
"default": "./dist/index.cjs"
|
|
35
35
|
},
|
|
36
36
|
"./package.json": "./package.json"
|
|
37
37
|
},
|
|
@@ -42,12 +42,12 @@
|
|
|
42
42
|
"puppeteer": ">=1"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@argos-ci/browser": "2.
|
|
46
|
-
"@argos-ci/util": "2.
|
|
45
|
+
"@argos-ci/browser": "2.2.0",
|
|
46
|
+
"@argos-ci/util": "2.2.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@argos-ci/cli": "2.
|
|
50
|
-
"@types/jest": "^29.5.
|
|
49
|
+
"@argos-ci/cli": "2.5.0",
|
|
50
|
+
"@types/jest": "^29.5.14",
|
|
51
51
|
"@types/node": "^18.19.44",
|
|
52
52
|
"eslint": "^8.57.0",
|
|
53
53
|
"eslint-plugin-html": "^8.1.1",
|
|
@@ -55,15 +55,14 @@
|
|
|
55
55
|
"jest": "^29.0.1",
|
|
56
56
|
"jest-light-runner": "^0.6.0",
|
|
57
57
|
"jest-puppeteer": "^10.1.0",
|
|
58
|
-
"puppeteer": "^23.
|
|
58
|
+
"puppeteer": "^23.6.0"
|
|
59
59
|
},
|
|
60
60
|
"scripts": {
|
|
61
|
-
"
|
|
62
|
-
"build": "rollup -c",
|
|
61
|
+
"build": "tsup && cp ./src/index.cjs ./dist",
|
|
63
62
|
"jest": "NODE_OPTIONS=--experimental-vm-modules jest",
|
|
64
63
|
"test": "pnpm run jest --runInBand",
|
|
65
64
|
"argos-upload": "pnpm exec argos upload screenshots --build-name \"argos-puppeteer-e2e-node-$NODE_VERSION-$OS\"",
|
|
66
65
|
"e2e": "pnpm run test && pnpm run argos-upload"
|
|
67
66
|
},
|
|
68
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "fe6e055a43e955e7df362ddaec59c84dc274bbb2"
|
|
69
68
|
}
|
package/dist/index.mjs
DELETED
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
import { resolve } from 'node:path';
|
|
2
|
-
import { mkdir } from 'node:fs/promises';
|
|
3
|
-
import { createRequire } from 'node:module';
|
|
4
|
-
import { resolveViewport, getGlobalScript } from '@argos-ci/browser';
|
|
5
|
-
import { getScreenshotName, writeMetadata, validateThreshold, readVersionFromPackage } from '@argos-ci/util';
|
|
6
|
-
|
|
7
|
-
const require = createRequire(import.meta.url);
|
|
8
|
-
/**
|
|
9
|
-
* Inject Argos script into the page.
|
|
10
|
-
*/ async function injectArgos(page) {
|
|
11
|
-
const injected = await page.evaluate(()=>typeof window.__ARGOS__ !== "undefined");
|
|
12
|
-
if (injected) return;
|
|
13
|
-
await page.addScriptTag({
|
|
14
|
-
content: getGlobalScript()
|
|
15
|
-
});
|
|
16
|
-
}
|
|
17
|
-
async function getPuppeteerVersion() {
|
|
18
|
-
const pkgPath = require.resolve("puppeteer/package.json");
|
|
19
|
-
return readVersionFromPackage(pkgPath);
|
|
20
|
-
}
|
|
21
|
-
async function getArgosPuppeteerVersion() {
|
|
22
|
-
const pkgPath = require.resolve("@argos-ci/puppeteer/package.json");
|
|
23
|
-
return readVersionFromPackage(pkgPath);
|
|
24
|
-
}
|
|
25
|
-
function getViewport(page) {
|
|
26
|
-
const viewport = page.viewport();
|
|
27
|
-
if (!viewport) {
|
|
28
|
-
throw new Error("Can't take screenshots without a viewport.");
|
|
29
|
-
}
|
|
30
|
-
return viewport;
|
|
31
|
-
}
|
|
32
|
-
async function getBrowserInfo(page) {
|
|
33
|
-
const rawVersion = await page.browser().version();
|
|
34
|
-
const [browserName, browserVersion] = rawVersion.split("/");
|
|
35
|
-
return {
|
|
36
|
-
browserName,
|
|
37
|
-
browserVersion
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
async function getScreenshotPath(name) {
|
|
41
|
-
if (name.endsWith(".png")) return name;
|
|
42
|
-
const screenshotFolder = resolve(process.cwd(), "screenshots/argos");
|
|
43
|
-
await mkdir(screenshotFolder, {
|
|
44
|
-
recursive: true
|
|
45
|
-
});
|
|
46
|
-
return resolve(screenshotFolder, name + ".png");
|
|
47
|
-
}
|
|
48
|
-
function checkIsFullPage(options) {
|
|
49
|
-
return options.fullPage !== undefined ? options.fullPage : options.element === undefined;
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* Sets the viewport size and waits for the visual viewport to match the specified dimensions.
|
|
53
|
-
* @returns A promise that resolves when the viewport size has been successfully set and matched.
|
|
54
|
-
*/ async function setViewportSize(page, viewportSize) {
|
|
55
|
-
await page.setViewport(viewportSize);
|
|
56
|
-
await page.waitForFunction(({ width, height })=>window.innerWidth === width && window.innerHeight === height, {}, {
|
|
57
|
-
width: viewportSize.width,
|
|
58
|
-
height: viewportSize.height
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* Setup Argos for the screenshot process.
|
|
63
|
-
* @returns A function to teardown Argos.
|
|
64
|
-
*/ async function setup(page, options) {
|
|
65
|
-
const { disableHover = true, argosCSS } = options;
|
|
66
|
-
const fullPage = checkIsFullPage(options);
|
|
67
|
-
await page.evaluate(({ fullPage, argosCSS })=>window.__ARGOS__.setup({
|
|
68
|
-
fullPage,
|
|
69
|
-
argosCSS
|
|
70
|
-
}), {
|
|
71
|
-
fullPage,
|
|
72
|
-
argosCSS
|
|
73
|
-
});
|
|
74
|
-
if (disableHover) {
|
|
75
|
-
await page.mouse.move(0, 0);
|
|
76
|
-
}
|
|
77
|
-
return async ()=>{
|
|
78
|
-
await page.evaluate(({ fullPage, argosCSS })=>window.__ARGOS__.teardown({
|
|
79
|
-
fullPage,
|
|
80
|
-
argosCSS
|
|
81
|
-
}), {
|
|
82
|
-
fullPage,
|
|
83
|
-
argosCSS
|
|
84
|
-
});
|
|
85
|
-
};
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* Stabilize the UI and takes a screenshot of the application under test.
|
|
89
|
-
*
|
|
90
|
-
* @example
|
|
91
|
-
* argosScreenshot(page, "my-screenshot")
|
|
92
|
-
* @see https://argos-ci.com/docs/puppeteer#api-overview
|
|
93
|
-
*/ async function argosScreenshot(/**
|
|
94
|
-
* Puppeteer `page` object.
|
|
95
|
-
*/ page, /**
|
|
96
|
-
* Name of the screenshot. Must be unique.
|
|
97
|
-
*/ name, /**
|
|
98
|
-
* Options for the screenshot.
|
|
99
|
-
*/ options = {}) {
|
|
100
|
-
const { element, viewports, argosCSS, ...puppeteerOptions } = options;
|
|
101
|
-
if (!page) {
|
|
102
|
-
throw new Error("A Puppeteer `page` object is required.");
|
|
103
|
-
}
|
|
104
|
-
if (!name) {
|
|
105
|
-
throw new Error("The `name` argument is required.");
|
|
106
|
-
}
|
|
107
|
-
const [originalViewport] = await Promise.all([
|
|
108
|
-
getViewport(page),
|
|
109
|
-
// Inject Argos script into the page
|
|
110
|
-
injectArgos(page)
|
|
111
|
-
]);
|
|
112
|
-
const teardown = await setup(page, options);
|
|
113
|
-
const fullPage = checkIsFullPage(options);
|
|
114
|
-
async function collectMetadata() {
|
|
115
|
-
const [colorScheme, mediaType, puppeteerVersion, argosPuppeteerVersion, { browserName, browserVersion }] = await Promise.all([
|
|
116
|
-
page.evaluate(()=>window.__ARGOS__.getColorScheme()),
|
|
117
|
-
page.evaluate(()=>window.__ARGOS__.getMediaType()),
|
|
118
|
-
getPuppeteerVersion(),
|
|
119
|
-
getArgosPuppeteerVersion(),
|
|
120
|
-
getBrowserInfo(page)
|
|
121
|
-
]);
|
|
122
|
-
const viewport = getViewport(page);
|
|
123
|
-
const metadata = {
|
|
124
|
-
url: page.url(),
|
|
125
|
-
viewport: {
|
|
126
|
-
width: viewport.width,
|
|
127
|
-
height: viewport.height
|
|
128
|
-
},
|
|
129
|
-
colorScheme,
|
|
130
|
-
mediaType,
|
|
131
|
-
test: null,
|
|
132
|
-
browser: browserName || browserVersion ? {
|
|
133
|
-
name: browserName || "unknown",
|
|
134
|
-
version: browserVersion || "unknown"
|
|
135
|
-
} : undefined,
|
|
136
|
-
automationLibrary: {
|
|
137
|
-
name: "puppeteer",
|
|
138
|
-
version: puppeteerVersion
|
|
139
|
-
},
|
|
140
|
-
sdk: {
|
|
141
|
-
name: "@argos-ci/puppeteer",
|
|
142
|
-
version: argosPuppeteerVersion
|
|
143
|
-
}
|
|
144
|
-
};
|
|
145
|
-
metadata.transient = {};
|
|
146
|
-
if (options?.threshold !== undefined) {
|
|
147
|
-
validateThreshold(options.threshold);
|
|
148
|
-
metadata.transient.threshold = options.threshold;
|
|
149
|
-
}
|
|
150
|
-
return metadata;
|
|
151
|
-
}
|
|
152
|
-
async function stabilizeAndScreenshot(name) {
|
|
153
|
-
await page.waitForFunction(()=>window.__ARGOS__.waitForStability());
|
|
154
|
-
const [screenshotPath, metadata] = await Promise.all([
|
|
155
|
-
getScreenshotPath(name),
|
|
156
|
-
collectMetadata()
|
|
157
|
-
]);
|
|
158
|
-
await writeMetadata(screenshotPath, metadata);
|
|
159
|
-
const screenshotOptions = {
|
|
160
|
-
path: screenshotPath,
|
|
161
|
-
type: "png",
|
|
162
|
-
fullPage,
|
|
163
|
-
...puppeteerOptions
|
|
164
|
-
};
|
|
165
|
-
// If no element is specified, take a screenshot of the whole page
|
|
166
|
-
if (element === undefined) {
|
|
167
|
-
await page.screenshot(screenshotOptions);
|
|
168
|
-
return;
|
|
169
|
-
}
|
|
170
|
-
// If a string is passed, take a screenshot of the element matching the selector
|
|
171
|
-
if (typeof element === "string") {
|
|
172
|
-
await page.waitForSelector(element);
|
|
173
|
-
const handle = await page.$(element);
|
|
174
|
-
if (!handle) {
|
|
175
|
-
throw new Error(`Unable to find element ${element}`);
|
|
176
|
-
}
|
|
177
|
-
await handle.screenshot(screenshotOptions);
|
|
178
|
-
return;
|
|
179
|
-
}
|
|
180
|
-
// If an element is passed, take a screenshot of it
|
|
181
|
-
await element.screenshot(screenshotOptions);
|
|
182
|
-
}
|
|
183
|
-
// If no viewports are specified, take a single screenshot
|
|
184
|
-
if (viewports) {
|
|
185
|
-
// Take screenshots for each viewport
|
|
186
|
-
for (const viewport of viewports){
|
|
187
|
-
const viewportSize = resolveViewport(viewport);
|
|
188
|
-
await setViewportSize(page, viewportSize);
|
|
189
|
-
await stabilizeAndScreenshot(getScreenshotName(name, {
|
|
190
|
-
viewportWidth: viewportSize.width
|
|
191
|
-
}));
|
|
192
|
-
}
|
|
193
|
-
// Restore the original viewport
|
|
194
|
-
await setViewportSize(page, originalViewport);
|
|
195
|
-
} else {
|
|
196
|
-
await stabilizeAndScreenshot(name);
|
|
197
|
-
}
|
|
198
|
-
await teardown();
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
export { argosScreenshot };
|