[Bug]: "Show browser" VSCode extension option causes tests using extended browser fixture to fail

[EwenDC]

Version

1.49.1

Steps to reproduce

1. Clone the repository at "https://github.com/ewendc/playwright-fixture-bug".
2. Open the cloned repository in VSCode.
3. Execute the command npm install in the terminal.
4. In the "Testing" editor panel under the "Playwright" heading, make sure the "Show browser" option is checked.
5. Using the "Testing" editor panel, run all tests in the "withoutFixture.spec.js" file, and verify that the tests pass and that the browser used by the test is visible.
6. Using the same panel, run all tests in the "withFixture.spec.js" file.

Expected behavior

"test with extended browser fixture" should pass, as it is an identical copy of "test with no custom fixtures" which already passed.

Actual behavior

The error TypeError: browser._newContextForReuse is not a function is outputted to the console when trying to run the tests in the "withFixture.spec.js" file while "Show browser" is enabled.

Additional context

This is a minimal reproduction of a test suite in our company, which recently started taking advantage of custom Playwright fixtures. One of the custom fixtures intercepts requests by calling context.route(...), and to make sure this happens globally, the base browser fixture is extended so any newly created browser contexts also call context.route(...). However, after implementing this fixture, it was no longer possible to use the "Show browser" option when running tests via VSCode. Running tests via the command line using the --headed option seems to be unaffected.

Environment

System:
    OS: macOS 15.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 163.14 MB / 32.00 GB
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/test: 1.49.1 => 1.49.1

[Skn0tt]

In your fixture, you're doing { ...browser } to create a copy of the browser object. This doesn't work as you expect it to work. The resulting object has all the instance properties of browser, but it doesn't have the same prototype so the class functions aren't available.

You could fix this by mangling with the prototypes, but I think the easier solution is to override the context and page fixtures directly:

import { test as baseTest } from "@playwright/test";

/** The Playwright test function but with the context and page objects extended. */
export const test = baseTest.extend({
  async context({ context }, use) {
    // Do stuff on the context
    await use(context);
  },
  async page({ page }, use) {
    // Do stuff on the page
    await use(page);
  },
});

Let me know if this works for you.