test: improve playwright setup

.github/workflows/test.yml

@@ -23,7 +23,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Install devbox
-        uses: jetpack-io/devbox-install-action@v0.11.0
+        uses: jetify-com/devbox-install-action@v0.11.0
         with:
           enable-cache: true
           devbox-version: 0.13.6
@@ -33,16 +33,15 @@ jobs:
 
       - name: Dump Playwright Information
         run: |
-          eval "$(devbox shellenv)"
-          echo "Playwright: `devbox run pnpm exec playwright --version`"
           echo "PLAYWRIGHT_BROWSERS_PATH=$PLAYWRIGHT_BROWSERS_PATH"
+          echo "Playwright paths in store:"
+          ls /nix/store | grep 'playwright' | sort -k2 -t '-'
 
       - name: Validate and Build
-        run: |
-          devbox run pnpm prep
+        run: devbox run pnpm prep
 
       - uses: actions/upload-artifact@v4
-        if: always()
+        if: ${{ !cancelled() }}
         with:
           name: playwright-report
           path: "**/playwright-report/"

README.md

@@ -16,7 +16,7 @@ Read the [Devbox quickstart](https://jetpack.io/devbox/docs/contributor-quicksta
 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.
+- The browser's path in `devbox.lock` for `playwright-driver.browsers` must be manually changed to match the hash for the `playwright-driver` entry (for the given platform). You can get the path with `ls /nix/store | grep 'playwright' | sort -k2 -t '-'`.
 
 ## Contributing
 

devbox.json

@@ -1,20 +1,25 @@
 {
-  "packages": [
-    "difftastic@latest",
-    "git-branchless@latest",
-    "git@latest",
-    "mercurialFull@latest",
-    "nodejs@20.11.1",
-    "playwright-driver.browsers",
-    "playwright-driver@1.47.0",
-    "sapling@latest",
-    "subversion@latest",
-    "tree@latest",
-    "graphite-cli@latest"
-  ],
+  "packages": {
+    "difftastic": "latest",
+    "git-branchless": "latest",
+    "git": "latest",
+    "mercurialFull": "latest",
+    "nodejs": "20.11.1",
+    "playwright-driver.browsers": "",
+    "playwright-driver": "1.47.0",
+    "sapling": "latest",
+    "subversion": "latest",
+    "tree": "latest",
+    "graphite-cli": "latest",
+    "nix-ld": {
+      "version": "latest",
+      "platforms": ["aarch64-linux", "x86_64-linux"]
+    }
+  },
   "env": {
     "DEVBOX_COREPACK_ENABLED": "true",
-    "PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD": "1",
-    "PLAYWRIGHT_BROWSERS_PATH": "$DEVBOX_PACKAGES_DIR"
+    "LD_LIBRARY_PATH": "${DEVBOX_PACKAGES_DIR}/lib/:${LD_LIBRARY_PATH}",
+    "PLAYWRIGHT_BROWSERS_PATH": "${DEVBOX_PACKAGES_DIR}",
+    "PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD": "1"
   }
 }

devbox.lock

@@ -341,6 +341,14 @@
               "default": true
             }
           ]
+        },
+        "x86_64-linux": {
+          "outputs": [
+            {
+              "path": "/nix/store/3436ry676mz5yb6zfbkgmwkgj4xiyl5s-playwright-browsers",
+              "default": true
+            }
+          ]
         }
       }
     },

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: {

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: {

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: {

packages/use-visible-elements/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: {

todo.txt

@@ -53,7 +53,7 @@ TODO: unit => tests/unit
 TODO: e2e => tests/e2e
 TODO: playwright: factor out playwright config
 TODO: switch playwright tests to component tests (https://playwright.dev/docs/test-components#example)
-TODO: get linux into `playwright-driver.browsers` in devbox.lock, enable firefox/safari in playwright in CI
+x 2024-11-02 TODO: get linux into `playwright-driver.browsers` in devbox.lock, enable firefox/safari in playwright in CI
 TODO: cleanup all the extraneous css
 
 use-element-observer:

turbo.json

@@ -30,7 +30,7 @@
     },
     "test:e2e": {
       "dependsOn": ["build"],
-      "env": ["PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD", "PLAYWRIGHT_BROWSERS_PATH"]
+      "env": ["DEVBOX_*", "LD_LIBRARY_PATH", "PLAYWRIGHT_*"]
     },
     "lint": {
       "cache": false,