Document lockfile-based CI container example

Author: karlhorky

docs/src/ci.md

@@ -301,6 +301,138 @@ jobs:
         run: dotnet test
 ```
 
+#### Via Containers (dynamic)
+* langs: js
+
+The Playwright Docker image tag can be resolved from the lockfile instead of hardcoding it in workflow YAML. This example uses [`lockparse`](https://www.npmjs.com/package/lockparse) to read `package-lock.json`, `yarn.lock`, `pnpm-lock.yaml`, or `bun.lock`.
+
+Add `lockparse` as a dev dependency:
+
+- `npm install --save-dev lockparse`
+- `yarn add --dev lockparse`
+- `pnpm install --save-dev lockparse`
+- `bun add --dev lockparse`
+
+```js title="scripts/resolve-playwright-version.mjs"
+import { existsSync } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import { parse } from 'lockparse';
+
+const lockfileName = [
+  'package-lock.json',
+  'yarn.lock',
+  'pnpm-lock.yaml',
+  'bun.lock',
+].find((file) => existsSync(file));
+
+if (!lockfileName) {
+  throw new Error('No supported lockfile found');
+}
+
+const lockfile = await parse(
+  await readFile(lockfileName, 'utf8'),
+  lockfileName,
+  JSON.parse(await readFile('package.json', 'utf8')),
+);
+
+const playwrightTest = [
+  ...(lockfile.root.dependencies ?? []),
+  ...(lockfile.root.devDependencies ?? []),
+].find((dependency) => dependency.name === '@playwright/test');
+
+if (!playwrightTest) {
+  throw new Error('No @playwright/test version found in lockfile');
+}
+
+console.log(playwrightTest.version);
+```
+
+```yml js title=".github/workflows/playwright.yml"
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  resolve-playwright-version:
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.resolve-playwright-version.outputs.version }}
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+      - uses: oven-sh/setup-bun@v2
+        if: ${{ hashFiles('bun.lock') != '' }}
+      - name: Enable Corepack
+        if: ${{ hashFiles('yarn.lock', 'pnpm-lock.yaml') != '' }}
+        run: corepack enable
+      - name: Install dependencies
+        run: |
+          if [ -f package-lock.json ]; then
+            npm ci
+          elif [ -f yarn.lock ]; then
+            yarn install --immutable
+          elif [ -f pnpm-lock.yaml ]; then
+            pnpm install --frozen-lockfile
+          elif [ -f bun.lock ]; then
+            bun install --frozen-lockfile
+          else
+            echo "No supported lockfile found"
+            exit 1
+          fi
+      - name: Resolve Playwright version from lockfile
+        id: resolve-playwright-version
+        run: echo "version=$(node scripts/resolve-playwright-version.mjs)" >> "$GITHUB_OUTPUT"
+  playwright:
+    name: 'Playwright Tests'
+    runs-on: ubuntu-latest
+    needs: resolve-playwright-version
+    container:
+      image: mcr.microsoft.com/playwright:v${{ needs.resolve-playwright-version.outputs.version }}-noble
+      options: --user 1001
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+      - uses: oven-sh/setup-bun@v2
+        if: ${{ hashFiles('bun.lock') != '' }}
+      - name: Enable Corepack
+        if: ${{ hashFiles('yarn.lock', 'pnpm-lock.yaml') != '' }}
+        run: corepack enable
+      - name: Install dependencies
+        run: |
+          if [ -f package-lock.json ]; then
+            npm ci
+          elif [ -f yarn.lock ]; then
+            yarn install --immutable
+          elif [ -f pnpm-lock.yaml ]; then
+            pnpm install --frozen-lockfile
+          elif [ -f bun.lock ]; then
+            bun install --frozen-lockfile
+          else
+            echo "No supported lockfile found"
+            exit 1
+          fi
+      - name: Run your tests
+        run: |
+          if [ -f package-lock.json ]; then
+            npx playwright test
+          elif [ -f yarn.lock ]; then
+            yarn playwright test
+          elif [ -f pnpm-lock.yaml ]; then
+            pnpm exec playwright test
+          elif [ -f bun.lock ]; then
+            bunx playwright test
+          else
+            echo "No supported lockfile found"
+            exit 1
+          fi
+```
+
 #### On deployment
 
 This will start the tests after a [GitHub Deployment](https://developer.github.com/v3/repos/deployments/) went into the `success` state.