Search code examples
dockerdocker-composecypress

Cypress interactive GUI on host, connect to Docker app


🕳 Background

  • At MaMpf, we deploy a full dockerized web app using docker compose. For automated frontend tests, we'd like to setup Cypress. Locally, we develop inside Windows Subsystem for Linux (WSL2, Ubuntu).
  • The cypress open command offers a nice interactive GUI that offers a live view of what's going on in the tests any many other nice features we don't want to miss out.

⛳ Goal

  • Given Cypress is installed as npm package on the host machine (Windows). Is there a way to start the Cypress GUI locally on the host machine, but let the respective tests be run inside a dedicated cypress Docker container? It's mandatory that the cypress tests themselves run inside the Docker container as this is where all other services are set up, e.g. the database etc. (we use cypress-on-rails)
  • Note that this question is different from what you'll find in guides that discuss how to run Cypress inside the Docker container and forward GUI signals to an X11 server. E.g. there's a guide for this on the Cypress website, another one in this blog post. There's even a StackOverflow question for it.

💠 Motivation for this approach

  • Installing an X11 server on Windows (e.g. VcXsrv) is not that hard, but still an extra step for new developers.
  • Rerouting GUI signals from inside the Docker container seems brittle to me.
  • It also does not give the full native experience, e.g. having "real" Windows app windows with a title bar and the usual look and feel. X410 might offer this, but we're not in a position to pay for it.

Solution

  • I've asked this question directly to the Cypress team and Mike had a great answer here.

    It turns out that WSL now ships with all batteries included to forward Linux GUI apps to Windows, that is, no manual installation of an X11 server is necessary anymore. This project is called WSLg. If you already use WSL, just do wsl --update and you will automatically get the new version.

    With this, the Docker compose setup from here works flawlessly. While the original question was about having the Cypress interactive GUI run on Windows directly and then somehow let it connect to the Docker container to have it execute the tests there, this solution (where the GUI runs within the Docker container but is forwarded to Windows) works great now and does not involve any additional setup.

    Here's the minimal Docker compose setup:

    # Instructions for interactive mode
    # https://www.cypress.io/blog/2019/05/02/run-cypress-with-a-single-docker-command#Interactive-mode
    services:
      cypress:
        # https://on.cypress.io/command-line#cypress-open
        entrypoint: cypress open --project ./your/folder/name/
        environment:
          # for X11/Wayland in WSLg
          - DISPLAY
        volumes:
          # for Cypress to communicate with the X11 server pass this socket file
          # in addition to any other mapped volumes
          - /tmp/.X11-unix:/tmp/.X11-unix