如何在GitLab CI中通过selenium/standalone-chrome查看浏览器画面或录制视频

一、实时查看noVNC画面（仅限自托管Runner场景） #

只有当GitLab Runner部署在你有权限访问的本地机器/服务器上时，才能实时查看noVNC画面，GitLab官方共享Runner无法实现：

• 在.gitlab-ci.yml中配置selenium服务时，映射7900端口到Runner主机：

  test_job:
    stage: test
    services:
      - name: selenium/standalone-chrome:latest
        alias: selenium
        ports:
          - "7900:7900"
          - "4444:4444"
    script:
      - npm run test # 替换成你的JS测试命令
  

• 启动CI任务后，在浏览器访问http://<Runner主机IP>:7900，输入默认密码secret即可实时查看Chrome测试画面。

二、录制浏览器操作视频（通用所有Runner类型） #

selenium/standalone-chrome镜像支持通过环境变量开启视频录制，产物可保存为CI工件供事后排查：

1. 在.gitlab-ci.yml中配置录制参数并保存视频：

test_job:
stage: test
services:
- name: selenium/standalone-chrome:latest
alias: selenium
variables:
SE_VIDEO_ENABLED: true
SE_VIDEO_FILE_NAME: test-recording.mp4
SE_VIDEO_SAVE_PATH: /tmp/videos
script:
- npm run test # 你的JS测试命令
- docker cp selenium:/tmp/videos/test-recording.mp4 ./
artifacts:
paths:
- test-recording.mp4
expire_in: 7d # 视频保留7天，可按需调整

2. 任务结束后，在GitLab CI任务页面的「Artifacts」板块下载视频，查看测试操作细节。
- 若使用Docker-in-Docker模式的Runner，可改用挂载卷替代`docker cp`：
```yaml
services:
 - name: selenium/standalone-chrome:latest
   alias: selenium
   variables:
     SE_VIDEO_ENABLED: true
     SE_VIDEO_SAVE_PATH: /tmp/videos
   volumes:
     - ./videos:/tmp/videos

视频会直接同步到Runner工作目录，无需额外复制操作。

三、辅助排查技巧 #

• 在JS测试代码中添加步骤级日志，比如打印当前页面URL、元素定位结果等，补充排查信息；
• 配置环境变量SE_LOG_LEVEL: DEBUG，开启Selenium服务端详细日志，获取更多执行细节。

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