diff --git a/.github/workflows/on-push.yml b/.github/workflows/on-push.yml index b2dfe762..75ab334e 100644 --- a/.github/workflows/on-push.yml +++ b/.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() }} diff --git a/README.md b/README.md index f30fb0bd..a4729492 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,8 @@ yarn dev ``` ## Documentation +- [Running visual tests](playwright/README.md) +
Release Deployment
diff --git a/package.json b/package.json index 43382802..0ba1f63c 100644 --- a/package.json +++ b/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}'", diff --git a/playwright.config.ts b/playwright.config.ts index 4884b78f..ab7f0ba1 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -14,13 +14,13 @@ 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, toHaveScreenshot: { - maxDiffPixelRatio: 0.02, + maxDiffPixelRatio: 0.01, }, }, /* Run tests in files in parallel */ diff --git a/playwright/Dockerfile b/playwright/Dockerfile new file mode 100644 index 00000000..e93f8665 --- /dev/null +++ b/playwright/Dockerfile @@ -0,0 +1,13 @@ +FROM node:22-bookworm-slim + +RUN npx -y playwright@1.48.1 install --with-deps + +WORKDIR /app + +COPY package.json ./ +COPY yarn.lock ./ + +RUN yarn install + +COPY . . + diff --git a/playwright/README.md b/playwright/README.md new file mode 100644 index 00000000..9300d6c3 --- /dev/null +++ b/playwright/README.md @@ -0,0 +1,36 @@ +# Running Playwright Tests + +> **Note:** We run visual tests inside docker container because we need to have screenshots from linux + +## Introduction + +This guide explains how to run visual tests in Playwright using npm scripts. The scripts we will cover are: + +- `test:visual`: runs visual tests. +- `test:visual:update`: updates existing snapshots. + +## Setting Up the Environment + +Ensure you have docker + +## Docker files + +``` +/app +├── /playwright +│ ├── Dockerfile +│ └── docker-compose.yml +└── ... +``` + +## Run tests + +``` +yarn tests:visual +``` + +## Update image snapshots + +``` +yarn tests:visual:update +``` diff --git a/playwright/docker-compose.yaml b/playwright/docker-compose.yaml new file mode 100644 index 00000000..f5ff5b7a --- /dev/null +++ b/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 diff --git a/src/__tests__/visual/__screenshoots__/login-page-login-form/linux/login-page-login-form-1-chromium.png b/src/__tests__/visual/__screenshoots__/login-page-login-form/linux/login-page-login-form-1-chromium.png new file mode 100644 index 00000000..ff7f96e2 Binary files /dev/null and b/src/__tests__/visual/__screenshoots__/login-page-login-form/linux/login-page-login-form-1-chromium.png differ diff --git a/src/__tests__/visual/__screenshoots__/login-page-login-form/linux/login-page-login-form-1-firefox.png b/src/__tests__/visual/__screenshoots__/login-page-login-form/linux/login-page-login-form-1-firefox.png new file mode 100644 index 00000000..ff34a011 Binary files /dev/null and b/src/__tests__/visual/__screenshoots__/login-page-login-form/linux/login-page-login-form-1-firefox.png differ diff --git a/src/__tests__/visual/__screenshoots__/login-page-login-form/linux/login-page-login-form-1-webkit.png b/src/__tests__/visual/__screenshoots__/login-page-login-form/linux/login-page-login-form-1-webkit.png new file mode 100644 index 00000000..c8fadef9 Binary files /dev/null and b/src/__tests__/visual/__screenshoots__/login-page-login-form/linux/login-page-login-form-1-webkit.png differ diff --git a/src/__tests__/visual/__screenshoots__/login-page-login-with-invalid-credentials/linux/login-page-login-with-invalid-credentials-1-chromium.png b/src/__tests__/visual/__screenshoots__/login-page-login-with-invalid-credentials/linux/login-page-login-with-invalid-credentials-1-chromium.png new file mode 100644 index 00000000..a2ce3b53 Binary files /dev/null and b/src/__tests__/visual/__screenshoots__/login-page-login-with-invalid-credentials/linux/login-page-login-with-invalid-credentials-1-chromium.png differ diff --git a/src/__tests__/visual/__screenshoots__/login-page-login-with-invalid-credentials/linux/login-page-login-with-invalid-credentials-1-firefox.png b/src/__tests__/visual/__screenshoots__/login-page-login-with-invalid-credentials/linux/login-page-login-with-invalid-credentials-1-firefox.png new file mode 100644 index 00000000..e11e27ac Binary files /dev/null and b/src/__tests__/visual/__screenshoots__/login-page-login-with-invalid-credentials/linux/login-page-login-with-invalid-credentials-1-firefox.png differ diff --git a/src/__tests__/visual/__screenshoots__/login-page-login-with-invalid-credentials/linux/login-page-login-with-invalid-credentials-1-webkit.png b/src/__tests__/visual/__screenshoots__/login-page-login-with-invalid-credentials/linux/login-page-login-with-invalid-credentials-1-webkit.png new file mode 100644 index 00000000..764a59bc Binary files /dev/null and b/src/__tests__/visual/__screenshoots__/login-page-login-with-invalid-credentials/linux/login-page-login-with-invalid-credentials-1-webkit.png differ diff --git a/src/__tests__/visual/__screenshoots__/xpubs-page-xpubs-table-with-data/linux/xpubs-page-xpubs-table-with-data-1-chromium.png b/src/__tests__/visual/__screenshoots__/xpubs-page-xpubs-table-with-data/linux/xpubs-page-xpubs-table-with-data-1-chromium.png new file mode 100644 index 00000000..a7786cf0 Binary files /dev/null and b/src/__tests__/visual/__screenshoots__/xpubs-page-xpubs-table-with-data/linux/xpubs-page-xpubs-table-with-data-1-chromium.png differ diff --git a/src/__tests__/visual/__screenshoots__/xpubs-page-xpubs-table-with-data/linux/xpubs-page-xpubs-table-with-data-1-firefox.png b/src/__tests__/visual/__screenshoots__/xpubs-page-xpubs-table-with-data/linux/xpubs-page-xpubs-table-with-data-1-firefox.png new file mode 100644 index 00000000..53b63ce1 Binary files /dev/null and b/src/__tests__/visual/__screenshoots__/xpubs-page-xpubs-table-with-data/linux/xpubs-page-xpubs-table-with-data-1-firefox.png differ diff --git a/src/__tests__/visual/__screenshoots__/xpubs-page-xpubs-table-with-data/linux/xpubs-page-xpubs-table-with-data-1-webkit.png b/src/__tests__/visual/__screenshoots__/xpubs-page-xpubs-table-with-data/linux/xpubs-page-xpubs-table-with-data-1-webkit.png new file mode 100644 index 00000000..d55836a0 Binary files /dev/null and b/src/__tests__/visual/__screenshoots__/xpubs-page-xpubs-table-with-data/linux/xpubs-page-xpubs-table-with-data-1-webkit.png differ diff --git a/src/__tests__/visual/login-page/__screenshoots__/login-page-login-form/login-page-login-form-1.png b/src/__tests__/visual/login-page/__screenshoots__/login-page-login-form/login-page-login-form-1.png deleted file mode 100644 index 8138ce9e..00000000 Binary files a/src/__tests__/visual/login-page/__screenshoots__/login-page-login-form/login-page-login-form-1.png and /dev/null differ diff --git a/src/__tests__/visual/login-page/__screenshoots__/login-page-login-with-invalid-credentials/login-page-login-with-invalid-credentials-1.png b/src/__tests__/visual/login-page/__screenshoots__/login-page-login-with-invalid-credentials/login-page-login-with-invalid-credentials-1.png deleted file mode 100644 index cea84901..00000000 Binary files a/src/__tests__/visual/login-page/__screenshoots__/login-page-login-with-invalid-credentials/login-page-login-with-invalid-credentials-1.png and /dev/null differ diff --git a/src/__tests__/visual/xpubs/__screenshoots__/xpubs-page-xpubs-table-with-data/xpubs-page-xpubs-table-with-data-1.png b/src/__tests__/visual/xpubs/__screenshoots__/xpubs-page-xpubs-table-with-data/xpubs-page-xpubs-table-with-data-1.png deleted file mode 100644 index 23943750..00000000 Binary files a/src/__tests__/visual/xpubs/__screenshoots__/xpubs-page-xpubs-table-with-data/xpubs-page-xpubs-table-with-data-1.png and /dev/null differ diff --git a/src/__tests__/visual/xpubs/xpubs-page.visual.test.ts b/src/__tests__/visual/xpubs/xpubs-page.visual.test.ts index 626deb6c..869c29f1 100644 --- a/src/__tests__/visual/xpubs/xpubs-page.visual.test.ts +++ b/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(); }); });