chore(SPV-1105): run visual tests in docker

thanks by that screenshots will be consistent between the repository and github actions (linux)

.github/workflows/on-push.yml

@@ -94,7 +94,7 @@ jobs:
         run: yarn install --frozen-lockfile --immutable
 
       - name: Run Playwright tests
-        run: yarn test:visual
+        run: npx playwright test -c playwright.config.ts
 
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}

package.json

@@ -12,8 +12,8 @@
     "build": "tsc && vite build",
     "lint": "eslint --report-unused-disable-directives --max-warnings 0",
     "test:unit": "vitest --config ./vitest.config.unit.ts",
-    "test:visual": "playwright test -c playwright.config.ts",
-    "test:visual:update": "playwright test --update-snapshots",
+    "test:visual": "docker compose -f ./playwright/docker-compose.yaml up playwright-tests --build",
+    "test:visual:update": "docker compose -f ./playwright/docker-compose.yaml up playwright-update-tests --build",
     "coverage": "vitest run --coverage",
     "preview": "vite preview",
     "prettier:check": "prettier --check 'src/**/*.{ts,tsx,js,jsx,json,css}'",

playwright.config.ts

@@ -14,7 +14,7 @@ import { GitHubActionOptions } from '@estruyf/github-actions-reporter';
  */
 export default defineConfig({
   testDir: './src/__tests__',
-  snapshotPathTemplate: '{testDir}/{testFileDir}/__screenshoots__/{testName}/{arg}{ext}',
+  snapshotPathTemplate: '{testDir}/visual/__screenshoots__/{testName}/{platform}/{arg}-{projectName}{ext}',
   expect: {
     // Maximum time expect() should wait for the condition to be met.
     timeout: 5000,

playwright/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:22-bookworm-slim
+
+RUN npx -y [email protected] install --with-deps
+
+WORKDIR /app
+
+COPY package.json ./
+COPY yarn.lock ./
+
+RUN yarn install
+
+COPY . .
+

playwright/docker-compose.yaml

@@ -0,0 +1,20 @@
+services:
+  playwright-tests:
+    build:
+      context: ./..
+      dockerfile: playwright/Dockerfile
+    volumes:
+      - ../src/__tests__/visual/__screenshoots__:/app/src/__tests__/visual/__screenshoots__
+      - ../playwright-report:/app/playwright-report
+      - ../test-results:/app/test-results
+    command: npx playwright test --reporter=html
+    environment:
+      CI: false
+
+  playwright-update-tests:
+    build:
+      context: ./..
+      dockerfile: playwright/Dockerfile
+    volumes:
+      - ../src/__tests__/visual/__screenshoots__:/app/src/__tests__/visual/__screenshoots__
+    command: npx playwright test --update-snapshots

src/__tests__/visual/xpubs/xpubs-page.visual.test.ts

@@ -50,6 +50,8 @@ test.describe('xpubs page', () => {
       await route.fulfill({ json });
     });
 
+    await page.waitForLoadState('domcontentloaded');
+
     await expect(page).toHaveScreenshot();
   });
 });