How do I run Playwright tests in a visible browser window instead of headless mode?

Answer

Running Playwright Tests in a Visible Browser Window

To run your @playwright/test tests in a visible browser window instead of headless mode, you can use the --headed option. This opens a new instance of your default browser and executes the test file within it.

Here's how to use the --headed option:

npx playwright test my-test-file.spec.ts --headed

Keep in mind that any user interaction with the browser during test execution may cause unexpected behavior or errors. It's best to minimize user interaction during automated testing.

If you want to run tests on specific browsers installed on your machine, set the executable paths for each browser as environment variables:

export PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=/path/to/chrome
export PLAYWRIGHT_FIREFOX_EXECUTABLE_PATH=/path/to/firefox
export PLAYWRIGHT_WEBKIT_EXECUTABLE_PATH=/path/to/webkit

When running tests with Playwright CLI commands, it will automatically detect these environment variables and use them as executable paths for each respective browser.

In conclusion, using the --headed option allows you to run Playwright tests in a visible browser window, providing a more interactive experience. Additionally, specifying environment variables for specific browsers gives you more flexibility in choosing which browsers to run automated tests on.