Add workspace with Argos and Playwright to take screenshots of the pa…

…ges. (#341) Signed-off-by: Artur Owczarek <[email protected]>
OpenLineage · Jul 11, 2024 · bf2b124 · bf2b124
1 parent 359ad65
commit bf2b124
Show file tree

Hide file tree

Showing 8 changed files with 1,040 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 # Dependencies
-/node_modules
+node_modules
 
 # Production
 /build
@@ -21,3 +21,6 @@ yarn-error.log*
 
 # intellij
 .idea
+
+argos/screenshots
+argos/test-results
diff --git a/argos/package.json b/argos/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "argos",
+  "version": "0.0.0",
+  "description": "Workspace for visual difference detection",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "screenshot": "playwright test",
+    "upload": "npx @argos-ci/cli upload ./screenshots"
+  },
+  "devDependencies": {
+    "@argos-ci/cli": "^0.6.0",
+    "@argos-ci/playwright": "^0.0.7",
+    "@playwright/test": "^1.38.1",
+    "cheerio": "^1.0.0-rc.12"
+  }
+}
diff --git a/argos/playwright.config.ts b/argos/playwright.config.ts
@@ -0,0 +1,20 @@
+import {devices} from '@playwright/test';
+import type {PlaywrightTestConfig} from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+    webServer: {
+        cwd: "..",
+        port: 3000,
+        command: 'yarn serve',
+    },
+    projects: [
+        {
+            name: 'chromium',
+            use: {
+                ...devices['Desktop Chrome'],
+            },
+        },
+    ],
+};
+
+export default config;
diff --git a/argos/screenshot.css b/argos/screenshot.css
@@ -0,0 +1,19 @@
+/* Iframes can load lazily */
+iframe,
+    /* Avatars can be flaky due to using external sources: GitHub/Unavatar */
+.avatar__photo,
+    /* Gifs load lazily and are animated */
+img[src$='.gif'],
+    /* Algolia keyboard shortcuts appear with a little delay */
+.DocSearch-Button-Keys > kbd,
+    /* The live playground preview can often display dates/counters */
+[class*='playgroundPreview'] {
+    visibility: hidden;
+}
+
+/* Different docs last-update dates can alter layout */
+.theme-last-updated,
+    /* Mermaid diagrams are rendered client-side and produce layout shifts */
+.docusaurus-mermaid-container {
+    display: none;
+}
diff --git a/argos/screenshot.spec.ts b/argos/screenshot.spec.ts
@@ -0,0 +1,36 @@
+import * as fs from "fs";
+import {test} from "@playwright/test";
+import {argosScreenshot} from "@argos-ci/playwright";
+import {extractSitemapPathnames, pathnameToArgosName} from "argos/utils";
+
+// Constants:
+const siteUrl = "http://localhost:3000";
+const sitemapPath = "../build/sitemap.xml";
+const stylesheetPath = "./screenshot.css";
+const stylesheet = fs.readFileSync(stylesheetPath).toString();
+
+// Wait for hydration, requires Docusaurus v2.4.3+
+// See https://github.com/facebook/docusaurus/pull/9256
+// Docusaurus adds a <html data-has-hydrated="true"> once hydrated
+function waitForDocusaurusHydration() {
+    // uncomment the line when Docusaurus is upgraded to v2.4.3
+    // return document.documentElement.dataset.hasHydrated === "true";
+    return true;
+}
+
+function screenshotPathname(pathname: string, index: number, numberOfPaths: number) {
+    test(`pathname ${pathname}`, async ({page}) => {
+        const url = siteUrl + pathname;
+        console.log(`${index + 1}/${numberOfPaths} Screenshotting`, url);
+        await page.goto(url);
+        await page.waitForFunction(waitForDocusaurusHydration);
+        await page.addStyleTag({content: stylesheet});
+        await argosScreenshot(page, pathnameToArgosName(pathname));
+    });
+}
+
+test.describe("Docusaurus site screenshots", () => {
+    const pathnames = extractSitemapPathnames(sitemapPath);
+    console.log("Pathnames to screenshot:", pathnames);
+    pathnames.forEach((path, index) => screenshotPathname(path, index, pathnames.length));
+});
diff --git a/argos/utils.ts b/argos/utils.ts
@@ -0,0 +1,17 @@
+import * as cheerio from "cheerio";
+import * as fs from "fs";
+
+export function extractSitemapPathnames(sitemapPath: string): string[] {
+    const sitemap = fs.readFileSync(sitemapPath).toString();
+    const $ = cheerio.load(sitemap, { xmlMode: true });
+    const urls: string[] = [];
+    $("loc").each(function handleLoc() {
+        urls.push($(this).text());
+    });
+    return urls.map((url) => new URL(url).pathname);
+}
+
+// Converts a pathname to a decent screenshot name
+export function pathnameToArgosName(pathname: string): string {
+    return pathname.replace(/^\/|\/$/g, "") || "index";
+}
diff --git a/package.json b/package.json
@@ -57,5 +57,8 @@
   },
   "engines": {
     "node": ">=16.14"
-  }
+  },
+  "workspaces": [
+    "argos"
+  ]
 }