use published sitemap

Author: gingerwizard

.github/workflows/test-preview.yml

@@ -30,7 +30,7 @@ jobs:
         with:
           repository: ClickHouse/clickhouse-docs
           path: ./
-
+      
       # Step 2: Log url
       - name: Log BASE_URL
         run: echo "BASE_URL=${{ github.event.deployment_status.environment_url }}"
@@ -44,7 +44,7 @@ jobs:
           node-version: '20.18.0'
           cache: 'yarn'
 
-      # Step 4: Install dependencies and build the site
+      # Step 4: Install dependencies and build the site (needed for sitemap.xml)
       - name: Install and build
         run: |
           export NODE_OPTIONS="--max_old_space_size=4096"
@@ -60,3 +60,4 @@ jobs:
           ARGOS_BRANCH: ${{ github.event.deployment_status.environment == 'Production' && 'main' || github.ref_name }}
           CI: true
           ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
+      

tests/screenshot.spec.ts

@@ -1,11 +1,12 @@
 import * as fs from 'fs';
 import {argosScreenshot} from '@argos-ci/playwright';
 import {test} from '@playwright/test';
+import axios from 'axios';
 import {extractSitemapPathnames, pathnameToArgosName} from './utils';
 
 // Constants
 const siteUrl = process.env.CI ? process.env.BASE_URL : 'http://localhost:3000';
-const sitemapPath = './build/sitemap.xml';
+const sitemapUrl = `${siteUrl}/docs/sitemap.xml`;
 const stylesheetPath = './tests/screenshot.css';
 const stylesheet = fs.readFileSync(stylesheetPath).toString();
 
@@ -16,19 +17,27 @@ 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', async () => {
+  let pathnames: string[] = [];
+
+  test.beforeAll(async () => {
+    // Fetch the sitemap dynamically
+    const response = await axios.get(sitemapUrl);
+    const sitemapContent = response.data;
+    pathnames = extractSitemapPathnames(sitemapContent).filter((pathname) =>
+      pathname.startsWith('/docs/en') // currently test en only
+    );
   });
-}
 
-test.describe('Docusaurus site screenshots', () => {
-  const pathnames = extractSitemapPathnames(sitemapPath).filter((pathname) =>
-    pathname.startsWith('/docs/en') // currently test en only
-  );
-  pathnames.forEach(screenshotPathname);
+  test('Generate and run screenshot tests', async ({page}) => {
+    // Iterate through the pathnames and run tests dynamically
+    for (const pathname of pathnames) {
+      console.log(`processing ${pathname}`)
+      const url = siteUrl + pathname;
+      await page.goto(url);
+      await page.waitForFunction(waitForDocusaurusHydration);
+      await page.addStyleTag({content: stylesheet});
+      await argosScreenshot(page, pathnameToArgosName(pathname));
+    }
+  });
 });

tests/utils.ts

@@ -1,8 +1,7 @@
 import * as cheerio from "cheerio";
 import * as fs from "fs";
 
-export function extractSitemapPathnames(sitemapPath: string): string[] {
-  const sitemap = fs.readFileSync(sitemapPath).toString();
+export function extractSitemapPathnames(sitemap: string): string[] {
   const $ = cheerio.load(sitemap, { xmlMode: true });
   const urls: string[] = [];
   $("loc").each(function handleLoc() {