Running the workshop in devcontainers

[Noriller]

I don't know who will need this (maybe even my future self), but I've been running everything in devcontainers, and only stumbled a little in setting things up for this one workshop (the others all ran fine).

The first test passed, so I believe the rest should also work, so I'm sharing what I found out to make this work.

This setup uses a container for the workshop and another for the playwright's "remote server" (on the same machine).

Do checkout the playwright docs: https://playwright.dev/docs/docker#remote-connection

In the workshop terminal

PW_TEST_CONNECT_WS_ENDPOINT=ws://$(ip route | grep default | awk '{print $3}'):3000/ npm run test:e2e:dev -- --ui-port=9292 --ui-host=0.0.0.0

Why not "docker.host.internal"?

PW_TEST_CONNECT_WS_ENDPOINT is from the docs.

Apparently, it refuses to connect. Using network=host is another option, and it is probably even easier (just pass it to devcontainers runArgs, then use localhost).
But this one works, getting the IP from the route, which is the "localhost" IP as seen from the container.

UI port/host

Without it, it fails. It searches for the playwright dependencies inside the container, but even without them, by passing those args, it will open the UI in a new page and work there.

In the Host Machine

docker run --network=host --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.47.0-noble /bin/sh -c "npx -y playwright@1.47.0 run-server --port 3000 --host 0.0.0.0"

The command is from the docs. The only thing to pay attention to is the version being used (1.47): the workshop version should match the one to run the server (I'm also matching the server/docker to be sure).

If you use an unsupported version, it will complain about version mismatch; in which case, just adjust the versions.

For this one, I'm using network=host because the scripts would most likely overwrite the config. But since both are in Docker, you could pass the add-host flag and use whatever name you passed there.
The docs example is add-host=hostmachine:host-gateway, so in the tests, you would use hostmachine.

[kentcdodds]

If you'd like to make a contribution to the README to point to this issue, that would be awesome. Thanks. I'm glad you figured things out! For now, I'm going to close this because I don't think that there's anything actionable here beyond that.

[Noriller]

Remote development/devcontainer setup

If you want or need to run this workshop in a remote environment, or if you're
using devcontainer, then for the tests to work you need some additional setup.

Devcontainer is implemented differently in different editors, but in VS Code it's
as simple as having the Dev containers extension installed and then creating a
configuration file. There's a wizard that will walk you through the process of
setting it up.

The minimal configuration needs would use the Node.js & Typescript template.
From there you would need to add the following to the devcontainer.json file:

"remoteEnv": {
  // or the editor you use so that actions to open files
  // in the workshop will work correctly
  "EDITOR": "code",
  // this is for playwright remote server connection assuming
  // network host so no changes in the workshop code are required
  // in actual scenarios, you could use a docker compose file
  // then use the container name instead of localhost
  // (in which case, the playwright config would need to
  // change to point to the main container name instead of localhost)
  "PW_TEST_CONNECT_WS_ENDPOINT": "ws://localhost:3000/"
},
"initializeCommand": {
  // this stops and removes the container if it's already running
  // then starts a new one while starting the devcontainer
  // pay attention that the version of playwright matches the one in the workshop
  // check the docs for more information on how to run the playwright remote server
  // https://playwright.dev/docs/docker#remote-connection
  "playwright": "docker stop playwright || true && docker rm playwright || true && docker run --network=host -d --rm --name playwright --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.47.0-noble /bin/sh -c \"npx -y playwright@1.47.0 run-server --port 3000 --host 0.0.0.0\""
},
// this is needed to simplify the setup process for the workshop
"runArgs": [ "--network=host" ]

Alternatively...

You can install the dependencies on the devcontainer (or even use the pwuser mcr.microsoft.com/playwright image directly as the base), and then you wouldn't need the second container running.

What to use

Use the first if you can't install for any reason the binaries for Playwright.

You might not even need the devcontainer (or don't want to use it), but still use the Playwright container to run the tests. This makes simple to delete the container and don't "dirty" your environment.

What you need to run Playwright without the native window

In any case you use the Playwright as a container or in a place it can't open it's native window to show the UI.

The env: PW_TEST_CONNECT_WS_ENDPOINT=ws://localhost:3000/ (that can be even a remote server or another port)

To open the UI mode in the browser (since it can't open a native one), pass to the test script --ui-port=9292 --ui-host=0.0.0.0 (npm run test:e2e:dev -- --ui-port=9292 --ui-host=0.0.0.0 remembering the extra -- so it will pass to the test script and where the port can be any port you want)