ci: integrate playwrite into ci workflow

ukorvl · ukorvl · commit 3e426ce8ea2a · 2025-07-11T22:50:32.000+04:00
diff --git a/.github/actions/install-dependencies/action.yaml b/.github/actions/install-dependencies/action.yaml
@@ -4,7 +4,12 @@ description: "Prepare repository and all dependencies"
 inputs:
   node-version:
     description: "Node.js version to use"
-    default: "18"
+    default: "24"
+  install-playwright:
+    description: "Install Playwright browsers"
+    default: true
+    required: false
+    type: boolean
 
 runs:
   using: "composite"
@@ -15,14 +20,34 @@ runs:
         node-version: ${{ inputs.node-version }}
         cache: "npm"
 
-    - name: Cache dependencies
+    - name: Install dependencies
+      run: npm ci --ignore-scripts --audit=false
+      shell: bash
+
+    - name: Get playwright version
+      if: inputs.install-playwright == 'true'
+      id: playwright-version
+      run: |
+        version=$(npx --no-install playwright --version)
+        echo "playwright_version=$version" >> $GITHUB_OUTPUT
+      shell: bash
+
+    - name: Cache playwright browsers
+      if: inputs.install-playwright == 'true'
+      id: cache-playwright
       uses: actions/cache@v4
       with:
-        path: ~/.npm
-        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        path: ~/.cache/ms-playwright
+        key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.playwright_version }}
         restore-keys: |
-          ${{ runner.os }}-node-
+          ${{ runner.os }}-playwright-
 
-    - name: Install dependencies
-      run: npm ci --ignore-scripts
+    - name: Install Playwright browsers and dependencies
+      if: inputs.install-playwright == 'true'
+      run: |
+        if [ "${{ steps.cache-playwright.outputs.cache-hit }}" == "true" ]; then
+          npx --no-install playwright install-deps
+        else
+          npx --no-install playwright install --with-deps
+        fi
       shell: bash
diff --git a/.github/actions/test/action.yaml b/.github/actions/test/action.yaml
@@ -15,7 +15,9 @@ runs:
   using: "composite"
   steps:
     - name: Run tests
-      run: npm run test:all
+      run: |
+        export CI=true
+        npm run test:all
       shell: bash
 
     - name: Upload tests (lib only) coverage to Coveralls
@@ -24,3 +26,11 @@ runs:
       with:
         github-token: ${{ inputs.github-token }}
         base-path: "lib"
+
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: examples/tests/e2e/output/playwright-report
+        if-no-files-found: "warn"
+        retention-days: 30
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -18,6 +18,8 @@ jobs:
     steps:
       - name: Clone repository
         uses: actions/checkout@v4
+        with:
+          fetch-depth: ${{ github.event_name == 'pull_request' && 0 || 1 }}
 
       - name: Install dependencies
         uses: ./.github/actions/install-dependencies
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,4 @@
 .rslib
 lib/CHANGELOG.md
 lib/tests/readme/extracted-snippets
+examples/tests/e2e/output
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -15,7 +15,7 @@ export default [
       "**/dist",
       "**/coverage/",
       "**/.rslib",
-      "examples/tests/e2e/test-results",
+      "examples/tests/e2e/output",
       "lib/tests/readme/extracted-snippets",
     ],
   },
diff --git a/examples/.gitignore b/examples/.gitignore
diff --git a/examples/index.html b/examples/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 
 <head>
+  <title></title>
 </head>
 
 <body>
diff --git a/examples/package.json b/examples/package.json
@@ -10,10 +10,10 @@
     "build": "vite build",
     "preview": "vite preview",
     "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
     "test:all": "npm run test:e2e"
   },
   "devDependencies": {
-    "@playwright/test": "^1.52.0",
     "@vitejs/plugin-react": "^4.4.1",
     "dayjs": "^1.11.13",
     "vite-plugin-checker": "^0.9.3",
diff --git a/examples/playwright.config.ts b/examples/playwright.config.ts
@@ -1,16 +1,18 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineConfig, devices } from "@playwright/test";
+import dotenv from "dotenv";
+
+const __filename = fileURLToPath(import.meta.url);
+dotenv.config({ path: path.join(path.dirname(__filename), ".env"), quiet: true });
 
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
 export default defineConfig({
-  testDir: "./e2e",
-  fullyParallel: true,
+  testDir: "./tests/e2e",
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
-  reporter: "html",
-  snapshotDir: "tests/e2e/snapshots",
-  outputDir: "tests/e2e/test-results",
+  snapshotDir: "tests/e2e/output/snapshots",
+  outputDir: "tests/e2e/output/test-results",
+  fullyParallel: true,
   use: {
     baseURL: "http://localhost:5173",
     trace: "on-first-retry",
@@ -28,13 +30,25 @@ export default defineConfig({
       name: "webkit",
       use: { ...devices["Desktop Safari"] },
     },
+    {
+      name: "Microsoft Edge",
+      use: { ...devices["Desktop Edge"] },
+    },
+    {
+      name: "Mobile Chrome",
+      use: { ...devices["Pixel 5"] },
+    },
+  ],
+  reporter: [
+    ["html", { open: "never", outputFolder: "tests/e2e/output/playwright-report" }],
+    ["list"],
   ],
-
   webServer: {
     command: "npm run dev",
     url: "http://localhost:5173",
     reuseExistingServer: !process.env.CI,
     stdout: "ignore",
     stderr: "pipe",
+    timeout: 120 * 1000,
   },
 });
diff --git a/examples/tests/e2e/.gitignore b/examples/tests/e2e/.gitignore
@@ -0,0 +1 @@
+output/
diff --git a/examples/tests/e2e/main.spec.ts b/examples/tests/e2e/main.spec.ts
@@ -1,43 +1,67 @@
+import { readdirSync } from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
 import { test, expect } from "@playwright/test";
 
-test("has title", async ({ page }) => {
-  await page.goto("/");
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const samplesDir = path.join(__dirname, "../..", "src/samples");
+const examplesCount = readdirSync(samplesDir, { withFileTypes: true }).filter(dirent =>
+  dirent.isDirectory()
+).length;
 
-  await expect(page).toHaveTitle(import.meta.env.VITE_APP_DEFAULT_TITLE);
-});
+test.describe("Main page", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+  });
+
+  test("has title", async ({ page }) => {
+    await expect(page).toHaveTitle(
+      process.env.VITE_APP_DEFAULT_TITLE || "Wrong title, you should read from env"
+    );
+  });
 
