test: manage playwright through pnpm instead of devbox

altano · Nov 4, 2024 · 366b9b7 · 366b9b7
1 parent 1283ef3
commit 366b9b7
Show file tree

Hide file tree

Showing 18 changed files with 147 additions and 192 deletions.
diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml
@@ -0,0 +1,51 @@
+# Only handles running e2e tests in Playwright. Runs outside devbox since devbox
+# and playwright don't play well together.
+name: test-e2e
+
+# As recommended by Graphite
+# (https://graphite.dev/docs/github-configuration-guidelines#github-actions)
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+  push:
+    branches: [main]
+
+# Cancel in-progress jobs for the same work
+# (https://graphite.dev/docs/troubleshooting#why-are-my-actions-running-twice)
+concurrency:
+  group: test-e2e-${{ github.repository }}-${{ github.workflow }}-${{ github.ref }}-${{ github.ref == 'refs/heads/main' && github.sha || ''}}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          # no version specified (uses version in packageManager field in
+          # package.json)
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.11.1
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Validate and Build
+        run: pnpm exec turbo run test:e2e
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: "**/playwright-report/"
+          retention-days: 30
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -11,7 +11,7 @@ on:
 # Cancel in-progress jobs for the same work
 # (https://graphite.dev/docs/troubleshooting#why-are-my-actions-running-twice)
 concurrency:
-  group: ${{ github.repository }}-${{ github.workflow }}-${{ github.ref }}-${{ github.ref == 'refs/heads/main' && github.sha || ''}}
+  group: test-${{ github.repository }}-${{ github.workflow }}-${{ github.ref }}-${{ github.ref == 'refs/heads/main' && github.sha || ''}}
   cancel-in-progress: true
 
 jobs:
@@ -31,18 +31,11 @@ jobs:
       - name: Install dependencies
         run: devbox run pnpm install
 
-      - name: Dump Playwright Information
-        run: |
-          eval "$(devbox shellenv)"
-          echo "Playwright: `devbox run pnpm exec playwright --version`"
-          echo "PLAYWRIGHT_BROWSERS_PATH=$PLAYWRIGHT_BROWSERS_PATH"
-
       - name: Validate and Build
-        run: |
-          devbox run pnpm prep
+        run: devbox run pnpm exec turbo run build test:unit lint format check:dependencies check:types check:exports
 
       - uses: actions/upload-artifact@v4
-        if: always()
+        if: ${{ !cancelled() }}
         with:
           name: playwright-report
           path: "**/playwright-report/"

diff --git a/README.md b/README.md
@@ -11,13 +11,6 @@ This repository has a `devbox.json` which means you can trivially create a devel
 
 Read the [Devbox quickstart](https://jetpack.io/devbox/docs/contributor-quickstart/) or read more about why Devbox is fantastic [on my website](https://alan.norbauer.com/articles/devbox-intro).
 
-### Playwright
-
-The Playwright setup in this repository is a little finicky. When updating the version:
-
-- The version of `@playwright/test` in any package.json must be kept in sync with `playwright-driver` in `devbox.json`. Both should be precisely hard-coded (no semver ranges or `'latest'`).
-- The nixpkgs hash in `devbox.lock` for `playwright-driver.browsers` must be manually changed to match the hash for the `playwright-driver` entry or the browsers will be the wrong version and tests will fail.
-
 ## Contributing
 
 I don't expect any contributions to this repository but I will accept pull requests.

diff --git a/devbox.json b/devbox.json
@@ -5,16 +5,13 @@
     "git@latest",
     "mercurialFull@latest",
     "[email protected]",
-    "playwright-driver.browsers",
-    "[email protected]",
     "sapling@latest",
     "subversion@latest",
     "tree@latest",
     "graphite-cli@latest"
   ],
   "env": {
     "DEVBOX_COREPACK_ENABLED": "true",
-    "PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD": "1",
-    "PLAYWRIGHT_BROWSERS_PATH": "$DEVBOX_PACKAGES_DIR"
+    "PLAYWRIGHT_BROWSERS_PATH": "0"
   }
 }
diff --git a/devbox.lock b/devbox.lock
@@ -330,68 +330,6 @@
         }
       }
     },
