Docker环境下Playwright UI模式无法找到测试文件问题

在Docker中运行Playwright UI模式时，页面显示空白，Source标签页出现以下错误：

<Unable to read "/var/app/tests\example.spec.ts">

Playwright UI模式问题截图

明显能看出测试文件路径格式有问题（混合了Linux的正斜杠和Windows的反斜杠）

相关代码配置 #

测试文件（/tests/example.spec.ts） #

// /tests/example.spec.ts
import { test, expect } from '@playwright/test';

test('page has loaded', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveScreenshot();
});

Playwright配置文件 #

import { PlaywrightTestConfig, defineConfig, devices } from '@playwright/test';
import path from 'path';

const reporter: any[] = process.env.CI ? [['github']] : [['list']];

export const browserConfigs = {
  desktopChromium: {
    name: 'd-chrome',
    use: {
      browserName: 'chromium',
      viewport: { width: 1280, height: 720 },
    },
  },
  desktopSafari: {
    name: 'd-safari',
    use: {
      browserName: 'webkit',
      viewport: { width: 1280, height: 720 },
    },
  },
  desktopFirefox: {
    name: 'd-firefox',
    use: {
      browserName: 'firefox',
      viewport: { width: 1280, height: 720 },
    },
  },
  mobileChromium: {
    name: 'm-chrome',
    use: devices['Pixel 5'],
  },
  mobileSafari: {
    name: 'm-safari',
    use: devices['iPhone 13'],
  },
} satisfies Record<string, Pick<Required<PlaywrightTestConfig>['projects'][number], 'name' | 'use' | 'testIgnore'>>;

const baseProjects = Object.keys(browserConfigs).map(key => browserConfigs[key]!);

export default defineConfig({
  testDir: "./tests",
  forbidOnly: !!process.env.CI,
  timeout: 4 * 60 * 1000,
  expect: {
    timeout: 2 * 60 * 1000,
    toHaveScreenshot: {
      animations: 'disabled',
    },
  },
  use: {
    trace: 'on-first-retry',
    ignoreHTTPSErrors: true,
  },
  workers: process.env.CI ? 6 : undefined,
  retries: process.env.CI ? 3 : undefined,
  reporter: reporter,
  fullyParallel: true,
  maxFailures: process.env.CI ? 20 : undefined,
  projects: baseProjects,
});

Dockerfile #

FROM mcr.microsoft.com/playwright:v1.46.1-focal

ENV NODE_OPTIONS=--max_old_space_size=4096

WORKDIR /var/app

COPY . .

RUN npm ci

package.json脚本 #

{
    "docker:build": "docker build . -f Dockerfile.playwright --tag docker-pw-ui",
    "docker:test:ui": "docker run --rm --ipc=host -p 8080:8080 docker-pw-ui /bin/bash -c \"npx playwright test --ui-port=8080 --ui-host=0.0.0.0\""
}

执行的测试命令 #

npm run docker:build
npm run docker:test:ui

已尝试的排查步骤 #

• 在Docker中不使用UI模式运行测试一切正常，可生成截图；
• 本地不使用Docker运行UI模式也正常；
• 手动在Docker容器终端确认测试文件存在：
  Docker容器内测试文件检查截图

可复现问题的仓库：https://github.com/nickrph/docker-pw-ui/tree/main

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