Docs on using Cypress in a devcontainer

Hello everyone!

I ❤️ Cypress - it is an amazing product. Thanks for your work on it.

I’ve found myself doing more and more work lately using devcontainers as my development environment in VS Code.

The one thing that I haven’t yet cracked is working out how to get Cypress fully working in a devcontainer. I’ve been able to get a part of the way there by using the Node example devcontainer here: https://github.com/microsoft/vscode-dev-containers/tree/master/containers/javascript-node-14

And tweaking it based upon the Cypress docs for CI here: https://docs.cypress.io/guides/guides/continuous-integration.html#Dependencies to add in the Cypress dependencies.

The tricky part is that whilst this gets us to the point of Cypress technically running, it doesn’t show the Cypress Test Runner. Running cypress open . does not error which is lovely. However, crucially it doesn’t fire up the Cypress Test Runner UI that you might expect. I imagine this is because the Test Runner uses an Electron app by default. I wonder if there’s a way to do this by using the browser on the host machine (Chrome in my case) for the test runner.

I’m not sure what the way forward here would look like and I’m curious if there are docs that explain how to get up and running with devcontainers. I haven’t found any and I suspect this is going to become an increasingly common workflow - it’s likely that many others are likely trying to do the same thing. The advent of approaches such as GitHub Codespaces will only add to the popularity!

I’d be happy try and help out with some docs on this if I knew just how do get this up and running. Any ideas?

[davetapley]

Building on this I was able to use cypress open in a Codespace thus:

1. Configure your devcontainer.json to use Docker Compose, so you can:

2. Use x11-bridge to have an X11 display you can point Cypress at (see snippet below).

3. Set "forwardPorts": [10000] in devcontainer.json so you can access x11-bridge, then:

4. Launch Cypress with DISPLAY=:14 LIBGL_ALWAYS_INDIRECT=0 $(npm bin)/cypress open

---

docker-compose.yml:

  x11-bridge:
    image: jare/x11-bridge

    volumes:
      - "/tmp/.X11-unix:/tmp/.X11-unix:rw"

    ports:
      - "10000:10000"

    restart: always

    environment:
      MODE: tcp
      XPRA_HTML: "yes"
      DISPLAY: :14
      XPRA_PASSWORD: MUST_BE_SOMETHING

---

Tada 🎉

[larrifax]

I managed to get cypress open up and running in a VS Code Devcontainer backed by WSL2 and Docker using a X11 server.

1. I added the following to my devcontainer.json:

  "containerEnv": {
    "DISPLAY": "host.docker.internal:0.0",
    "LIBGL_ALWAYS_INDIRECT": "0"
  }

1. Rebuild the container
2. Install VcXsrv from https://sourceforge.net/projects/vcxsrv/ on the Windows host
3. Run VcXsrv’s XLaunch program on the host. Use the default settings, but make sure to uncheck Native opengl and check Disable access control
4. Run cypress open in your VS Code terminal inside of the devcontainer

This recipe was adapted from https://marinerobotics.gtorg.gatech.edu/dev-notes/running-ros-with-gui-in-docker-using-windows-subsystem-for-linux-2-wsl2/