-    "playwright-driver.browsers": {
-      "resolved": "github:NixOS/nixpkgs/d4f247e89f6e10120f911e2e2d2254a050d0f732#playwright-driver.browsers",
-      "source": "nixpkg",
-      "systems": {
-        "aarch64-darwin": {
-          "outputs": [
-            {
-              "path": "/nix/store/j6fdya2dais8j41msnrhkahkmrd8dch7-playwright-browsers-1.47.0",
-              "default": true
-            }
-          ]
-        }
-      }
-    },
-    "[email protected]": {
-      "last_modified": "2024-10-13T23:44:06Z",
-      "resolved": "github:NixOS/nixpkgs/d4f247e89f6e10120f911e2e2d2254a050d0f732#playwright-driver",
-      "source": "devbox-search",
-      "version": "1.47.0",
-      "systems": {
-        "aarch64-darwin": {
-          "outputs": [
-            {
-              "name": "out",
-              "path": "/nix/store/85kk5v8633iackwhg84nbv1wrcnqzm67-playwright-core-1.47.0",
-              "default": true
-            }
-          ],
-          "store_path": "/nix/store/85kk5v8633iackwhg84nbv1wrcnqzm67-playwright-core-1.47.0"
-        },
-        "aarch64-linux": {
-          "outputs": [
-            {
-              "name": "out",
-              "path": "/nix/store/3kz4qnn7bwbcr5hc36q2wx9phibjlqzc-playwright-core-1.47.0",
-              "default": true
-            }
-          ],
-          "store_path": "/nix/store/3kz4qnn7bwbcr5hc36q2wx9phibjlqzc-playwright-core-1.47.0"
-        },
-        "x86_64-darwin": {
-          "outputs": [
-            {
-              "name": "out",
-              "path": "/nix/store/981kzim3k612rqq0qdjdmp4xlvmdr313-playwright-core-1.47.0",
-              "default": true
-            }
-          ],
-          "store_path": "/nix/store/981kzim3k612rqq0qdjdmp4xlvmdr313-playwright-core-1.47.0"
-        },
-        "x86_64-linux": {
-          "outputs": [
-            {
-              "name": "out",
-              "path": "/nix/store/4bxajgf2aibkxkzqq7pf2ad1hzjs6aw6-playwright-core-1.47.0",
-              "default": true
-            }
-          ],
-          "store_path": "/nix/store/4bxajgf2aibkxkzqq7pf2ad1hzjs6aw6-playwright-core-1.47.0"
-        }
-      }
-    },
     "sapling@latest": {
       "last_modified": "2024-08-14T11:41:26Z",
       "resolved": "github:NixOS/nixpkgs/0cb2fd7c59fed0cd82ef858cbcbdb552b9a33465#sapling",

diff --git a/package.json b/package.json
@@ -15,10 +15,10 @@
     "clean": "turbo run clean && rm -rf node_modules",
     "dev": "turbo run dev --no-cache --parallel --continue",
     "format": "turbo run format",
+    "install:playwright": "playwright install --with-deps",
     "lint": "eslint --no-error-on-unmatched-pattern *.json *.ts",
     "lint:inspect": "pnpm dlx @eslint/config-inspector@latest",
     "preinstall": "npx only-allow pnpm",
-    "prep": "turbo run build test lint format check:dependencies check:types check:exports",
     "release": "turbo run build && changeset publish",
     "test": "turbo run test",
     "update": "pnpm update --latest --interactive",
@@ -28,6 +28,7 @@
     "@altano/eslint-config": "workspace:*",
     "@altano/tsconfig": "workspace:*",
     "@changesets/cli": "^2.27.9",
+    "@playwright/test": "1.48.2",
     "eslint": "^9.13.0",
     "prettier": "^3.3.3",
     "syncpack": "^13.0.0",

diff --git a/packages/satori-fit-text/package.json b/packages/satori-fit-text/package.json
@@ -67,7 +67,7 @@
     "@arethetypeswrong/cli": "^0.15.4",
     "@fontsource-variable/inter": "^5.0.17",
     "@fontsource/inter": "^5.0.17",
-    "@playwright/test": "1.47.0",
+    "@playwright/test": "1.48.2",
     "@resvg/resvg-js": "^2.6.0",
     "@types/debug": "^4.1.12",
     "@types/he": "^1.2.3",

diff --git a/packages/satori-fit-text/playwright.config.ts b/packages/satori-fit-text/playwright.config.ts
@@ -69,29 +69,19 @@ export default defineConfig({
   },
 
   /* Configure projects for major browsers */
-  projects: isCI
-    ? [
-        // we can enable firefox/webkit when they ship in the `playwright-driver`
-        // nix linux derivation
-        //
-        // https://discourse.nixos.org/t/playwright-tests-on-multiple-browsers/41309
-        projects.chromium,
-      ]
-    : [
-        projects.chromium,
-        projects.webkit,
+  projects: [
+    projects.chromium,
+    projects.firefox,
+    projects.webkit,
 
-        // satori doesn't currently work in Firefox without a polyfill
-        // projects.firefox,
+    /* Test against mobile viewports. */
+    // projects.mobileChrome,
+    // projects.mobileSafari,
 
-        /* Test against mobile viewports. */
-        // projects.mobileChrome,
-        // projects.mobileSafari,
-
-        /* Test against branded browsers. */
-        // projects.edge,
-        // projects.chrome,
-      ],
+    /* Test against branded browsers. */
+    // projects.edge,
+    // projects.chrome,
+  ],
 
   /* Run your local dev server before starting the tests */
   webServer: {

diff --git a/packages/textfit/package.json b/packages/textfit/package.json
@@ -46,7 +46,7 @@
     "@altano/build-config": "workspace:*",
     "@altano/tsconfig": "workspace:*",
     "@arethetypeswrong/cli": "^0.15.4",
-    "@playwright/test": "1.47.0",
+    "@playwright/test": "1.48.2",
     "@types/node": "^20.16.5",
     "typescript": "^5.6.3",
     "vite": "^5.4.10",

diff --git a/packages/textfit/playwright.config.ts b/packages/textfit/playwright.config.ts
@@ -69,27 +69,19 @@ export default defineConfig({
   },
 
   /* Configure projects for major browsers */
-  projects: isCI
-    ? [
-        // we can enable firefox/webkit when they ship in the `playwright-driver`
-        // nix linux derivation
-        //
-        // https://discourse.nixos.org/t/playwright-tests-on-multiple-browsers/41309
-        projects.chromium,
-      ]
-    : [
-        projects.chromium,
-        projects.webkit,
-        projects.firefox,
+  projects: [
+    projects.chromium,
+    projects.firefox,
+    projects.webkit,
 
-        /* Test against mobile viewports. */
-        // projects.mobileChrome,
-        // projects.mobileSafari,
+    /* Test against mobile viewports. */
+    // projects.mobileChrome,
+    // projects.mobileSafari,
 
-        /* Test against branded browsers. */
-        // projects.edge,
-        // projects.chrome,
-      ],
+    /* Test against branded browsers. */
+    // projects.edge,
+    // projects.chrome,
+  ],
 
   /* Run your local dev server before starting the tests */
   webServer: {

diff --git a/packages/textfit/tests/e2e/index.spec.ts b/packages/textfit/tests/e2e/index.spec.ts
@@ -17,7 +17,7 @@ test("should have correct font sizes", async ({ page, browserName }) => {
 
   await expect(page.getByText("Centered Text", { exact: true })).toHaveCSS(
     "font-size",
-    "32px",
+    /3[1-2]px/, // 31px on linux, 32px on mac
   );
 
   await expect(page.getByText("Multiline Text", { exact: true })).toHaveCSS(
@@ -27,11 +27,17 @@ test("should have correct font sizes", async ({ page, browserName }) => {
 
   await expect(
     page.getByText("Vertically Centered Text", { exact: true }),
-  ).toHaveCSS("font-size", "48px");
+  ).toHaveCSS(
+    "font-size",
+    /4[8-9]px/, // 49px on linux, 48px on mac
+  );
 
   await expect(
     page.getByText("Centered Multiline Text", { exact: true }),
-  ).toHaveCSS("font-size", "48px");
+  ).toHaveCSS(
+    "font-size",
+    /4[8-9]px/, // 49px on linux, 48px on mac
+  );
 
   await expect(
     page.getByText("Set a Maximum Font Size", { exact: true }),
@@ -51,7 +57,10 @@ test("should have correct font sizes", async ({ page, browserName }) => {
 
   await expect(
     page.getByText("Use Any Custom Padding", { exact: true }),
-  ).toHaveCSS("font-size", "37px");
+  ).toHaveCSS(
+    "font-size",
+    /3[6-7]px/, // 36px on linux, 37px on mac
+  );
 
   await expect(
     page.getByText("Use Padding With Flexbox For Custom Vert Alignment!", {

diff --git a/packages/use-toc-visible-sections/package.json b/packages/use-toc-visible-sections/package.json
@@ -45,7 +45,7 @@
     "@altano/build-config": "workspace:*",
     "@altano/tsconfig": "workspace:*",
     "@arethetypeswrong/cli": "^0.15.4",
-    "@playwright/test": "1.47.0",
+    "@playwright/test": "1.48.2",
     "@types/node": "^20.16.5",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",

diff --git a/packages/use-toc-visible-sections/playwright.config.ts b/packages/use-toc-visible-sections/playwright.config.ts
@@ -69,27 +69,19 @@ export default defineConfig({
   },
 
   /* Configure projects for major browsers */
-  projects: isCI
-    ? [
-        // we can enable firefox/webkit when they ship in the `playwright-driver`
-        // nix linux derivation
-        //
-        // https://discourse.nixos.org/t/playwright-tests-on-multiple-browsers/41309
-        projects.chromium,
-      ]
-    : [
-        projects.chromium,
-        projects.firefox,
-        projects.webkit,
+  projects: [
+    projects.chromium,
+    projects.firefox,
+    projects.webkit,
 
-        /* Test against mobile viewports. */
-        // projects.mobileChrome,
-        // projects.mobileSafari,
+    /* Test against mobile viewports. */
+    // projects.mobileChrome,
+    // projects.mobileSafari,
 
-        /* Test against branded browsers. */
-        // projects.edge,
-        // projects.chrome,
-      ],
+    /* Test against branded browsers. */
+    // projects.edge,
+    // projects.chrome,
+  ],
 
   /* Run your local dev server before starting the tests */
   webServer: {

diff --git a/packages/use-visible-elements/package.json b/packages/use-visible-elements/package.json
@@ -46,7 +46,7 @@
     "@altano/build-config": "workspace:*",
     "@altano/tsconfig": "workspace:*",
     "@arethetypeswrong/cli": "^0.15.4",
-    "@playwright/test": "1.47.0",
+    "@playwright/test": "1.48.2",
     "@types/node": "^20.16.5",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",