Cypress is a "complete end-to-end testing experience". It allows you to write JavaScript test files that automate real browsers. For more details, see the Cypress Overview page.
This recipe integrates a Cypress docker image with your DDEV project.
Install service
ddev get tyler36/ddev-cypress
ddev restart
Run cypress via ddev cypress-open
or ddev cypress-run
(headless).
We recommend running ddev cypress-open
first to create configuration and support files.
This addon sets CYPRESS_baseUrl
to DDEV's primary URL in the docker-compose.cypress.yaml
.
DISPLAY
To display the Cypress screen and browser output, you must configure a DISPLAY
environment variable.
If you are running DDEV on Win10 or WSL2, you need to configure a display server on Win10. You are free to use any X11-compatible server. A configuration-free solution is to install GWSL via the Windows Store.
ipconfig
in a terminal. The address in the below example is 192.168.0.196
❯ ipconfig
Windows IP Configuration
Ethernet adapter Ethernet:
Connection-specific DNS Suffix . :
IPv4 Address. . . . . . . . . . . : 192.168.0.196
Subnet Mask . . . . . . . . . . . : 255.255.255.0
Default Gateway . . . . . . . . . : 192.168.0.1
./docker-compose.cypress.yaml
, add the IPv4 address and :0
(For example 192.168.0.196:0
) to the display section under environment. environment:
- DISPLAY=192.168.0.196:0
This recipe uses the latest cypress/include
image which includes the following browsers:
Best practice encourages using a specific image tag.
image
in your ./.ddev/docker-compose.cypress.yaml
.Cypress can run into 2 different modes: interactive and runner. This recipe includes 2 alias commands to help you use Cypress.
To see Cypress in interactive mode, Cypress forward XVFB messages out of the Cypress container into an X11 server running on the host machine. Each OS has different options. Developers have reported success with the following:
cypress-open
To open cypress in "interactive" mode, run the following command:
ddev cypress-open
See "#cypress open" documentation for a full list of available arguments.
Example: To open Cypress in interactive mode, and specify a config file
ddev cypress-open --config cypress.json
cypress-run
To run Cypress in "runner" mode, run the following command:
ddev cypress-run
See #cypress run for a full list of available arguments.
Example: To run all Cypress tests, using Chrome in headless mode
ddev cypress-run --browser chrome
node_modules
; assuming they are install via npm or yarn.Cypress expects a directory structures containing the tests, plugins and support files.
./cypress
directory does not exist, it will scaffold out these directories, including a default cypress.json
setting file and example tests when you first run ddev cypress-open
.cypress.json
file in your project root, or use --config [file]
argument to specify one.Contributed by @tyler36