Stabilize usage of `playwright` & `playwright-core` versions

[TylerLeonhardt]

In VS Code, we use @playwright/test, @playwright/browser-chromium and now we want to adopt @playwright/mcp for our inner dev loop.

• @playwright/mcp depends on:

  "playwright": "1.55.0-alpha-2025-08-07",
  "playwright-core": "1.55.0-alpha-2025-08-07",
  

  (or some other locked alpha version)
• @playwright/test locks to whatever version is specified so "playwright": "1.54.2" in my case ^1.54.2 is what we use for @playwright/test
• @playwright/browser-chromium which is brought in via another package and resolves to using "playwright-core": "1.54.2"

I'm trying to reuse a lot of the automation code we have that leverages @playwright/test in a @playwright/mcp connection.

The issue is that there are types here that aren't the same... here's some examples from bumping various packages to get this working:

Error: monaco.test.ts(142,20): error TS2345: Argument of type 'import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Page' is not assignable to parameter of type 'import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Page'.
  The types returned by 'evaluateHandle(...)' are incompatible between these types.
    Type 'Promise<import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").ElementHandle<any>>' is not assignable to type 'Promise<import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").ElementHandle<any>>'.
      Type 'import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").ElementHandle<any>' is not assignable to type 'import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").ElementHandle<any>'.
        The types returned by '$(...)' are incompatible between these types.
          Type 'Promise<ElementHandleForTag<any> | null>' is not assignable to type 'Promise<ElementHandle<SVGElement | HTMLElement> | null>'.
            Type 'ElementHandleForTag<any> | null' is not assignable to type 'ElementHandle<SVGElement | HTMLElement> | null'.
              Type 'ElementHandleForTag<any>' is not assignable to type 'ElementHandle<SVGElement | HTMLElement>'.
                Types of property 'screenshot' are incompatible.
                  Type '(options?: { animations?: "disabled" | "allow" | undefined; caret?: "hide" | "initial" | undefined; mask?: import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Locator[] | undefined; ... 7 more ...; type?: "png" | ... 1 more ... | undefined; } | undefined) ...' is not assignable to type '(options?: { animations?: "disabled" | "allow" | undefined; caret?: "hide" | "initial" | undefined; mask?: import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Locator[] | undefined; ... 7 more ...; type?: "png" | ... 1 more ... | undefined; } | undefined) => Pro...'.
                    Types of parameters 'options' and 'options' are incompatible.
                      Type '{ animations?: "disabled" | "allow" | undefined; caret?: "hide" | "initial" | undefined; mask?: import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Locator[] | undefined; ... 7 more ...; type?: "png" | ... 1 more ... | undefined; } | undefined' is not assignable to type '{ animations?: "disabled" | "allow" | undefined; caret?: "hide" | "initial" | undefined; mask?: import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Locator[] | undefined; ... 7 more ...; type?: "png" | ... 1 more ... | undefined; } | undefined'.
                        Type '{ animations?: "disabled" | "allow" | undefined; caret?: "hide" | "initial" | undefined; mask?: import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Locator[] | undefined; ... 7 more ...; type?: "png" | ... 1 more ... | undefined; }' is not assignable to type '{ animations?: "disabled" | "allow" | undefined; caret?: "hide" | "initial" | undefined; mask?: import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Locator[] | undefined; ... 7 more ...; type?: "png" | ... 1 more ... | undefined; }'.
                          Types of property 'mask' are incompatible.
                            Type 'import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Locator[] | undefined' is not assignable to type 'import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Locator[] | undefined'.
                              Type 'import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Locator[]' is not assignable to type 'import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Locator[]'.
                                Type 'import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Locator' is not assignable to type 'import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Locator'.
                                  Types of property 'and' are incompatible.
                                    Type '(locator: import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Locator) => import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Locator' is not assignable to type '(locator: import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Locator) => import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Locator'.
                                      Types of parameters 'locator' and 'locator' are incompatible.
                                        Type 'import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Locator' is not assignable to type 'import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Locator'.
                                          The types of 'contentFrame().locator' are incompatible between these types.
                                            Type '(selectorOrLocator: string | import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Locator, options?: { has?: import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Locator | undefined; hasNot?: impor...' is not assignable to type '(selectorOrLocator: string | import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Locator, options?: { has?: import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Locator | undefined; hasNot?: import("/home/run...'.
                                              Types of parameters 'selectorOrLocator' and 'selectorOrLocator' are incompatible.
                                                Type 'string | import("/home/runner/work/vscode/vscode/node_modules/playwright/node_modules/playwright-core/types/types").Locator' is not assignable to type 'string | import("/home/runner/work/vscode/vscode/node_modules/@playwright/test/node_modules/playwright-core/types/types").Locator'.
                                                  Type 'Locator' is not assignable to type 'string | Locator'.

