diff --git a/screenshot.spec.ts b/screenshot.spec.ts new file mode 100644 index 00000000..0d8af992 --- /dev/null +++ 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 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 new file mode 100644 index 00000000..30895d53 --- /dev/null +++ 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"; +}