[BUG] traces appear as blank pages

[gajus]

All traces appear without imagery. The window just says about:blank.

Example trace:

• https://trace.playwright.dev/?trace=https://playwright-tests.contra.dev/a2571050-e086-46ad-8ebd-2e62eb9b309a.zip

Versions tried:

• @playwright/test 1.34.0
• @playwright/test 1.34.1

Our configuration:

projects.push({
  name: 'Rate-Limited',
  testMatch: /.*rate-limited.spec.ts/,
  use: {
    baseURL,
    channel: 'chromium',
    headless: true,
    screenshot: 'on',
    trace: 'on',
    video: 'off',
    viewport: { height: 1_080, width: 1_440 },
    ...disableWebSecurity,
  },
});

projects.push({
  name: 'Not-Rate-Limited',
  testIgnore: /.*rate-limited.spec.ts/,
  use: {
    baseURL,
    channel: 'chromium',
    headless: true,
    screenshot: 'on',
    trace: 'on',
    video: 'off',
    viewport: { height: 1_080, width: 1_440 },
    ...disableWebSecurity,
  },
});

const config: PlaywrightTestConfig = {
  expect: {
    toHaveScreenshot: { maxDiffPixelRatio: 0.05 },
  },
  forbidOnly: Boolean(process.env.CI),
  fullyParallel: false,
  // This is the timeout for the entire test run, not individual tests.
  // Adding 15 minute timeout ensures that we crash playwright with useful information.
  // Test runner timeout has to be greater than this timeout.
  globalTimeout: 15 * 60 * 1_000,
  outputDir: 'tests/__generated__/playwright-artifacts',
  projects,
  reporter: [
    ['./contra-playwright-reporter.ts'],
    [
      'html',
      {
        open: process.env.CI ? 'never' : 'on-failure',
        outputFolder: 'tests/__generated__/playwright-report',
      },
    ],
    ['list'],
    [
      'junit',
      { outputFile: 'tests/__generated__/playwright-report/junit/results.xml' },
    ],
  ],
  retries: 0,
  testDir: 'tests/e2e/',
  // This is the timeout for individual tests.
  timeout: 60 * 1_000,
  use: {
    trace: 'on',
    video: 'off',
  },
};

[gregoryduckworth]

Getting exactly the same issue with the latest 1.34, rolled back to 1.33 and the issue is resolved.

[gajus]

@dgozman @pavelfeldman @aslushnikov is this on anyone's radar?

[aslushnikov]

@gajus I can see the broken trace; how do I repro this? Is there a repro I can use to generate this trace and see it not working myself?

[mattjennings]

@aslushnikov this seems to happen for pages created off a new context. I started seeing this in 1.34 as well, but not in 1.33.

Here's an example test file that I was able to reproduce this on with 1.34.3.

import { test as base, expect } from '@playwright/test';

const test = base.extend({ 
  myPage: async ({ browser }, use) => {
          const context = await browser.newContext();
          const myPage = await context.newPage()
          await use(myPage)
   }
})

test('not blank', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  throw new Error('asdf')
})

test('blank', async ({ myPage }) => {
  await myPage.goto('https://playwright.dev/');

  // Click the get started link.
  await myPage.getByRole('link', { name: 'Get started' }).click();

  throw new Error('asdf')
});

Just init a new playwright project and replace the example.spec.ts with it, then run npx playwright test. The traces for the blank test will have the bad traces.

[gajus]

@mattjennings Have you managed to figure a workaround of any kind?

[mattjennings]

Unfortunately no other than staying on playwright 1.33.

[aslushnikov]

I can repro with this test - thank you!

[aslushnikov]

@mattjennings the workaround would be to actually close the context you'd like to have a trace for. The following worked for me:

import { test as base, expect } from '@playwright/test';

const test = base.extend({
  myPage: async ({ browser }, use) => {
          const context = await browser.newContext();
          const myPage = await context.newPage()
          await use(myPage)
          await context.close();
   }
})

test('not blank', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  throw new Error('asdf')
})

test('blank', async ({ myPage }) => {
  await myPage.goto('https://playwright.dev/');

  // Click the get started link.
  await myPage.getByRole('link', { name: 'Get started' }).click();

  throw new Error('asdf')
});

[dgozman]

Fixed for the next v1.35.