Take screenshots of whole website

I need to update docusaurus next. I want to have before and after screenshots I'll run them through a diff thing. we can turn off the github action later if we want. It should only run on merge to main
zerotier · Oct 3, 2024 · 16f08bb · 16f08bb
1 parent d178f10
commit 16f08bb
Show file tree

Hide file tree

Showing 8 changed files with 17,357 additions and 4 deletions.
diff --git a/.github/workflows/screenshots.yml b/.github/workflows/screenshots.yml
@@ -0,0 +1,39 @@
+name: CI screenshots
+on:
+  push:
+    branches: main
+
+jobs:
+  screenshots:
+    runs-on: gha-runner-x64
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: current
+
+      - name: yarn@4.1.1
+        run: |
+          corepack enable && corepack prepare yarn@4.1.1
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Install Playwright browsers
+        run: yarn playwright install --with-deps chromium
+
+      - name: Build the website
+        run: yarn docusaurus build
+
+      - name: Take screenshots with Playwright
+        run: yarn playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: screenshots
+          path: ./screenshots
+          retention-days: 7
diff --git a/e2e/screenshot.css b/e2e/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/e2e/screenshot.spec.ts b/e2e/screenshot.spec.ts
@@ -0,0 +1,33 @@
+import * as fs from 'fs';
+import {test} from '@playwright/test';
+import {extractSitemapPathnames, pathnameToArgosName} from './utils';
+
+// Constants
+const siteUrl = 'http://localhost:3000';
+const sitemapPath = './build/sitemap.xml';
+const stylesheetPath = './e2e/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});
+    const spath = `./screenshots/${pathnameToArgosName(pathname)}.png`
+    await page.screenshot({ path: spath, fullPage: true });
+  });
+}
+
+test.describe('Docusaurus site screenshots', () => {
+  const pathnames = extractSitemapPathnames(sitemapPath);
+  console.log('Pathnames to screenshot:', pathnames);
+  pathnames.forEach(screenshotPathname);
+});
diff --git a/e2e/utils.ts b/e2e/utils.ts
@@ -0,0 +1,19 @@
+import * as cheerio from 'cheerio';
+import * as fs from 'fs';
+
+// 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';
+}