Merge pull request #77 from technologiestiftung/feat/add-playwright-v…

…isual-tests

feat: added visual regression tests

.github/workflows/test-and-release.yml

@@ -24,16 +24,20 @@ jobs:
         with:
           node-version-file: ".nvmrc"
       - run: npm ci
+      - run: npx playwright install --with-deps
       - run: npm run build --if-present
       - run: npm test --if-present
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
 
   release:
     name: semantic-release
     needs: [test]
     runs-on: ubuntu-latest
-    outputs:
-      new-release-published: ${{ steps.semantic-release.outputs.new_release_published }}
-      new-release-version: ${{ steps.semantic-release.outputs.new_release_version }}
     steps:
       - uses: actions/checkout@v3
         with:

.gitignore

@@ -21,3 +21,7 @@ yarn-error.log*
 
 .env
 .idea
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -12,20 +12,23 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "test": "playwright test"
   },
   "dependencies": {
     "@docusaurus/core": "2.2.0",
     "@docusaurus/preset-classic": "2.2.0",
     "@mdx-js/react": "1.6.22",
     "@tailwindcss/forms": "0.5.3",
+    "cheerio": "1.0.0-rc.12",
     "clsx": "1.2.1",
     "prism-react-renderer": "1.3.5",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.1",
+    "@playwright/test": "1.40.1",
     "@saithodev/semantic-release-backmerge": "2.2.0",
     "@tailwindcss/line-clamp": "0.4.4",
     "@tailwindcss/typography": "0.5.9",

playwright.config.ts

@@ -0,0 +1,69 @@
+import { defineConfig, devices } from '@playwright/test';
+
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'list',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    },
+  ],
+
+  timeout: 2 * 60 * 1000, // 2 min timeout
+
+  webServer: {
+    port: 3000,
+    command: 'npm run serve',
+    reuseExistingServer: !process.env.CI,
+  },
+});

tests/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;
+}

tests/screenshots.spec.ts

@@ -0,0 +1,26 @@
+import * as fs from "fs";
+import { test, expect } from '@playwright/test';
+import {extractSitemapPathnames } from './utils';
+
+
+// Constants
+const siteUrl = 'http://localhost:3000';
+const sitemapPath = './build/sitemap.xml';
+const stylesheetPath = './tests/screenshot.css';
+const stylesheet = fs.readFileSync(stylesheetPath).toString();
+
+function screenshotPathname(pathname: string) {
+  test(`pathname ${pathname}`, async ({page}) => {
+    const url = siteUrl + pathname;
+    await page.goto(url);
+    await page.addStyleTag({content: stylesheet});
+    page.once('load', async () => {
+      await expect(page).toHaveScreenshot();
+    })
+  });
+}
+
+test.describe('Docusaurus site screenshots', () => {
+  const pathnames = extractSitemapPathnames(sitemapPath);
+  pathnames.forEach(screenshotPathname);
+});