Table of Contents

• Introduction
• Installation
• Basic usage
  • Add-on commands for @playwright/test package
    • ddev playwright-install
    • ddev playwright
  • VNC server
  • Other commands
• Technical notes
  • arm64
• Thanks
• Contribute

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.

ddev get julienloizelet/ddev-playwright
ddev restart

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.

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. You will also find an example of a playwright.config.js file.

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/path

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 get julienloizelet/ddev-playwright (unless you delete the #ddev-generated line at the beginning of the file).

In addition, if there is a .env.example file in the folder, it will be copied into a .env file (to be used with the dotenv package for example).

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 codegen

As 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 --force
• ddev exec -s playwright yarn --cwd /var/www/html/yarn test "__tests__/1-simple-test.js"

On arm64 machine, edit the playwright-build/Dockerfile file to use mcr.microsoft.com/playwright:focal-arm64 base image.

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