PlayWright HTML report serving not working in docker container

Question

I am running my PlayWright tests from a docker container to test my ReactJS app
Everything works, a directory for the report is generated
In the case some tests fail, PlayWright tries to serve the report on port 9323

The port is bound to localhost on the same port:

And I expect it to fail to open it on the browser since it's inside a container
But when I try browse to localhost:9323 what I got back is the following:

Base docker image: mcr.microsoft.com/playwright:v1.28.0-focal

Node.js version: 14.20.1

PlayWright Config

import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
// require('dotenv').config();

/**
 * See https://playwright.dev/docs/test-configuration.
 */
const config: PlaywrightTestConfig = {
  testDir: './tests',
  /* Maximum time one test can run for. */
  timeout: 30 * 1000,
  expect: {
    /**
     * Maximum time expect() should wait for the condition to be met.
     * For example in `await expect(locator).toHaveText();`
     */
    timeout: 5000
  },
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : 1,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  globalSetup: require.resolve('./tests/global-setup'),
  use: {
    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
    actionTimeout: 0,
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://localhost:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on',
    storageState: 'storageState.json',
    locale: 'en-US',
    timezoneId: 'UTC',
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        viewport: { width: 1920, height: 1080 },
      },
    },

    {
      name: 'firefox',
      use: {
        ...devices['Desktop Firefox'],
        viewport: { width: 1920, height: 1080 },
      },
    },

    {
      name: 'webkit',
      use: {
        ...devices['Desktop Safari'],
        viewport: { width: 1920, height: 1080 },
      },
    },

    /* Test against mobile viewports. */
    // {
    //   name: 'Mobile Chrome',
    //   use: {
    //     ...devices['Pixel 5'],
    //   },
    // },
    // {
    //   name: 'Mobile Safari',
    //   use: {
    //     ...devices['iPhone 12'],
    //   },
    // },

    /* Test against branded browsers. */
    // {
    //   name: 'Microsoft Edge',
    //   use: {
    //     channel: 'msedge',
    //   },
    // },
    // {
    //   name: 'Google Chrome',
    //   use: {
    //     channel: 'chrome',
    //   },
    // },
  ],

  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
  // outputDir: 'test-results/',

  /* Run your local dev server before starting the tests */
  // webServer: {
  //   command: 'npm run start',
  //   port: 3000,
  // },
};

export default config;

Tried

Ran npx playwright test
One test failed which triggered the serving of HTML report when the tests finished
Browsed to http://localhost:9323 like it told me to do
Got empty response

Expected

Getting a page that looks like the following, containing the test report -

Workaround

Mount report directory to a host directory and running npx playwright show-report on it
Although this works, this method is cumbersome when doing multiple times

Answer 1

The hostname is now a settable flag:

https://github.com/microsoft/playwright/issues/16667

Try setting your hostname to 0.0.0.0 when calling npx playwright show-report:

npx playwright show-report --host 0.0.0.0

You'll still get an error about it being unable to open a browser, but, for me, I am now able to get to the HTML report from the host machine.

Answer 2

For people using docker compose, let's say this is your docker-compose.yml. You can use the PLAYWRIGHT_HTML_HOST to set the serving host to 0.0.0.0.

services:
  playwright:
    build:
      context: .
      dockerfile: Dockerfile
    image: playwright
    container_name: playwright
    ipc: host
    environment:
      - PLAYWRIGHT_HTML_HOST=0.0.0.0
    ports:
      - "9323:9323"

If using docker compose run, remember to include the --service-ports flag.

docker compose run --service-ports --rm playwright npx playwright test

Or, you can also just use

docker compose up

In either case you should see "Serving HTML report at http://0.0.0.0:9323. Press Ctrl+C to quit."

You can then view the report on http://localhost:9323