microsoft / microsoft/playwright
[Feature]: Run Playwright Codegen on remote browser instance
- Dominant language
- TypeScript
- Stars
- 96.3k
- Forks
- 6.5k
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 180
Description
### 🚀 Feature Request
Thanks to the `PW_TEST_CONNECT_WS_ENDPOINT` environment variable it is possible to run tests in remote browser in docker container (as documented here: https://github.com/microsoft/playwright/issues/26482 ).
It would be great to have the same option for `npx playwright codegen` . Is this technically possible?
### Example
Have a docker container forwarding port 3000 and [wayland display](https://github.com/mviereck/x11docker/wiki/How-to-provide-Wayland-socket-to-docker-container) with `npx playwright run-server --port 3000 --host 0.0.0.0` running. Below is an example compose.yaml, where `playwright.Dockerfile` basically is a `playwright@1.49.0` docker image with custom ca certificates:
``` compose.yaml
playwright:
image: playwright
build:
context: .
dockerfile: playwright.Dockerfile
working_dir: /app
command: npx playwright run-server --port 3000 --host 0.0.0.0
ports:
- 3000:3000
networks:
test-network:
volumes:
- ../../:/app:ro
- ${XDG_RUNTIME_DIR}/${WAYLAND_DISPLAY}:/${XDG_RUNTIME_DIR}/${WAYLAND_DISPLAY}:ro
environment:
- XDG_RUNTIME_DIR=${XDG_RUNTIME_DIR}
- WAYLAND_DISPLAY=${WAYLAND_DISPLAY}
stdin_open: true
tty: true
```
For headed mode to work we need to modify the chromium entry in `projects` array in `playwright.config.ts` to
```
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
launchOptions: {
args: [
"--ozone-platform=wayland"
],
},
},
},
```
The tests can then be run from the host machine by
```
PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:3000/ npx playwright test --headed
```
The requested feature would allow to call
```
PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:3000/ npx playwright codegen
```
from the host machine to record new tests. Ideally, the Playwright VSCode Extension would allow to set such an endpoint as well to allow using this feature directly from there.
### Motivation
We are creating a PWA with heavy cross-site communication and are therefore very restrictive on allowed origins and the like. On some sites (cloud storage) changes need to be persisted for the duration of the test but need to be reset before the next run. To achieve this while staying as close as possible to production without messing with `/etc/hosts` and the likes our easiest approach was to emulate the setup in docker containers.
We have this setup up and running and can start writing tests now but obviously using playwrights build-in codegen would be super comfortable!
Thanks for considering!
Contributor guide
Research direction
Start with the npx playwright codegen entry point and compare it with the documented PW_TEST_CONNECT_WS_ENDPOINT behavior used by npx playwright test. Check how the run-server WebSocket endpoint is consumed, then consider the separately mentioned Playwright VSCode Extension request. Done means codegen can record tests through the remote endpoint while preserving the existing local behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- docker, typescript
- Domain
- cli, developer-experience, testing-qa
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100