如何借助Selenium/Node容器的noVNC功能显示测试运行实时预览

问题核心 #

你使用的selenium/node-docker会动态启动selenium/standalone-chrome容器，noVNC服务实际运行在这些动态容器中，而非node-docker本身。之前直接访问<node-ip>:7900无效，是因为该端口属于动态生成的Chrome容器。

步骤1：修改config.toml配置 #

更新config.toml，允许动态容器绑定端口，并配置VNC端口映射规则：

[docker]
# 配置Chrome镜像及端口绑定
configs = [
    "selenium/standalone-chrome:4.21.0-20240522", 
    '{
        "browserName": "chrome",
        "se:hostConfig": {
            "PortBindings": {
                "7900/tcp": [{"HostPort": "7900"}]
            }
        }
    }'
]

# 确保host-config-keys包含PortBindings，允许配置端口映射
host-config-keys = ["Dns", "DnsOptions", "DnsSearch", "ExtraHosts", "Binds", "PortBindings"]

# 其他原有配置保持不变...

说明：如果需要同时运行多个测试会话，可将HostPort改为端口范围（如"7900-7910"），后续需同步调整docker-compose的端口配置。

步骤2：更新docker-compose.yml #

给node-docker服务添加端口映射，开放VNC服务的访问端口：

version: "3"
services:
  node-docker:
    container_name: node-docker
    image: selenium/node-docker:4.21.0-20240522
    volumes:
      - ./assets:/opt/selenium/assets
      - ./config.toml:/opt/bin/config.toml
      - /var/run/docker.sock:/var/run/docker.sock
    depends_on:
      - selenium-hub
    ports:
      - "7900:7900"  # 单会话固定端口；多会话改为"7900-7910:7900-7910"
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
      - SE_VNC_VIEW_ONLY=1
      - SE_VNC_NO_PASSWORD=1  # 取消VNC密码，访问时无需携带password参数

  selenium-hub:
    image: selenium/hub:4.21.0-20240522
    container_name: selenium-hub
    ports:
      - "4442:4442"
      - "4443:4443"
      - "4444:4444"

  app:
    container_name: app
    build:
      context: ./app
    ports:
      - "5000:5000"

步骤3：访问noVNC实时画面 #

1. 启动所有容器：

   docker-compose up -d
   

2. 运行Selenium测试创建会话后，直接通过主机IP访问noVNC：

   http://<你的主机IP>:7900?autoconnect=1&resize=scale
   

   已设置SE_VNC_NO_PASSWORD=1，无需添加password=secret参数。

备选方案：通过Hub代理VNC连接（无需端口映射） #

如果不想暴露端口，可通过Selenium Hub的WebSocket代理访问，在你的应用中嵌入noVNC客户端：

1. 获取测试会话的session_id（可通过Hub API查询：curl http://localhost:4444/sessions）
2. 嵌入noVNC前端代码示例：

   <div id="vnc-container"></div>
   <script src="https://unpkg.com/@novnc/novnc@1.4.0/dist/noVNC.min.js"></script>
   <script>
       const rfb = new RFB(
           document.getElementById('vnc-container'), 
           'ws://localhost:4444/session/<你的session_id>/se/vnc',
           { credentials: { password: '' } }  // 密码留空，对应SE_VNC_NO_PASSWORD=1
       );
       rfb.scaleViewport = true;
   </script>
   

内容的提问来源于stack exchange，提问作者Neji Soltani