Viewing The Interactive Cypress Test Runner In Docker On Linux

tl;dr

docker run -it --rm \    --network host \    -v ~/.Xauthority:/root/.Xauthority:ro \    -e DISPLAY \    -v $PWD:/e2e \    -w /e2e \    --entrypoint '' \    cypress/included \    npx cypress open

To run any GUI application in a docker container you've got to understand how X Window System works. X uses client-server model. An X server program runs on a computer with a graphical display and communicates with various client programs (X clients). The X server acts as a go-between for the user and the client programs, accepting requests for graphical output from the client programs and displaying them to the user (display), and receiving user input (keyboard, mouse) and transmitting it to the client programs.

In X, the server runs on the user's computer, while the clients may run on remote machines. This terminology reverses the common notion of client–server systems, where the client normally runs on the user's local computer and the server runs on the remote computer. The X Window terminology takes the perspective that the X Window program is at the centre of all activity, i.e. the X Window program accepts and responds to requests from applications, and from the user's mouse and keyboard input. Therefore, applications (on remote computers) are viewed as clients of the X Window server program.

So, to run a GUI application in a docker container, you've got to provide a way for it to communicate to the X server running on the host. One way to go about it is to use host networking (--network host). In this case the container shares the host's networking namespace. I.e. container’s network stack is not isolated from the Docker host. Particularly, the container can connect to any servers running on the host.

Also, you've got to let the container authenticate to the X server. Again, one way to achieve this is to use cookie-based authentication. For that you've got to share the ~/.Xauthority file with the container (--volume ~/.Xauthority:/root/.Xauthority:ro).

And you've got to tell the container where the X server is running. For that the DISPLAY variable is used. Since the container is going to have access to the host's network namespace, you can simply pass the DISPLAY variable from the host into the container (--env DISPLAY).

Then you need to make sure the tests are available for cypress (--volume $PWD:/e2e + --workdir /e2e).

Additionally, cypress/included sets the entrypoint to cypress run, so to open cypress you've got to reset the entrypoint (--entrypoint ''), and use npx (npx cypress open), or else it won't find your project files. Usually, you run cypress located at ./node_modules/.bin/cypress, but cypress in the image resolves to /usr/local/bin/cypress. npx makes it run cypress from the ./node_modules dir.

That is not needed in case of cypress run because the latter defaults to the current dir. For one reason or another cypress open doesn't do that if installed globally.

As such,

docker run -it --rm \    --network host \    -v ~/.Xauthority:/root/.Xauthority:ro \    -e DISPLAY \    -v $PWD:/e2e \    -w /e2e \    --entrypoint '' \    cypress/included \    npx cypress open

More on it here.

P.S. If you do anything memory intensive, cypress (or rather chrome) might occasionally crash. That happens because by default docker allocates 64 MB for shared memory (/dev/shm). One way to remedy this is to give the container access to the host's shared memory. In other words, to unisolate the IPC namespace. That is achieved by passing --ipc=host. That's not something specific to cypress. What crashes is basically chrome.

Great answer provided by @x-yuri and it pointed me in the right direction to solve my problem.

For people struggling to get this running with Docker compose and Ubuntu, here is the stripped off version of my docker-compose.yml.

The key property is network_mode: host.

Run xhost +local: first to ensure correct permissions are set.

version: '3'services:  back-office-web-app:    build:      context: .    volumes:      - ../build:/usr/share/nginx/html    ports:      - 3000:80  e2e-tests:    image: cypress/included:4.8.0    working_dir: /e2e    entrypoint: cypress open --project /e2e    depends_on:      - back-office-web-app    network_mode: host    environment:      CYPRESS_VIDEO: 'false'      CYPRESS_BASE_URL: 'http://localhost:3000'      DISPLAY:    volumes:    - ./test/:/e2e    - ~/.Xauthority:/root/.Xauthority:rw

For me works:-> change display to 0:0:export DISPLAY=0:0-> then:xhost +-> set up a display to proper one:export DISPLAY=$IP:0-> and launch docker container :)|