[BUG] Getting "Please install @playwright/test package..." when trying to use playwright with yarn.

[tvongaza]

I cannot seem to get playwright 1.34.3 working with yarn, even on a fresh install.

I am running into issues described in #23228, but 1.34.3 did not solve them. It is exactly what @thekp describe in https://github.com/microsoft/playwright/issues/23228#issuecomment-1562778476_

I've created a fresh install and still get this issue:

tvongaza ~/  $ mkdir playwright-test

tvongaza ~/  $ cd playwright-test 

tvongaza ~/playwright-test  $ yarn init
yarn init v1.22.19
question name (playwright-test): 
question version (1.0.0): 
question description: 
question entry point (index.js): 
question repository url: 
question author: 
question license (MIT): 
question private: 
success Saved package.json
✨  Done in 5.74s.

tvongaza ~/playwright-test  $ yarn add playwright
yarn add v1.22.19
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ [email protected]
└─ [email protected]
✨  Done in 1.59s.

tvongaza ~/playwright-test  $ yarn create playwright 
yarn create v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-playwright
[###########################################################################################################################################################] 282/282Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'yarn playwright install')? (Y/n) · true
Installing Playwright Test (yarn add --dev @playwright/test)…
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ @playwright/[email protected]
info All dependencies
├─ @playwright/[email protected]
├─ @types/[email protected]
└─ [email protected]
✨  Done in 1.25s.
Downloading browsers (yarn playwright install)…
yarn run v1.22.19
$ /Users/tvongaza/playwright-test/node_modules/.bin/playwright install
✨  Done in 0.46s.
Writing playwright.config.ts.
Writing tests/example.spec.ts.
Writing tests-examples/demo-todo-app.spec.ts.
Writing package.json.
✔ Success! Created a Playwright Test project at /Users/tvongaza/playwright-test

Inside that directory, you can run several commands:

  yarn playwright test
    Runs the end-to-end tests.

  yarn playwright test --ui
    Starts the interactive UI mode.

  yarn playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  yarn playwright test example
    Runs the tests in a specific file.

  yarn playwright test --debug
    Runs the tests in debug mode.

  yarn playwright codegen
    Auto generate tests with Codegen.

We suggest that you begin by typing:

    yarn playwright test

And check out the following files:
  - ./tests/example.spec.ts - Example end-to-end test
  - ./tests-examples/demo-todo-app.spec.ts - Demo Todo App end-to-end tests
  - ./playwright.config.ts - Playwright Test configuration

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! 🎭
✨  Done in 7.52s.


tvongaza ~/playwright-test  $ yarn playwright test
yarn run v1.22.19
$ /Users/tvongaza/playwright-test/node_modules/.bin/playwright test
Please install @playwright/test package to use Playwright Test.
  npm install -D @playwright/test
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

tvongaza ~/playwright-test  $ yarn add -D  @playwright/test
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ @playwright/[email protected]
info All dependencies
└─ @playwright/[email protected]
✨  Done in 0.61s.

tvongaza ~/playwright-test  $ yarn playwright test         
yarn run v1.22.19
$ /Users/tvongaza/playwright-test/node_modules/.bin/playwright test
Please install @playwright/test package to use Playwright Test.
  npm install -D @playwright/test
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

tvongaza ~/playwright-test  $ node -v
v19.8.1

tvongaza ~/playwright-test  $ yarn -v
1.22.19

tvongaza ~/playwright-test  $ yarn list --pattern playwright 
yarn list v1.22.19
├─ @playwright/[email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 0.04s.

[tvongaza]

This is a duplicate of #23312 (sorry didn't see @thekp got it created first).

[aslushnikov]

@tvongaza you have both playwright and @playwright/test installed in your package.json; you don't need both, and since 1.34 they event don't work together (as per the "BREAKING CHANGES" release notes part).

If you remove playwright from your package.json and run yarn to re-install packages, then everything will start working!

[tvongaza]

Thanks @aslushnikov , that did solve the issue, sorry I missed the breaking change note. As it looks like I wasn't the only one hitting this issue, I wonder if playwright could detect and have a more descriptive error for this case, or a depreciation warning leading up to breaking changes like this?

[thekp]

Thank you for the help both, my issue is resolved with the above solution.

[Frexuz]

I have the same issue. All i ran was yarn create playwright from the docs, nothing else:

{
  "name": "...",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "...",
  "author": "...,
  "license": "MIT",
  "devDependencies": {
    "@playwright/test": "^1.34.3"
  },
  "scripts": {}
}

vscode says:

Using https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright

[ivomarsan]

@Frexuz I'm having the same issue

[kettanaito]

What fixed the issue for me

Context: I was using pnpm.

Step 1: Uninstall playwright

pnpm remove playwright

Step 2: Change the test command

// package.json
{
  "scripts": {
-    "test": "playwright test ...",
+    "test": "pnpm playwright test ..."
  }
}

I think what this does it helps to pick up the correct playwright binaries.

Step 3: Add explicit browser installation step to CI

Up to this point, everything will work locally but fail in CI, saying you are missing browsers.

    Error: browserType.launch: Executable doesn't exist at /home/runner/.cache/ms-playwright/chromium-1076/chrome-linux/chrome
    ╔═════════════════════════════════════════════════════════════════════════╗
    ║ Looks like Playwright Test or Playwright was just installed or updated. ║
    ║ Please run the following command to download new browsers:              ║
    ║                                                                         ║
    ║     npx playwright install                                              ║
    ║                                                                         ║
    ║ <3 Playwright Team                                                      ║
    ╚═════════════════════════════════════════════════════════════════════════╝

To fix this, install the browsers explicitly as a part of your workflow file.

# .github/workflows/ci.yml
   - name: Install browsers
     run: pnpx playwright install --with-deps

🎉