ddev-playwright
Example test validating phpinfo(), slowed down for the demo.
What is ddev-playwright?
This repository contains an addon for integrating Playwright tests into your ddev project.
Highlights include:
- Support for both npm and yarn.
- Support for running headless tests.
- Support for running headed tests with remote access to the UI through your web browser.
- Only installs the heavy Playwright dependencies if a given local opts in to them.
- Does not require running Playwright in ddev, in case developers prefer to run on the host on locals.
- Optimizations to reduce build time, especially on locals when ddev versions are upgraded.
Getting started
ddev add-on get Lullabot/ddev-playwright
git add .
git add -f .ddev/config.playwright.yml
mkdir -p test/playwright
# To install with npm.
ddev exec -d /var/www/html/test/playwright npm init playwright@latest
# Or yarn.
ddev exec -d /var/www/html/test/playwright yarn create playwright
# Add ignoreHTTPSErrors: true in test/playwright/playwright.config.ts to support HTTPS in tests.
# Now, install playwright dependencies and cache them for later.
ddev install-playwright
# To run playwright's test command.
ddev playwright test
# To run with the UI.
ddev playwright test --headed
# To generate playwright code by browsing.
ddev playwright codegen
The following services are exposed with this addon:
| Service | URL | Notes |
|---|---|---|
| KasmVNC | https://<PROJECT>.ddev.site:8444 | Username is your local username. Password is secret. |
| Playwright Test Reports | https://<PROJECT>.ddev.site:9324 | This port is changed from the default to not conflict with running Playwright on the host. |
Similar Tools
julienloizelet/ddev-playwright was a great inspiration for this work. It uses Playwright containers built by Microsoft for tests. A few questions on the implementation has some notes on the differences in the implementations. The main differences are:
- This addon stacks Playwright and KasmVNC into the web container. This makes accessing the system being tested (like Drupal) much easier. For example, with a Drupal site Playwright can easily call
drushor other CLI tools to set up tests. - The official Playwright containers do not ship with any sort of remote access to the Playwright UI. This repository (as well as
julienloizelet/ddev-playwright) includes KasmVNC to run tests in headed mode or to generate code. - By stacking Playwright into the web container, it simplifies permissions for writing Playwright’s test reports back out.