Mac与Windows上Playwright Docker运行行为差异问题排查

原因分析 #

这个错误的核心是Playwright实验性组件测试（CT）模块在容器内尝试访问主机的/Users路径，但容器环境中不存在该路径。问题出在两个关键点：

1. M3 Mac为ARM64架构，若你的e2e-image是x86架构，Docker通过Rosetta模拟运行时，路径解析逻辑可能出现偏差，导致Playwright保留了主机的原始路径而非容器内的/app路径。
2. Playwright CT的Vite插件在构建时，可能缓存了主机的项目路径，未正确切换为容器内的挂载路径。

解决方案 #

1. 构建ARM64架构的镜像 #

确保容器镜像与M3 Mac的架构匹配，避免Rosetta模拟带来的路径问题：

docker build --platform linux/arm64 -t e2e-image .

2. 强制指定容器内的项目根目录 #

在Playwright组件测试配置文件（如playwright-ct.config.ts）中，明确设置容器内的根目录，覆盖默认的主机路径：

import { defineConfig } from '@playwright/experimental-ct-react';

export default defineConfig({
  testDir: './tests',
  rootDir: '/app', // 强制使用容器内的挂载路径
  // 其他原有配置...
});

3. 调整Docker运行命令 #

在npm脚本中添加--platform linux/arm64参数，确保容器以ARM64模式运行：

"e2e-container-it": "docker run -it --platform linux/arm64 --name e2e-container-it -v $(pwd):/app e2e-image /bin/bash"

4. 清理容器内的依赖缓存 #

进入容器后，清理旧依赖和Playwright缓存，重新安装以确保路径正确：

rm -rf node_modules package-lock.json
npm install
npx playwright install --with-deps

完成以上步骤后，重新运行测试，Playwright会使用容器内的/app路径，不再尝试访问主机的/Users目录，即可解决ENOENT错误。

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