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>

packages/playwright-common/Dockerfile

@@ -0,0 +1,13 @@
+ARG PLAYWRIGHT_VERSION
+FROM mcr.microsoft.com/playwright:v${PLAYWRIGHT_VERSION}-noble
+
+WORKDIR /work
+
+# fonts-dejavu is needed for the same RTL rendering as on CI
+RUN apt-get update && apt-get -y install docker.io fonts-dejavu
+# Install the matching playwright runtime, the docker image only includes browsers
+RUN npm i -g playwright@${PLAYWRIGHT_VERSION}
+
+COPY docker-entrypoint.sh /docker-entrypoint.sh
+
+ENTRYPOINT ["/docker-entrypoint.sh"]

packages/playwright-common/README.md

@@ -0,0 +1,22 @@
+# @element-hq/element-web-playwright-common
+
+Set of Playwright utilities to make it easier to write tests for Element Web, Element Web Modules & Element Desktop.
+
+# This is a partial clone of https://github.com/element-hq/element-modules/tree/main/packages/element-web-playwright-common
+
+In the future the rest of the package will be brought into this monorepo, for now it serves as an experimental alternative to https://github.com/element-hq/element-modules/pull/188
+
+## Releases
+
+The API is versioned using semver, with the major version incremented for breaking changes.
+
+## Copyright & License
+
+Copyright (c) 2026 Element Creations Ltd
+
+This software is multi licensed by Element Creations Ltd (Element). It can be used either:
+
+(1) for free under the terms of the GNU Affero General Public License (as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version); OR
+
+(2) under the terms of a paid-for Element Commercial License agreement between you and Element (the terms of which may vary depending on what you and Element have agreed to).
+Unless required by applicable law or agreed to in writing, software distributed under the Licenses is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licenses for the specific language governing permissions and limitations under the Licenses.

packages/playwright-common/docker-entrypoint.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+# We use npm here as we used `npm i -g` to install playwright in the Dockerfile
+npm exec -- playwright run-server --port "$PORT" --host 0.0.0.0

packages/playwright-common/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "@element-hq/element-web-playwright-common-local",
+    "type": "module",
+    "version": "3.0.0",
+    "license": "SEE LICENSE IN README.md",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/element-hq/element-web.git",
+        "directory": "packages/playwright-common"
+    },
+    "author": "element-hq",
+    "engines": {
+        "node": ">=20.0.0"
+    },
+    "bin": {
+        "playwright-screenshots": "playwright-screenshots.sh"
+    },
+    "devDependencies": {
+        "wait-on": "^9.0.4"
+    }
+}

packages/playwright-common/playwright-screenshots.sh

@@ -0,0 +1,36 @@
+#!/bin/bash
+
+set -e
+
+# Handle symlinks here as we tend to be executed as an npm binary
+SCRIPT_PATH=$(readlink -f "$0")
+SCRIPT_DIR=$(dirname "$SCRIPT_PATH")
+
+IMAGE_NAME="element-web-playwright-server"
+WS_PORT=3000
+
+# Check the playwright version
+PW_VERSION=$(npm exec --silent -- playwright --version | gcut -d" " -f2)
+echo "Building $IMAGE_NAME:$PW_VERSION image in $SCRIPT_DIR"
+
+# Build the image
+docker build -t "$IMAGE_NAME" --build-arg "PLAYWRIGHT_VERSION=$PW_VERSION" "$SCRIPT_DIR"
+
+# Start the playwright-server in docker
+CONTAINER=$(docker run --network=host --rm -d -e PORT="$WS_PORT" "$IMAGE_NAME")
+# Set up an exit trap to clean up the docker container
+clean_up() {
+    ARG=$?
+    echo "Stopping playwright-server"
+    docker stop "$CONTAINER" > /dev/null
+    exit $ARG
+}
+trap clean_up EXIT
+
+# Wait for playwright-server to be ready
+echo "Waiting for playwright-server"
+pnpm wait-on "tcp:$WS_PORT"
+
+# Run the test we were given, setting PW_TEST_CONNECT_WS_ENDPOINT accordingly
+echo "Running '$@'"
+PW_TEST_CONNECT_WS_ENDPOINT="http://localhost:$WS_PORT" "$@"