Using docker for visual testing

.dockerignore

@@ -0,0 +1,28 @@
+# Ignore files and directories generated by the build process
+node_modules/
+dist/
+build/
+
+# Ignore development and debugging files
+*.log
+*.tmp
+*.bak
+.vscode/
+
+# Ignore specific files
+.DS_Store
+.env
+.env.local
+.env.*.local
+.env.test
+.env.production
+
+# Ignore version control files
+.git/
+.gitignore
+
+cypress
+cla-signs
+.verdaccio
+.storybook
+logs

.github/actions/test/action.yml

@@ -41,6 +41,10 @@ runs:
       with:
         command: 'pnpm test.headless.ci'
 
+    - name: Run Visual Tests
+      shell: bash
+      run: 'pnpm test.headless.visual'
+
     # - name: Publish to Chromatic
     #   uses: chromaui/action@v1
     #   # Chromatic GitHub Action options

Dockerfile

@@ -0,0 +1,23 @@
+FROM mcr.microsoft.com/playwright:v1.43.0-jammy
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+WORKDIR /opt
+
+COPY package.json ./
+COPY pnpm-lock.yaml ./
+
+RUN pnpm install --frozen-lockfile
+
+RUN pnpm playwright install --with-deps
+
+COPY packages/kit-headless ./packages/kit-headless
+COPY packages/kit-styled ./packages/kit-styled
+COPY apps/component-tests ./apps/component-tests
+COPY . .
+
+#ENV DEBUG="pw:browser"
+#ENV NX_VERBOSE_LOGGING=true
+CMD ["pnpm", "test.headless.visual"]

docker-compose.yml

@@ -0,0 +1,12 @@
+version: '3'
+services:
+  playwright:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    image: playwright-tests
+    volumes:
+      - ./packages:/opt/packages
+    ports:
+      - '5713:5713'
+    # working_dir: /dev

package.json

@@ -33,10 +33,11 @@
     "story.headless": "nx storybook headless",
     "test.cli": "NODE_OPTIONS=--experimental-vm-modules nx test cli",
     "test.headless": "nx component-test headless",
-    "test.visual.headless": "nx visual-test headless",
+    "test.headless.visual": "nx visual-test headless",
     "test.pw.headless": "nx e2e headless",
     "test.pw.headless.ci": "nx e2e headless",
     "test.headless.ci": "nx component-test-ci headless",
+    "test.headless.ci.visual": "docker-compose up",
     "test.utils": "nx test utils"
   },
   "packageManager": "[email protected]",

packages/kit-headless/playwright.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
   ...nxE2EPreset(__filename, { testDir: './src' }),
   testMatch: '**/*.test.ts',
   timeout: 30000,
+  reporter: [['line']],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     baseURL,
@@ -45,6 +46,12 @@ export default defineConfig({
       name: 'visual',
       use: { ...devices['Desktop Chrome'] },
       grep: /@Visual.*/,
+
+      expect: {
+        toHaveScreenshot: {
+          maxDiffPixelRatio: 0.02,
+        },
+      },
     },
 
     // {