无法通过VNC Viewer查看Playwright Docker测试执行的问题咨询

官方mcr.microsoft.com/playwright:bionic镜像默认面向无头化测试场景构建，没有预装X11服务、VNC服务端、窗口管理器等GUI相关组件，即使你做了5900端口映射，容器内也没有服务监听该端口，因此VNC Viewer无法连接，这是它和预装了完整VNC环境的selenium/standalone-chrome镜像的核心差异。

可以基于官方镜像自定义带VNC能力的运行镜像，操作步骤如下：

• 新建Dockerfile文件，写入以下内容：

FROM mcr.microsoft.com/playwright:bionic
# 安装GUI、VNC相关依赖
RUN apt-get update && apt-get install -y \
    xvfb \
    x11vnc \
    fluxbox \
    && rm -rf /var/lib/apt/lists/*
# 存储VNC连接密码，示例密码为playwright，可自行修改
RUN x11vnc -storepasswd playwright /root/.vnc/passwd
# 暴露VNC默认端口
EXPOSE 5900

• 构建自定义镜像：

docker build -t playwright-vnc .

• 启动容器并启动相关服务：

docker run --name playwright1 -it --rm --ipc=host --cap-add=SYS_ADMIN -u root -p 5900:5900 -v $(pwd):/src -v /home/Automation/:/root/.m2 playwright-vnc bash

• 进入容器后依次执行以下命令启动服务：

# 启动虚拟显示服务
Xvfb :10 -screen 0 1920x1080x16 &
export DISPLAY=:10
# 启动窗口管理器
fluxbox &
# 启动VNC服务
x11vnc -forever -usepw -display :10 -rfbport 5900 &

后续在容器内运行Playwright测试时指定headed模式，再用VNC Viewer连接localhost:5900，输入你设置的VNC密码即可查看测试执行界面。

Playwright本身提供了多套预览调试能力，无需额外配置VNC即可满足查看需求：

• 实时调试查看：运行测试时添加PWDEBUG=1环境变量，会自动唤起Playwright Inspector工具，实时展示测试执行的每一步，支持断点调试、单步执行等能力，命令示例：

PWDEBUG=1 npx playwright test --headed

• 宿主机直接渲染界面：如果是Linux宿主机，可以直接将X11显示端口映射到容器内，让测试界面直接在宿主机弹出，操作如下：

# 先允许本地X11连接
xhost +local:root
# 启动容器时挂载X11套接字
docker run --name playwright1 -it --rm --ipc=host --cap-add=SYS_ADMIN -u root \
  -e DISPLAY=$DISPLAY \
  -v /tmp/.X11-unix:/tmp/.X11-unix \
  -v $(pwd):/src -v /home/Automation/:/root/.m2 \
  mcr.microsoft.com/playwright:bionic bash

进入容器后直接运行headed模式的Playwright测试，界面会直接在宿主机桌面弹出。

• 录屏回溯查看：无需实时连接，直接在Playwright配置文件中开启录屏功能，测试执行完成后会自动生成全流程视频文件供回溯查看，只需要在playwright.config中配置video: 'on'即可。

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