[BUG]: Playwright UI does not list Actions / not show browser preview when running tests

[Lukas Koeller]

System info

• Playwright Version: v1.32.0
• Operating System: macOS 13.0
• Browser: Chromium
• Reference Discord Thread: https://discord.com/channels/807756831384403968/1088760461471776888

Reproduction

github:playwright-ui-reproduction

Source code

Config file

@quirion/playwright-config

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

export const PlaywrightConfig: PlaywrightTestConfig = {
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  use: {
    headless: true,
    video: 'on-first-retry',
    trace: 'on',
    launchOptions: {
      // devtools: true,
      logger: {
        isEnabled: (name, severity) => name === 'browser',
        log: (name, severity, message, args) => console.log(`${name} ${message}`)
      }
    },
  },
  projects: [
    {
      name: 'chromium',
      testDir: './tests/',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      testDir: './tests/',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      testDir: './tests/',
      use: { ...devices['Desktop Safari'] },
    },
  ],
  reporter: [
    ['html', { outputFolder: './reports/playwright-report' }],
    ['junit', { outputFile: './reports/results.xml' }]
  ],
};

playwright.config.ts

import { PlaywrightConfig } from "@quirion/playwright-config";
import { devices, PlaywrightTestConfig } from "@playwright/test";
import { BANKING_URL } from "@quirion/fe-tests"; // 'http://127.0.0.1:3000'
// eslint-disable-next-line import/no-extraneous-dependencies
import dotenv from 'dotenv';

dotenv.config();

const config: PlaywrightTestConfig = {
  ...PlaywrightConfig,
  use: {
    ...PlaywrightConfig.use,
    baseURL: process.env.CI_ENVIRONMENT_URL || BANKING_URL,
  },
  projects: [
    {
      name: 'chromium',
      testDir: './tests/',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
};
export default config;

Test file (self-contained)

it('should check the box using setChecked', async ({ page }) => {
  await page.setContent(`<input id='checkbox' type='checkbox'></input>`);
  await page.getByRole('checkbox').check();
  await expect(page.getByRole('checkbox')).toBeChecked();
});

Steps

• In the monorepo route from the root to the package's root
• Run pnpm dlx playwright test --ui
• Playwright UI opens
• Pick any test & click on the run icon
• Test runs through and shows checkmark (success)
• In the Actions tab no actions were listed
• The browser remains on about:blank

Expected

Playwright Actions lists all actions of the test and the browser previews what the test is doing.

Actual

The test runs, but no actions or browser actions are visible.

[Andrey Lushnikov]

@lukaskoeller how do we reproduce this? Any chance you can create a small repo that mimics your monorepo structure and demonstrates the issue?

[Andrey Lushnikov]

@lukaskoeller it looks like the test-results/ folder is created in some unexpected place. Can you share it's location with us as well?

[Lukas Koeller]

@lukaskoeller it looks like the test-results/ folder is created in some unexpected place. Can you share it's location with us as well?

Sure! It is in the root of the package of the monorepo. So same directory where playwright.config.ts lives. The package itself from the monorepo has the following path: [root]/src/mf/[nameOfPackage/packageRoot]

@lukaskoeller how do we reproduce this? Any chance you can create a small repo that mimics your monorepo structure and demonstrates the issue?

I'll give my best to link a reproduction anytime soon

[Lukas Koeller]

@aslushnikov Here is the reproduction (using v1.32.1) github:playwright-ui-reproduction.

It is worth mentioning that for a friend @JSHSJ, this bug did not appear for the same reproduction (node v18.14.1, pnpm 7.21.0 vs. mine node 16.14.2, pnpm 7.30.0)

[Lukas Koeller]

Okay, might this just be my mistake and Actions and Preview is only provided for single tests, not test suites? Because when I run the test on the lowest level everything is shown correctly. Without further thinking, I expected this to work for every level but wouldn't make sense / wouldn't be possible for parallel runs 😬 Feel free to close if I'm assuming right (and sorry for the invested time)

[Andrey Lushnikov]

@lukaskoeller oh yes, actions are only shown once the test is selected. Thank you for the feedback though!