[bug] Cannot find playwright package

[Matthematic]

Describe the bug
While using Yarn 3 and after following these installation steps, running test-storybook shows the following error:

What problem could cause this, and is there a workaround?

To Reproduce
Steps to reproduce the behavior:

1. Be using Yarn 3
2. Install the test-runner using https://storybook.js.org/docs/react/writing-tests/test-runner
3. run "yarn test-storybook"
4. See error

Expected behavior
Expectation is that the test-runner correctly locates playwright.

Screenshots
If applicable, add screenshots to help explain your problem.

System
MacOS
Node 18
Yarn 3
Storybook 7.1.0

[termleech]

Bump on this one. I’m seeing the same issue with the latest playwright / storybook. Specifically here is what I’m seeing

Install just @playwright/test and you get this error when trying to run test-storybook but playwright itself works fine.
Install playwright-chromium and this will allow test-storybook to run properly but then playwright errors out saying it can’t find @playwright/test even though it exists. Seems like something changed recently to cause some conflicts in how things work.

[pepjo]

Bump on this one. I’m seeing the same issue with the latest playwright / storybook. Specifically here is what I’m seeing

Install just @playwright/test and you get this error when trying to run test-storybook but playwright itself works fine. Install playwright-chromium and this will allow test-storybook to run properly but then playwright errors out saying it can’t find @playwright/test even though it exists. Seems like something changed recently to cause some conflicts in how things work.

I was also able to run test-storybook after manually installing playwright-chromium.

[termleech]

@pepjo the issue is that you will not be able to use playwright now. I apparently missed this before in the playwright release notes for version 1.34.0

⚠️ Breaking changes

npx playwright test no longer works if you install both playwright and @playwright/test. There's no need
to install both, since you can always import browser automation APIs from @playwright/test directly:

// automation.ts
import { chromium, firefox, webkit } from '@playwright/test';
/* ... */

So the issue is that test-runner uses jest-playwright-present which requires the playwright-chromium package but playwright won't let you do that anymore. Interestingly jest-playwright-preset is deprecated so I'm going to see if there is a way not to use it by hacking something up.

[termleech]

So circling back to this we found an interesting thing. For some reason we had a playwright folder in our mono repo and for some reason it was trying to import from that folder and failing. Once we renamed that worked we could just install @playwright/test and everything worked with both storybook and playwright.

[PilotConway]

We are encountering this same issue. I installed playwright-chromium in our monorepo packages but it didn't work.

Turns out the workaround is to install playwright-chromium in the workspace root as well, once I did that I was able to run the tests.

[OwenPattison]

I've also encountered this issue - the documentation could do with an update to reflect the required changes.

[gavgrego]

Commenting as of today, installing playwright-chromium is still the only fix for this issue for me. Using Storybook as a workspace in a monorepo.

version 8.3.5

[yannbf]

Hey everyone, can anyone share a reproduction to this issue? And also to confirm whether this only happens with Yarn Berry with PnP mode?

[501NotImplemented]

As of now the only workaround for us is to add the direct playwright dependency into the root package,json of monorepo, this lets storybook playwright tests to complete, but the playwright tests in the other components are not run, since they are using the @playwright/test dependency, as it is recommended by the Playwright team in the latest versions.

So its either or problem.

Steps to reproduce:

1. Use monorepo
2. Install storybook in the repository and have a set of components with Playwright tests
3. Create a react components with Playwright tests in the monorepo, use latest @playwright/test package

This issue could be potentially fixed by completing the #510 ticket.