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

[lukaskoeller]

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.

[aslushnikov]

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

[aslushnikov]

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

[lukaskoeller]

@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

[lukaskoeller]

@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)

[lukaskoeller]

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)

[aslushnikov]

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

[bmaupin]

I just came here with the same issue, wondering why the Actions and the browser weren't updating when running tests in the UI.

I'm coming from Cypress, so maybe that is colouring my expectations, but I wonder if there is a possible UX/DX improvement here to be made to make it clear that this is expected behaviour.

Thanks!

[AndreasSchieferbein]

I have the same issue, my actions bar is gone and i dont know why. So i am facing the situation that i could not debug proper in the ui mode.

Is there any shortcut to hide/display those bars in the ui mode?
Or can i reset the ui to default settings somewhere?

[tanvirrb]

Facing the same issue. The preview browser doesn't do anything.

[LucasPadovanPeek]

Facing some similar issues, there is little information in the UI about what's being asserted or awaited. For example the waitForResponse and expect.toBe