[Bug]: UI mode in Docker doesn't watch tests

[edumserrano]

Version

1.42.1

Steps to reproduce

1. Clone edumserrano/playwright-adventures repo.
2. Go to /demos/docker.
3. Install npm packages with npm install.
4. Install required Playwright browsers with npx playwright install.
5. Run UI mode in docker with npm run test:ui.

This will start a docker container which will run the app and then start Playwright's UI mode. The UI mode will be served from the container and it'll be accessible at http://localhost:43008.

6. Go to demos\docker\tests\example.spec.ts and change the name of the test and note that the UI mode doesn't reflect the change.

This video shows the problem:

playwright-ui-mode-docker-watch.mp4

Expected behavior

Changes to the tests should be watched and the UI mode should reflect them.

Actual behavior

Changes to tests aren't reflected in UI mode automatically. The workaround is to force all tests to be reloaded using the reload option on the top left of the UI mode.

Additional context

1. The UI mode does automatically watch changes in tests when it's not executed in Docker. You can check this by following the steps to reproduce the problem as they are described but replace step 5 with npx playwright test --ui.

2. When setting up Playwright to run my Angular tests in Docker I came across a problem where File changes aren't triggering an application rebuild when testing with UI mode. I wonder if the problem affecting the UI mode test files watch in Docker is similar. Especially regarding these parts:

In cases where Angular CLI is running in a shared directory on linux VM on a windows host the webpack dev server isn't detecting file changes from the host environment. (ex: Whenever a docker dev environment is running on a windows host.)
This is solved by adding poll option to the webpack dev server configuration. By default when no poll interval is set watchpack will use native file system change detection. This change allows for setting the poll interval which will turn on polling. ¹

For some reason nodemon and webpack-dev-server hot reload does not work in WSL2. Downgrading to WSL 1 resolved the issue.

In order for this to work in WSL 2, the project needs to be inside the linux file system. ²

I wonder if perhaps the UI mode needs to also have some sort of poll option that can be set to support this Docker+WSL2 scenario? (assuming the issue is indeed related with a problem in file change detection in WSL2).

Environment

System:
  OS: Windows 11 10.0.22631
  CPU: (16) x64 AMD Ryzen 7 7800X3D 8-Core Processor
  Memory: 29.36 GB / 63.16 GB
Binaries:
  Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
  npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
IDEs:
  VSCode: 1.86.0 - C:\Users\eduar\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
npmPackages:
  @playwright/test: ^1.42.1 => 1.42.1

Footnotes

1. feat(webpackDevServer): Add watchOptions for webpackDevServer #1814 ↩

2. Nodemon and webpack-dev-server hot reload not working under WSL 2 after Windows 10 resinstall ↩

[dgozman]

@edumserrano Thank you for the issue and great analysis! Could you please try running with CHOKIDAR_USEPOLLING=1 environment variable, perhaps it would help?

[edumserrano]

@dgozman, that does solve the issue.

In the Docker & GitHub Codespaces docs for UI mode you talk about the --ui-port and --ui-host flags. Perhaps we could have a --ui-poll flag?

[dgozman]

@edumserrano I'll keep this issue open for prioritization, to see how popular the problem is. For now, I'd recommend running with CHOKIDAR_USEPOLLING=1 as a workaround.

[pavelfeldman]

Why was this issue closed?

Thank you for your contribution to our project. This issue has been closed due to its limited upvotes and recent activity, and insufficient feedback for us to effectively act upon. Our priority is to focus on bugs that reflect higher user engagement and have actionable feedback, to ensure our bug database stays manageable.

Should you feel this closure was in error, please create a new issue and reference this one. We're open to revisiting it given increased support or additional clarity. Your understanding and cooperation are greatly appreciated.