Skip to content

Commit e71c53d

Browse files
authored
chore(site): add remote playwright support and script (#10445)
1 parent ed7e43b commit e71c53d

File tree

3 files changed

+113
-3
lines changed

3 files changed

+113
-3
lines changed

docs/contributing/frontend.md

+17
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,23 @@ to test if the page is being rendered correctly, you should consider using the
217217
> ℹ️ For scenarios where you need to be authenticated, you can use
218218
> `test.use({ storageState: getStatePath("authState") })`.
219219
220+
For ease of debugging, it's possible to run a Playwright test in headful mode
221+
running a Playwright server on your local machine, and executing the test inside
222+
your workspace.
223+
224+
You can either run `scripts/remote_playwright.sh` from `coder/coder` on your
225+
local machine, or execute the following command if you don't have the repo
226+
available:
227+
228+
```bash
229+
bash <(curl -sSL https://raw.githubusercontent.com/coder/coder/main/scripts/remote_playwright.sh) [workspace]
230+
```
231+
232+
The `scripts/remote_playwright.sh` script will start a Playwright server on your
233+
local machine and forward the necessary ports to your workspace. At the end of
234+
the script, you will land _inside_ your workspace with environment variables set
235+
so you can simply execute the test (`pnpm run playwright:test`).
236+
220237
### Integration
221238

222239
Test user interactions like "Click in a button shows a dialog", "Submit the form

scripts/remote_playwright.sh

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
#!/usr/bin/env bash
2+
set -euo pipefail
3+
4+
workspace=${1:-}
5+
coder_repo=${2:-.}
6+
port=${3:-3000}
7+
8+
if [[ -z "${workspace}" ]]; then
9+
echo "Usage: $0 <workspace> [workspace coder/coder dir] [e2e port]"
10+
exit 1
11+
fi
12+
13+
main() {
14+
# Check the Playwright version from the workspace so we have a 1-to-1 match
15+
# between the current branch and what we're going to run locally. This is
16+
# necessary because Playwright uses their own protocol for communicating
17+
# between the server and client, and the protocol changes between versions.
18+
echo "Checking Playwright version from \"${workspace}\"..."
19+
# shellcheck disable=SC2029 # This is intended to expand client-side.
20+
playwright_version="$(ssh "coder.${workspace}" "cat '${coder_repo}'/site/pnpm-lock.yaml | grep '^ /@playwright/test@' | cut -d '@' -f 3 | tr -d ':'")"
21+
22+
echo "Found Playwright version ${playwright_version}..."
23+
24+
# Let's store it in cache because, why not, this is ephemeral.
25+
dest=~/.cache/coder-remote-playwright
26+
echo "Initializing Playwright server in ${dest}..."
27+
mkdir -p "${dest}"
28+
cd "${dest}"
29+
echo '{"dependencies":{"@playwright/test":"'"${playwright_version}"'"}}' >package.json
30+
cat <<-EOF >server.mjs
31+
import { chromium } from "@playwright/test";
32+
33+
const server = await chromium.launchServer({ headless: false });
34+
console.log(server.wsEndpoint());
35+
EOF
36+
37+
npm_cmd=npm
38+
if command -v pnpm >/dev/null; then
39+
npm_cmd=pnpm
40+
fi
41+
echo "Running \"${npm_cmd} install\" to ensure local and remote are up-to-date..."
42+
"${npm_cmd}" install
43+
44+
echo "Running \"${npm_cmd} exec playwright install\" for browser binaries..."
45+
"${npm_cmd}" exec playwright install
46+
47+
playwright_out="$(mktemp -t playwright_server_out.XXXXXX)"
48+
49+
rm "${playwright_out}"
50+
mkfifo "${playwright_out}"
51+
exec 3<>"${playwright_out}"
52+
53+
echo "Starting Playwright server..."
54+
${npm_cmd} exec node server.mjs 1>&3 &
55+
playwright_pid=$!
56+
57+
trap '
58+
kill -INT ${playwright_pid}
59+
exec 3>&-
60+
rm "${playwright_out}"
61+
wait ${playwright_pid}
62+
' EXIT
63+
64+
echo "Waiting for Playwright to start..."
65+
read -r ws_endpoint <&3
66+
if [[ ${ws_endpoint} != ws://* ]]; then
67+
echo "Playwright failed to start."
68+
echo "${ws_endpoint}"
69+
cat "${playwright_out}"
70+
exit 1
71+
fi
72+
echo "Playwright started at ${ws_endpoint}"
73+
74+
ws_port=${ws_endpoint##*:}
75+
ws_port=${ws_port%/*}
76+
77+
echo
78+
echo "Starting SSH tunnel, run test via \"pnpm run playwright:test\"..."
79+
# shellcheck disable=SC2029 # This is intended to expand client-side.
80+
ssh -t -R "${ws_port}:127.0.0.1:${ws_port}" -L "${port}:127.0.0.1:${port}" coder."${workspace}" "export CODER_E2E_PORT='${port}'; export CODER_E2E_WS_ENDPOINT='${ws_endpoint}'; [[ -d '${coder_repo}/site' ]] && cd '${coder_repo}/site'; exec \"\$(grep \"\${USER}\": /etc/passwd | cut -d: -f7)\" -i -l"
81+
}
82+
83+
main

site/e2e/playwright.config.ts

+13-3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ export const port = process.env.CODER_E2E_PORT
66
? Number(process.env.CODER_E2E_PORT)
77
: defaultPort;
88

9+
export const wsEndpoint = process.env.CODER_E2E_WS_ENDPOINT;
10+
911
const coderMain = path.join(__dirname, "../../enterprise/cmd/coder");
1012

1113
export const STORAGE_STATE = path.join(__dirname, ".auth.json");
@@ -34,9 +36,17 @@ export default defineConfig({
3436
use: {
3537
baseURL: `http://localhost:${port}`,
3638
video: "retain-on-failure",
37-
launchOptions: {
38-
args: ["--disable-webgl"],
39-
},
39+
...(wsEndpoint
40+
? {
41+
connectOptions: {
42+
wsEndpoint: wsEndpoint,
43+
},
44+
}
45+
: {
46+
launchOptions: {
47+
args: ["--disable-webgl"],
48+
},
49+
}),
4050
},
4151
webServer: {
4252
url: `http://localhost:${port}/api/v2/deployment/config`,

0 commit comments

Comments
 (0)