✨ Setup temporary visual regression testing for the design system

frontend/package.json

@@ -32,7 +32,7 @@
     "compile:cljs": "clojure -M:dev:shadow-cljs compile main",
     "watch": "node ./scripts/watch.js",
     "e2e:server": "node ./scripts/e2e-server.js",
-    "e2e:test": "playwright test",
+    "e2e:test": "playwright test --project default",
     "storybook:compile": "yarn run compile && clojure -M:dev:shadow-cljs compile storybook",
     "storybook:watch": "yarn run storybook:compile && concurrently \"clojure -M:dev:shadow-cljs watch storybook\" \"storybook dev -p 6006\" \"yarn run watch\"",
     "storybook:build": "yarn run storybook:compile && storybook build"

frontend/playwright.config.js

@@ -39,8 +39,17 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: "chromium",
+      name: "default",
       use: { ...devices["Desktop Chrome"] },
+      testDir: "./playwright/ui/specs",
+    },
+    {
+      name: "ds",
+      use: { ...devices["Desktop Chrome"] },
+      testDir: "./playwright/ui/visual-specs",
+      expect: {
+        toHaveScreenshot: { maxDiffPixelRatio: 0.01 },
+      },
     },
   ],
 

frontend/playwright/ui/visual-specs/example.spec.js

@@ -0,0 +1,10 @@
+import { test, expect } from "@playwright/test";
+import { LoginPage } from "../pages/LoginPage";
+
+test("Shows login form correctly", async ({ page }) => {
+  await LoginPage.initWithLoggedOutUser(page);
+  const loginPage = new LoginPage(page);
+  await page.goto("/#/auth/login");
+
+  await expect(page).toHaveScreenshot();
+});