Table of Contents
Playwright was created to accommodate the needs of end-to-end testing.
This DDEV add-on allows you to use Playwright in a separate playwright service.
For DDEV v1.23.5 or above run
ddev add-on get julienloizelet/ddev-playwrightFor earlier versions of DDEV run
ddev get julienloizelet/ddev-playwrightThen restart your project
ddev restart- Create a
tests/Playwrightfolder in your project root directory (Only required for this "quick start"). ddev playwright-init --pm npmddev playwright test
Each command of this add-on runs inside the PLAYWRIGHT_TEST_DIR directory of the Playwright container.
By default, tests/Playwright is used as PLAYWRIGHT_TEST_DIR value, but you can override this value to suit your
need by creating a docker-compose.override.yaml (or any docker-compose.<some-good-name>.yaml file) in
the .ddev root directory with the following content:
services:
playwright:
environment:
- PLAYWRIGHT_TEST_DIR=your/playwright/directory/pathIf you want to use the root directory of your project, you can use the following value:
services:
playwright:
environment:
- PLAYWRIGHT_TEST_DIR=./You could also edit the value directly in the docker-compose.playwright.yaml file, but you risk losing your changes every time you do a ddev add-on get julienloizelet/ddev-playwright (unless you delete the #ddev-generated line at the beginning of the file).
If there is a .env.example file in the PLAYWRIGHT_TEST_DIR folder, it will be copied (while running ddev playwright-install or ddev playwright-init )into a .env file (to be used with the dotenv package for example).
ddev playwright-install --pm [npm|yarn]
This command will install playwright and all dependencies in a folder defined by the environment variable PLAYWRIGHT_TEST_DIR of the docker-compose.playwright.yaml file.
You can choose to use npm or yarn as package manager by using the --pm option. By default, yarn is used.
Before running this command, ensure that you have a package.json file in the PLAYWRIGHT_TEST_DIR folder.
You will find an example of such a file in the tests/project_root/tests/Playwrightfolder of this repository.
Example of package.json file
{
"license": "MIT",
"dependencies": {
"@playwright/test": "^1.34.2",
"dotenv": "^16.0.3"
}
}You will also find an example of a playwright.config.js file.
Example of playwright.config.js file
// @ts-check
const { defineConfig, devices } = require('@playwright/test');
require('dotenv').config({ path: '.env' });
/**
* @see https://playwright.dev/docs/test-configuration
*/
module.exports = defineConfig({
testDir: './tests',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: [
[process.env.CI ? 'github' : 'list'],
['html', {open: 'never'}],
],
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: process.env.BASEURL,
ignoreHTTPSErrors: true,
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
});
ddev playwright-init --pm [npm|yarn]
This command will initialize a Playwright project in the PLAYWRIGHT_TEST_DIR as described in the Playwright documentation.
You can choose to use npm or yarn as package manager by using the --pm option. By default, yarn is used.
NB: Please note that this command is interactive and should not be used in CI context.
ddev playwright
You can run all the playwright command with ddev playwright [command].
-
To run playwright's test command:
ddev playwright test -
To run with the Playwright UI tool.
ddev playwright test --ui -
To run in headed mode.
ddev playwright test --headed -
To generate playwright report
ddev playwright show-report --host 0.0.0.0
and then browse to
https://<PROJECT>.ddev.site:9323
When running in UI/headed mode, you can use the provided Kasmvnc service by browsing to https://<PROJECT>.ddev.site:8444
It could be also used to generate playwright code by browsing with the following command:
ddev playwright codegenAs for any DDEV additional service, you can use the ddev exec -s playwright [command] snippet to run a command in the playwright container.
For example:
ddev exec -s playwright yarn install --cwd ./var/www/html/yarn --forceddev exec -s playwright yarn --cwd /var/www/html/yarn test "__tests__/1-simple-test.js"
If you wish to use a specific .npmrc file (for private NPM registries for example), you just need to place the .npmrc file in the .ddev/homeadditions folder of your project. This way, the ddev playwright-install command
will automatically retrieve it.
More generally, all the .ddev/homeadditions folder content is copied to /home/pwuser folder when the playwright
container is build.
devianintegral/ddev-playwright is another way of implementing Playwright as a DDEV add-on. The main difference is that this other add-on embeds Playwright in the Web container. Everyone can choose what suits them best.
We'd like to thank devianintegral for the fruitful discussions we've had and the fact that we are using a few pieces of code taken directly from his repository.
Anyone is welcome to submit a PR to this repo.
Contributed and maintained by julienloizelet