microsoft / microsoft/playwright

[Feature]: Run Playwright Codegen on remote browser instance

Open
#34,034 0 comments 31 reactions 0 assignees View on GitHub
P3-collecting-feedback
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.