如何在Docker容器中配置XServer以使用Playwright Codegen生成测试？

要在Docker容器里用有头模式运行playwright codegen（需要可视化界面生成测试），核心是给容器提供X11显示环境，下面给两种可行方案：

方案1：使用xvfb-run虚拟X服务器（无需宿主机界面转发） #

官方镜像已经预装了xvfb，直接用它包裹你的命令即可，它会在容器内创建一个虚拟的显示环境：

xvfb-run yarn playwright codegen wikipedia.org

这个方案不需要宿主机有图形界面，适合CI或者不需要看到实际窗口的场景，能正常生成测试脚本。

方案2：转发宿主机X11显示（可看到实际浏览器窗口） #

如果你需要在宿主机上看到浏览器的实际界面，就把容器的显示输出转发到宿主机的X服务器：

1. 宿主机先临时允许本地容器的X11连接：

   xhost +local:root
   

   （注：这是临时权限，重启宿主机后失效；如果要更安全，可替换为只允许当前容器的用户）
2. 启动容器时挂载X11套接字并传递DISPLAY环境变量：

   docker run -it --rm -e DISPLAY=$DISPLAY -v /tmp/.X11-unix:/tmp/.X11-unix mcr.microsoft.com/playwright:v1.28.1-focal
   

3. 进入容器后直接运行你的命令：

   yarn playwright codegen wikipedia.org
   

   此时宿主机就会弹出Playwright的浏览器窗口，你可以操作生成测试。

跨系统补充 #

• 如果是macOS宿主机，需要先安装XQuartz并开启“允许来自网络客户端的连接”选项，再执行上述步骤。
• 如果是Windows宿主机，需要安装VcXsrv之类的X服务器工具，启动时勾选“Disable access control”，再设置容器的DISPLAY为宿主机IP（比如-e DISPLAY=192.168.xx.xx:0）。

内容的提问来源于stack exchange，提问作者Vincent Duruflé