-test("canvas rendering", async ({ page }) => {
-  await page.goto("/");
+  test("has important metatags", async ({ page }) => {
+    const metas = ["description", "keywords", "author"];
 
-  const exampleSection = page.getByLabel("Examples of library usage");
-  expect(exampleSection).toHaveCount(1);
+    for (const meta of metas) {
+      const metaTag = await page.locator(`meta[name="${meta}"]`);
+      await expect(metaTag).toHaveCount(1);
+      await expect(metaTag).toHaveAttribute("name", meta);
+      await expect(metaTag).toHaveAttribute("content", expect.any(String));
+    }
+  });
 
-  const examples = exampleSection.locator(">div");
-  expect(examples).toHaveCount(13);
+  test("canvas rendering", async ({ page }) => {
+    const exampleSection = await page.getByLabel("Examples of library usage");
+    await expect(exampleSection).toHaveCount(1);
 
-  const canvases = examples.locator("canvas");
-  const canvasesCount = await canvases.count();
-  for (let i = 0; i < canvasesCount; i++) expect(canvases.nth(i)).toBeVisible();
-});
+    const examples = await exampleSection.locator(">div");
+    await expect(examples).toHaveCount(examplesCount);
 
-test("valid links", async ({ page }) => {
-  await page.goto("/");
+    const canvases = await examples.locator("canvas");
+    const canvasesCount = await canvases.count();
+    for (let i = 0; i < canvasesCount; i++) await expect(canvases.nth(i)).toBeVisible();
+  });
 
-  const hrefAttrs = await page
-    .locator("a")
-    .evaluateAll(links => links.map(link => link.getAttribute("href")));
+  test("valid links", async ({ page }) => {
+    const hrefAttrs = await page
+      .locator("a")
+      .evaluateAll(links => links.map(link => link.getAttribute("href")));
 
-  const externalURLs = hrefAttrs.reduce((urls, url) => {
-    if (url && !url?.startsWith("#")) urls.add(url);
-    return urls;
-  }, new Set<string>());
+    const externalURLs = hrefAttrs.filter(
+      (url): url is string => url !== null && !url.startsWith("#") && !url.startsWith("/")
+    );
 
-  for (const externalURl of externalURLs) {
-    try {
-      const response = await page.request.get(externalURl);
-      expect.soft(response.ok(), `${externalURl} didnt return Ok response`).toBeTruthy();
-    } catch {
-      expect.soft(null, `${externalURl} didnt return Ok response `);
+    for (const externalURl of externalURLs) {
+      try {
+        const response = await page.request.get(externalURl);
+        expect
+          .soft(response.ok(), `${externalURl} didn't return Ok response`)
+          .toBeTruthy();
+      } catch {
+        expect.soft(false, `${externalURl} didnt return Ok response `);
+      }
     }
-  }
+  });
 });
diff --git a/examples/tsconfig.node.json b/examples/tsconfig.node.json
@@ -6,5 +6,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "playwright.config.ts"]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "build": "bash ./scripts/build-all.sh",
     "test:all": "concurrently \"npm run test:all -w lib\" \"npm run test:all -w examples\"",
     "install-git-hooks": "npx --no-install simple-git-hooks",
-    "prepare": "npm run install-git-hooks",
+    "prepare": "npm run install-git-hooks && playwright install --with-deps",
     "knip": "knip --production",
     "version": "bash ./scripts/version.sh"
   },
@@ -28,12 +28,14 @@
     "@commitlint/format": "^19.8.1",
     "@commitlint/types": "^19.8.0",
     "@eslint/js": "^9.21.0",
+    "@playwright/test": "^1.52.0",
     "@size-limit/preset-small-lib": "^11.2.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.15.3",
     "concurrently": "^9.1.2",
+    "dotenv": "^17.2.0",
     "eslint": "^9.28.0",
     "eslint-import-resolver-typescript": "^4.3.1",
     "eslint-plugin-import": "^2.32.0",