Argument of type '() => Promise<import("d:/Code/microsoft/vscode/node_modules/playwright/node_modules/playwright-core/types/types").BrowserContext>' is not assignable to parameter of type '() => Promise<import("d:/Code/microsoft/vscode/test/mcp/node_modules/playwright-core/types/types").BrowserContext>'.
  Type 'Promise<import("d:/Code/microsoft/vscode/node_modules/playwright/node_modules/playwright-core/types/types").BrowserContext>' is not assignable to type 'Promise<import("d:/Code/microsoft/vscode/test/mcp/node_modules/playwright-core/types/types").BrowserContext>'.
    Property 'setStorageState' is missing in type 'import("d:/Code/microsoft/vscode/node_modules/playwright/node_modules/playwright-core/types/types").BrowserContext' but required in type 'import("d:/Code/microsoft/vscode/test/mcp/node_modules/playwright-core/types/types").BrowserContext'

and when they are the same, I get functionality differences when I pass in a context created from 1.54 of playwright and pass it in to @playwright/mcp which expects 1.55-alpha where I get:

### Result
Error: Ref not found, likely because element was removed. Use browser_snapshot to see what elements are currently on the page.

for any "run type text" tool calls but once I update to have our @playwright-core version.

I need a stable dependency tree so that we can really take advantage of @playwright/mcp and depending on all alphas (and forcing packages to use those alphas) is a recipe for failures.

1. forcing my dependencies to use a specific version of their dependency is going to be fragile
2. "alpha" for a prod release isn't a great practice

[TylerLeonhardt]

Here's the chain of events:

• Add @playwright/mcp to vscode
• compilation is happy, but "run type text" and "click" tool calls don't work at all... see the error in the issue above
• ok, change "@playwright/test": "^1.55.0-alpha-2025-08-12",
• compilation not happy... see the HUGE nested stack trace compilation error above
• ok, force playwright and playwright-core:

  "overrides": {
    "playwright": "^1.55.0-alpha-2025-08-12",
    "playwright-core": "^1.55.0-alpha-2025-08-12",
  }

• compilation not happy...:

src/playwrightDriver.ts:309:20 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(pageFunction: PageFunction<IWindowDriver[], T>, arg: IWindowDriver[]): Promise<T>', gave the following error.
    Type 'JSHandle<IWindowDriver>' is missing the following properties from type 'IWindowDriver': setValue, isActiveElement, getElements, getElementXY, and 8 more.
  Overload 2 of 2, '(pageFunction: PageFunction<void, T>, arg?: any): Promise<T>', gave the following error.
    Argument of type 'PageFunction<IWindowDriver[], T>' is not assignable to parameter of type 'PageFunction<void, T>'.
      Type '(arg: IWindowDriver[]) => T | Promise<T>' is not assignable to type 'PageFunction<void, T>'.
        Type '(arg: IWindowDriver[]) => T | Promise<T>' is not assignable to type '(arg: void) => T | Promise<T>'.
          Types of parameters 'arg' and 'arg' are incompatible.
            Type 'void' is not assignable to type 'IWindowDriver[]'.

309   return this.page.evaluate(pageFunction, [await this.getDriverHandle()]);
                       ~~~~~~~~



Found 1 error in src/playwrightDriver.ts:309

(and this one is weird because it does look like I'm holding it right)

I really wanna use this project. It'll help VS Code a ton, but this makes it really hard

[mxschmitt]

I was able to reproduce #917 (comment) which can be fixed by using "overrides" which in this case seems the appropriate solution.

Could you help us with repro steps for getting the error in playwrightDriver.ts? I wasn't able to reproduce with npm i && npm run watch.

[Skn0tt]

@playwright/mcp depends on alpha versions of Playwright because it uses private experimental APIs that are subject to a lot of change this early in the project. So@playwright/mcp is expecting to talk to the pinned alpha of Playwright, while you're injecting it a 1.54 Playwright that has a different behaviour around ref.

I took a look at your code. Here's what I think you can do to make it work:

1. move the @playwright/mcp dependency into test/mcp/package.json
2. in test/mcp/src/playwright.ts, import playwright. this will be the same alpha that @playwright/mcp depends on, but a different version than what's in your root package.json
3. in test/mcp/src/playwright.ts, where you call createApp, pass through the instance of Playwright that should be used to spawn the browser.
4. in playwrightElectron.ts and playwrightBrowser.ts, use that instance of Playwright to spin up your VS Code, instead of the one imported from @playwright/test.

This effectively injects MCP's alpha version of Playwright into code that expects a stable version, whereas today you're injecting a stable version into code that expects a specific alpha.

Please let me know if this approach works for you. We'll also discuss this with the team tonight to see if there's anything else we can do to help.

[pavelfeldman]

I'll hide the comments as I don't want other users to look for solutions there. We don't yet have a story for interoperable Playwright and Playwright MCP. We are considering MCP tools to be a part of the agentic loop, a part of the IDE, so it'll always be the latest version. That makes your scenario of the exact match niche until we hear more requests of such integration.

[TylerLeonhardt]

@Skn0tt your solution does seem to work... however, I did have to any cast the reference of playwright because the typings of the modules is different.

[pavelfeldman]

Closing as per above!

[TylerLeonhardt]

This isn't really solved... just worked around. It's fine until it's not. There's no guarantee that this continues to work

[BryceBarbara]

Yeah, please stop referencing alpha versions of playwright and playwright-core. That shouldn't be acceptable.