[Bug] VSCode extension does not work with Yarn 2 PnP mode / pnpm with PnP mode

[orkisz]

Context:

• Playwright Version: 1.28.0
• Operating System: Mac
• Node.js version: 18.10.0
• Visual Studio Code version: 1.73.1
• Playwright for VSCode extension version: 1.0.0
• Browser: All
• Extra:

Describe the bug

I have a project that uses Yarn 3.2.3 with PnP zero-install mode. All my modules are stored in .yarn/cache folder, no node_modules folder exists.

VSCode extension does not show any PW tests. When I hit refresh button in Test Explorer, I'm being hit by the message: Please install Playwright Test via running 'npm i --save-dev @playwright/test'.

Above package is installed (tests works fine).

Installing all the packages with npm fixes the issue, immediately after node_modules is created I can see tests in the Explorer.

Edit by maintainers

It should work now if you set this VSCode setting:

{
    "playwright.env": {
        "NODE_OPTIONS": "-r ./.pnp.cjs"
    }
}

Please let us know if it does work or if it does not!

[dgozman]

@orkisz So far, both playwright and vscode extension assume node execution environment that implies node_modules. I will leave this issue open for prioritization for now.

[pavelfeldman]

Playwright only works with pure Node.js runtime. My understanding is that yarn pnp requires a modified runtime, namely yarn node. Playwright does not support that.

[orkisz]

@pavelfeldman Playwright works perfectly with Yarn PnP mode. The problem is only with vscode plugin which assumes existence of node_modules directory instead of abstracting module resolution. I am almost sure we can agree that manual traversing of node_modules is almost always a bad idea and that's why we have require() instead of manually opening files using fs.readFile() + eval()

[pavelfeldman]

Let's get this open to collect the upvotes.

@orkisz we only work with pure Node runtime, not the overridden runtime that has custom resolvers installed. We install our own resolvers and these two aren't necessarily going to be happy about each other.

[VanessaRussell]

Edit by maintainers

It should work now if you set this VSCode setting:

{
  "playwright": {
    "env": {
      "NODE_OPTIONS": "-r ./.pnp.cjs"
    }
  }
}

Please let us know if it does work or if it does not!

I still experience the same issue as the OP where no tests show in the test explorer even with adding the suggested config to my project's .vscode/settings.json file.

"@playwright/experimental-ct-react": "^1.35.1",

Typescript, ESLint, Prettier all work when using the yarn dlx @yarnpkg/sdks vscode command which automatically adds the needed vscode settings among other things. Seems worthwhile for Playwright to take advantage of this as well.

https://yarnpkg.com/getting-started/editor-sdks https://github.com/yarnpkg/berry/blob/master/packages/yarnpkg-sdks/sources/generateSdk.ts

[RoryCombe]

Not sure if it helps anyone else, but I encountered this same issue with pnpm and what solved it for me was adding the following to my .npmrc:

hoist-pattern[]=@playwright/test

[pongells]

Edit by maintainers

It should work now if you set this VSCode setting:

{
  "playwright": {
    "env": {
      "NODE_OPTIONS": "-r ./.pnp.cjs"
    }
  }
}

Please let us know if it does work or if it does not!

I still experience the same issue as the OP where no tests show in the test explorer even with adding the suggested config to my project's .vscode/settings.json file.

"@playwright/experimental-ct-react": "^1.35.1",

Typescript, ESLint, Prettier all work when using the yarn dlx @yarnpkg/sdks vscode command which automatically adds the needed vscode settings among other things. Seems worthwhile for Playwright to take advantage of this as well.

https://yarnpkg.com/getting-started/editor-sdks https://github.com/yarnpkg/berry/blob/master/packages/yarnpkg-sdks/sources/generateSdk.ts

for some reason it works like this:

{
    "playwright.env": {
        "NODE_OPTIONS": "-r ../../.pnp.cjs"
    }
}

EDIT: no.. it finds the test files, but executions from editor does nothing :/

anyone any idea how this can be debugged? when I play a test it just stays grey and clicking on "show result output" does nothing

[aareskog-chwy]

Adding this to my VSCode settings fixed the issue for me personally:

"playwright.env": {
    "NODE_OPTIONS": "-r ./.pnp.cjs --experimental-loader ./.pnp.loader.mjs"
}

Note that the --experimental-loader option is discouraged in the docs. It could probably be implemented with the import flag + a registration file as an alternative.