[WIP]

z-shell · Nov 30, 2023 · b4efc46 · b4efc46
1 parent 7ee42ca
commit b4efc46
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/screenshot.spec.ts b/screenshot.spec.ts
@@ -0,0 +1,33 @@
+import * as fs from "fs";
+import {test} from "@playwright/test";
+import {argosScreenshot} from "@argos-ci/playwright";
+import {extractSitemapPathnames, pathnameToArgosName} from "./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+
+// Docusaurus adds a <html data-has-hydrated="true"> once hydrated
+// See https://github.com/facebook/docusaurus/pull/9256
+function waitForDocusaurusHydration() {
+  return document.documentElement.dataset.hasHydrated === "true";
+}
+
+function screenshotPathname(pathname: string) {
+  test(`pathname ${pathname}`, async ({page}) => {
+    const url = siteUrl + pathname;
+    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(screenshotPathname);
+});
diff --git a/utils.ts b/utils.ts
@@ -0,0 +1,19 @@
+import * as fs from "fs";
+import * as cheerio from "cheerio";
+
+// Extract a list of pathnames, given a fs path to a sitemap.xml file
+// Docusaurus generates a build/sitemap.xml file for you!
+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";
+}