Skip to content
This repository was archived by the owner on Sep 4, 2024. It is now read-only.

Commit bf2b124

Browse files
arturowczarekarturowczarek
authored
Add workspace with Argos and Playwright to take screenshots of the pages. (#341)
Signed-off-by: Artur Owczarek <[email protected]>
1 parent 359ad65 commit bf2b124

File tree

8 files changed

+1040
-17
lines changed

8 files changed

+1040
-17
lines changed

‎.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Dependencies
2-
/node_modules
2+
node_modules
33

44
# Production
55
/build
@@ -21,3 +21,6 @@ yarn-error.log*
2121

2222
# intellij
2323
.idea
24+
25+
argos/screenshots
26+
argos/test-results

‎argos/package.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "argos",
3+
"version": "0.0.0",
4+
"description": "Workspace for visual difference detection",
5+
"license": "MIT",
6+
"private": true,
7+
"scripts": {
8+
"screenshot": "playwright test",
9+
"upload": "npx @argos-ci/cli upload ./screenshots"
10+
},
11+
"devDependencies": {
12+
"@argos-ci/cli": "^0.6.0",
13+
"@argos-ci/playwright": "^0.0.7",
14+
"@playwright/test": "^1.38.1",
15+
"cheerio": "^1.0.0-rc.12"
16+
}
17+
}

‎argos/playwright.config.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {devices} from '@playwright/test';
2+
import type {PlaywrightTestConfig} from '@playwright/test';
3+
4+
const config: PlaywrightTestConfig = {
5+
webServer: {
6+
cwd: "..",
7+
port: 3000,
8+
command: 'yarn serve',
9+
},
10+
projects: [
11+
{
12+
name: 'chromium',
13+
use: {
14+
...devices['Desktop Chrome'],
15+
},
16+
},
17+
],
18+
};
19+
20+
export default config;

‎argos/screenshot.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* Iframes can load lazily */
2+
iframe,
3+
/* Avatars can be flaky due to using external sources: GitHub/Unavatar */
4+
.avatar__photo,
5+
/* Gifs load lazily and are animated */
6+
img[src$='.gif'],
7+
/* Algolia keyboard shortcuts appear with a little delay */
8+
.DocSearch-Button-Keys > kbd,
9+
/* The live playground preview can often display dates/counters */
10+
[class*='playgroundPreview'] {
11+
visibility: hidden;
12+
}
13+
14+
/* Different docs last-update dates can alter layout */
15+
.theme-last-updated,
16+
/* Mermaid diagrams are rendered client-side and produce layout shifts */
17+
.docusaurus-mermaid-container {
18+
display: none;
19+
}

‎argos/screenshot.spec.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as fs from "fs";
2+
import {test} from "@playwright/test";
3+
import {argosScreenshot} from "@argos-ci/playwright";
4+
import {extractSitemapPathnames, pathnameToArgosName} from "argos/utils";
5+
6+
// Constants:
7+
const siteUrl = "http://localhost:3000";
8+
const sitemapPath = "../build/sitemap.xml";
9+
const stylesheetPath = "./screenshot.css";
10+
const stylesheet = fs.readFileSync(stylesheetPath).toString();
11+
12+
// Wait for hydration, requires Docusaurus v2.4.3+
13+
// See https://github.com/facebook/docusaurus/pull/9256
14+
// Docusaurus adds a <html data-has-hydrated="true"> once hydrated
15+
function waitForDocusaurusHydration() {
16+
// uncomment the line when Docusaurus is upgraded to v2.4.3
17+
// return document.documentElement.dataset.hasHydrated === "true";
18+
return true;
19+
}
20+
21+
function screenshotPathname(pathname: string, index: number, numberOfPaths: number) {
22+
test(`pathname ${pathname}`, async ({page}) => {
23+
const url = siteUrl + pathname;
24+
console.log(`${index + 1}/${numberOfPaths} Screenshotting`, url);
25+
await page.goto(url);
26+
await page.waitForFunction(waitForDocusaurusHydration);
27+
await page.addStyleTag({content: stylesheet});
28+
await argosScreenshot(page, pathnameToArgosName(pathname));
29+
});
30+
}
31+
32+
test.describe("Docusaurus site screenshots", () => {
33+
const pathnames = extractSitemapPathnames(sitemapPath);
34+
console.log("Pathnames to screenshot:", pathnames);
35+
pathnames.forEach((path, index) => screenshotPathname(path, index, pathnames.length));
36+
});

‎argos/utils.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as cheerio from "cheerio";
2+
import * as fs from "fs";
3+
4+
export function extractSitemapPathnames(sitemapPath: string): string[] {
5+
const sitemap = fs.readFileSync(sitemapPath).toString();
6+
const $ = cheerio.load(sitemap, { xmlMode: true });
7+
const urls: string[] = [];
8+
$("loc").each(function handleLoc() {
9+
urls.push($(this).text());
10+
});
11+
return urls.map((url) => new URL(url).pathname);
12+
}
13+
14+
// Converts a pathname to a decent screenshot name
15+
export function pathnameToArgosName(pathname: string): string {
16+
return pathname.replace(/^\/|\/$/g, "") || "index";
17+
}

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,5 +57,8 @@
5757
},
5858
"engines": {
5959
"node": ">=16.14"
60-
}
60+
},
61+
"workspaces": [
62+
"argos"
63+
]
6164
}

0 commit comments

Comments
 (0)