Run only the browser in docker for storybook screenshots (#32489)

* Remove old screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add experimental playwright-screenshots.sh utility and use it for shared-components `test:storybook:update` Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tidy up Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate based on review Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-13 10:20:16 +00:00
parent d7ca3dbd1d
commit b3b6574638
15 changed files with 203 additions and 26 deletions
@@ -40,7 +40,7 @@
        "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
        "test:unit": "vitest --project=unit",
        "test:storybook": "pnpm build:doc && vitest --project=storybook",
-        "test:storybook:update": "cd ../.. && playwright-screenshots --entrypoint /work/packages/shared-components/scripts/storybook-screenshot-update.sh --with-node-modules --no-link-modules",
+        "test:storybook:update": "CI=1 pnpm playwright-screenshots pnpm vitest --run --update --project=storybook",
        "build": "vite build",
        "prepack": "pnpm run build",
        "storybook": "storybook dev -p 6007",
@@ -63,7 +63,7 @@
        "temporal-polyfill": "^0.3.0"
    },
    "devDependencies": {
-        "@element-hq/element-web-playwright-common": "catalog:",
+        "@element-hq/element-web-playwright-common-local": "workspace:*",
        "@fetch-mock/vitest": "^0.2.18",
        "@matrix-org/react-sdk-module-api": "^2.5.0",
        "@playwright/test": "catalog:",
@@ -1,19 +0,0 @@
-#!/bin/bash
-#
-# Update storybook screenshots
-#
-# This script should be used as the entrypoint parameter of the `playwright-screenshots` script. It
-# installs the pnpm dependencies, and then runs `vitest --run --update --project=storybook` to update the storybook screenshots.
-#
-# It requires that `playwright-screenshots` is given the `--with-node-modules` parameter.
-
-set -e
-
-# First install dependencies. We have to do this within the playwright container rather than the host,
-# because we have which must be built for the right architecture (and some environments use a VM
-# to run docker containers, meaning that things inside a container use a different architecture than
-# those on the host).
-pnpm install --frozen-lockfile
-
-# Now run the screenshot update, we set CI=1 to inform vis to update the real baselines
-CI=1 pnpm --dir packages/shared-components test:storybook --run --update
@@ -101,6 +101,8 @@ export default defineConfig({
                    storybookVis({
                        // 3px of difference allowed before marking as failed
                        failureThreshold: 3,
+                        // When running in CI=1 mode, set the platform to `linux` as that is the platform where the browser-in-docker is running
+                        snapshotRootDir: ({ ci, platform }) => `__vis__/${ci ? "linux" : platform}`,
                    }),
                ],
                test: {
@@ -110,7 +112,16 @@ export default defineConfig({
                        headless: true,
                        provider: playwright({
                            contextOptions: commonContextOptions,
-                            launchOptions: commonLaunchOptions,
+                            launchOptions: process.env.PW_TEST_CONNECT_WS_ENDPOINT ? undefined : commonLaunchOptions,
+                            connectOptions: process.env.PW_TEST_CONNECT_WS_ENDPOINT
+                                ? {
+                                      wsEndpoint: process.env.PW_TEST_CONNECT_WS_ENDPOINT,
+                                      exposeNetwork: "<loopback>",
+                                      headers: {
+                                          "x-playwright-launch-options": JSON.stringify(commonLaunchOptions),
+                                      },
+                                  }
+                                : undefined,
                        }),
                        instances: [{ browser: "chromium" }],
                    },