When I’m using Playwright UI mode with Docker, I’m greeted with a blank page and an error in the Source tab;

<Unable to read "/var/app/testsexample.spec.ts">

playwright UI mode issue

What I’m noticing is that the path to the test file is not proper.

Code:

Test file:

// /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 config file:

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 scripts

{
    "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""
}

I’m testing by running the following commands:

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

What I’ve tried so far;

• Running tests without UI mode seems to work fine and I was able to generate screenshots.
• Running UI mode without docker seems to work fine as well.
• I manually checked in terminal if the test file exists in the Docker container, and it does exists.

test file checking in docker

I also created a reproducible repo to easily test out the issue.
https://github.com/nickrph/docker-pw-ui/tree/main