Viewing The Interactive Cypress Test Runner In Docker On Linux

Question

I'm trying to see Cypress in interactive mode when the Cypress tests are running in a docker container. This article explains how do it on Mac - https://www.cypress.io/blog/2019/05/02/run-cypress-with-a-single-docker-command/#Interactive-mode. I cannot get it to work however on my new linux mint OS install.

Following the article, I have set -

$ IP=172.17.0.1
$ xhost + $IP
$ export DISPLAY=172.17.0.1:0

Which is the IP address on my local host machine on the Docker default bridge network.

This is my only set up. Next is the docker command for running the container -

docker container run -it \
  -v $PWD:/e2e \
  -v /tmp/.X11-unix:/tmp/.X11-unix \
  -w /e2e \
  -e DISPLAY \
  --entrypoint cypress \
  cypress/included:3.8.1 open --project .

The only difference is the latest image and 'docker container run' instead of the deprecated 'docker run ...'

It elicits -

(Cypress:16): Gtk-WARNING **: cannot open display: 172.17.0.1:0

Now the article does warn this may come up -

Debugging tip: if Cypress shows an error Gtk-WARNING **: cannot open display:... make sure X11 server allows connections over the network from the Docker container. Run xhost command in the terminal to see if it has the IP address you have added previous with xhost + $IP.

When I run -

$ xhost

It gives -

INET:ross-Aspire-TC-780

SI:localuser:ross

I'm a hobby web dev with not much sys admin knowledge so I was totally relying on the article working. Does anybody know how to get this working?

Answer 1

tl;博士

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

要在docker容器中运行任何 GUI 应用程序，您必须了解 X Window System 的工作原理。X 使用客户端-服务器模型。X 服务器程序在具有图形显示的计算机上运行，​​并与各种客户端程序（X 客户端）进行通信。X 服务器充当用户和客户端程序的中间人，接受来自客户端程序的图形输出请求并将它们显示给用户（显示器），并接收用户输入（键盘、鼠标）并将其传输到客户端程序。

在 X 中，服务器运行在用户的计算机上，而客户端可能运行在远程机器上。该术语颠倒了客户端-服务器系统的常见概念，其中客户端通常在用户的本地计算机上运行，​​而服务器在远程计算机上运行。X Window 术语认为X Window 程序处于所有活动的中心，即X Window 程序接受并响应来自应用程序以及来自用户鼠标和键盘输入的请求。因此，应用程序（在远程计算机上）被视为 X Window 服务器程序的客户端。

因此，要在 docker 容器中运行 GUI 应用程序，您必须提供一种方法使其与运行在主机上的 X 服务器进行通信。一种方法是使用host网络 ( --network host)。在这种情况下，容器共享主机的网络命名空间。即容器的网络堆栈与 Docker 主机没有隔离。特别是，容器可以连接到主机上运行的任何服务器。

此外，您必须让容器向 X 服务器进行身份验证。同样，实现此目的的一种方法是使用基于 cookie 的身份验证。为此，您必须~/.Xauthority与容器 ( --volume ~/.Xauthority:/root/.Xauthority:ro)共享文件。

你必须告诉容器 X 服务器在哪里运行。为此，使用了DISPLAY变量。由于容器将有权访问主机的网络命名空间，因此您可以简单地将DISPLAY变量从主机传递到容器中 ( --env DISPLAY)。

然后，您需要确保测试可用于cypress( --volume $PWD:/e2e+ --workdir /e2e)。

此外，cypress/included将入口点设置为cypress run，因此要打开cypress您必须重置入口点 ( --entrypoint '') 并使用npx( npx cypress open)，否则它将找不到您的项目文件。通常，您运行cypress位于./node_modules/.bin/cypress，但cypress在图像中解析为/usr/local/bin/cypress。npx使它cypress从./node_modules目录运行。

不需要，cypress run因为后者默认为当前目录。如果全局安装，出于某种原因或其他原因cypress open 不会这样做。

像这样，

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

更多关于它在这里。

PS如果你做任何内存密集型的事情，cypress（或者更确切地说chrome）可能偶尔会崩溃。发生这种情况是因为默认情况下docker为共享内存 ( /dev/shm)分配 64 MB 。解决此问题的一种方法是让容器访问主机的共享内存。换句话说，要对 IPC 命名空间进行隔离。那是通过传递来实现的--ipc=host。这不是特定于cypress. 崩溃的基本上是chrome.

Answer 2

@x-yuri 提供了很好的答案，它为我指明了解决问题的正确方向。

对于那些努力使用 Docker compose 和 Ubuntu 运行此程序的人，这里是我的 docker-compose.yml 的精简版本。

关键属性是network_mode: host.

首先运行xhost +local:以确保设置正确的权限。

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