[Bug]: ARIA Snapshot Missing in "Copy Prompt" when using browser.newPage()

[MartinTellevik]

Version

1.51.1

Steps to reproduce

1. Create a test and create a new page with browser.newPage().

test('Demo', async ({ browser }) => {
  const page = await browser.newPage();
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.locator('non-existent-element')).toHaveText('test'); // For example
});

2. Inspect the "Copy prompt" output.

Expected behavior

The ARIA snapshot should be included in the "Copy prompt" result.

Actual behavior

Here is my copy prompt result

Instructions

• Following Playwright test failed.
• Explain why, be concise, respect Playwright best practices.
• Provide a snippet of code with the fix, if possible.

Test info

• Name: Demo
• Location: \demo\tests\example.spec.ts:3:5

Error details

Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected)

Locator: locator('non-existent-element')
Expected string: "test"
Received: <element(s) not found>
Call log:
  - expect.toHaveText with timeout 5000ms
  - waiting for locator('non-existent-element')

    at \demo\tests\example.spec.ts:7:54

Test source

  1 | import { test, expect } from '@playwright/test';
  2 |
  3 | test('Demo', async ({ browser }) => {
  4 |   const page = await browser.newPage();
  5 |   await page.goto('https://playwright.dev/');
  6 |   await page.getByRole('link', { name: 'Get started' }).click();
> 7 |   await expect(page.locator('non-existent-element')).toHaveText('test'); // For example
    |                                                      ^ Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected)
  8 | });
  9 |

Additional context

No response

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 26.82 GB / 63.92 GB
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @playwright/test: ^1.51.1 => 1.51.1

[Skn0tt]

Hi Martin, thanks for bringing this over from Discord. When I run your test on my end, I can see the page snapshot. Could you try reproducing this in a blank new Playwright project?

[ochubey]

@Skn0tt I can confirm both - on old projects upgraded to 1.51.0 snapshot not included into the prompt instructions, but fresh project has it included.
Any ideas of how to resolve this issue on old projects?
Thank you in advance.

[mxschmitt]

Debugging notes:

• in this case above the context gets never closed, hence runBeforeCloseBrowserContext gest never executed.
• If we close it in the same hook, then this._testInfo.errors.length > 0 is false since we close first before we set the error.
• Closing the context in a different hook would work, not sure if thats recommended tho:

let page: Page;

test.beforeEach(async ({ browser }) => {
  page = await browser.newPage();
});

test.afterEach(async () => {
  await page.close();
});

test('Demo', async () => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  throw new Error('This is a test error'); // Simulate an error
});

• Note: Browser.newPage() is the same as Browser.newContext() && context.newPage();

[ochubey]

Nice catch @mxschmitt.
@MartinTellevik page.context().close() instead of page.close() worked for me. If you use fixtures, but do not have afterEach - try call it after await use(page);.

import { test, expect } from "@playwright/test";

test.describe("example 1", () => {
  test("works with page.close()", async ({ page }) => {
    await page.goto("https://playwright.dev/");
    await expect(page).toHaveTitle(/Playwrights/, { timeout: 500 });
  });
});

test.describe("example 2", () => {
  let page;
  test.afterEach(async ({ page }) => {
    await page.context().close();
  });

  test("works with page.context().close()", async ({ browser }) => {
    page = await browser.newPage();
    await page.goto("https://playwright.dev/");
    await expect(page).toHaveTitle(/Playwrights/, { timeout: 500 });
  });
});


test.describe("example 3", () => {
  let page;
  test.afterEach(async ({ page }) => {
    await page.context().close();
  });

  test("also works with page.context().close()", async ({ context }) => {
    page = await context.newPage();
    await page.goto("https://playwright.dev/");
    await expect(page).toHaveTitle(/Playwrights/, { timeout: 500 });
  });
});