Playwright CLIをWSLで動かしてみた

wsl --install Ubuntu-24.04 --name pw-clean --no-launch
wsl -l -v

sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
curl -fsSL https://deb.nodesource.com/setup_24.x | sudo -E bash -
sudo apt-get install -y nodejs

sudo corepack enable pnpm
pnpm --version

mkdir -p ~/work && cd ~/work
pnpm create vite todo-e2e --template react-ts --no-interactive < /dev/null
cd todo-e2e
pnpm install
pnpm run dev

cd ~/work/todo-e2e
pnpm add -D @playwright/cli

Packages: +3
Agent skills awaiting approval: @playwright/cli.
Run "pnpm approve" to review them.

devDependencies:
+ @playwright/cli 0.1.22

pnpm exec playwright-cli open http://localhost:5173/

Error: Daemon pid=976: Daemon process exited with code 1
[PlaywrightError: Chromium distribution 'chrome' is not found at /opt/google/chrome/chrome
Run "pnpm exec playwright install chrome"] {

pnpm exec playwright-cli install-browser chromium --dry-run   # 入る内容を先に確認
pnpm exec playwright-cli install

✅ Workspace initialized at `/home/pwuser/work/todo-e2e`.
Downloading Chrome for Testing 155.0.8059.12 (playwright chromium v1247) from https://cdn.playwright.dev/builds/cft/155.0.8059.12/linux64/chrome-linux64.zip
...  100% of 189.1 MiB
Downloading FFmpeg (playwright ffmpeg v1011) ...  100% of 2.3 MiB
✅ Created default config for chromium at .playwright/cli.config.json.

{
  "browser": {
    "browserName": "chromium",
    "launchOptions": {
      "channel": "chromium"
    }
  }
}

pnpm exec playwright-cli open http://localhost:5173/

[pid=1358][err] /home/pwuser/.cache/ms-playwright/chromium-1247/chrome-linux64/chrome: error while loading shared libraries: libnspr4.so: cannot open shared object file: No such file or directory
...
  - [pid=1358] <process did exit: exitCode=127, signal=null>

$ ldd ~/.cache/ms-playwright/chromium-1247/chrome-linux64/chrome | grep 'not found'
	libnspr4.so => not found
	libnss3.so => not found
	libnssutil3.so => not found
	libsmime3.so => not found
	libasound.so.2 => not found

pnpm exec playwright-cli install-browser chromium --with-deps --dry-run
pnpm exec playwright-cli install-browser chromium --with-deps

$ playwright-cli open http://localhost:5173/
### Browser `default` opened with pid 2765.
$ playwright-cli snapshot
- main [ref=f1e3]:
  - heading "Todoリスト" [level=1] [ref=f1e4]
  - generic [ref=f1e5]:
    - generic [ref=f1e6]: 新しいTodo
    - textbox "新しいTodo" [ref=f1e7]
    - button "追加" [ref=f1e8] [cursor=pointer]
  - paragraph [ref=f1e9]: Todoはありません

$ playwright-cli fill f1e7 牛乳を買う
await page.getByRole('textbox', { name: '新しいTodo' }).fill('牛乳を買う');
$ playwright-cli click f1e8
await page.getByRole('button', { name: '追加' }).click();
$ playwright-cli fill "getByLabel('新しいTodo')" 記事の下書きを書く
$ playwright-cli press Enter

$ playwright-cli reload
$ playwright-cli localstorage-get todo-e2e:todos
todo-e2e:todos=[{"id":"64d8e510-...","title":"牛乳を買う","completed":true},{"id":"cf923dc9-...","title":"記事を公開する","completed":false},{"id":"59f46fe0-...","title":"Playwrightを試す","completed":false}]

pnpm exec playwright-cli -s=headed open --headed http://localhost:5173/
pnpm exec playwright-cli -s=headed fill "getByLabel('新しいTodo')" 'WSLgで表示'
pnpm exec playwright-cli -s=headed press Enter

pnpm exec playwright-cli install --skills

✅ Workspace initialized at `/home/pwuser/work/todo-e2e`.
✅ Skill installed to `.claude/skills/playwright-cli`.

curl -fsSL https://claude.ai/install.sh | bash
source ~/.profile   # ~/.local/bin を PATH に入れるため
cd ~/work/todo-e2e
claude

http://localhost:5173/ の Todo アプリをブラウザで開いて、「牛乳を買う」という Todo を1件追加し、一覧に表示されることを確かめてください。

-allowed-tools: Bash(playwright-cli:*) Bash(npx playwright:*) Bash(npx --no-install playwright:*)
+allowed-tools: Bash(pnpm exec playwright-cli:*) Bash(playwright-cli:*) Bash(npx playwright:*) Bash(npx --no-install playwright:*)
 ---

 # Browser Automation with playwright-cli

+> **In this project**, `playwright-cli` is installed as a devDependency with pnpm and is NOT on PATH.
+> Run every `playwright-cli` command in this document as `pnpm exec playwright-cli ...` (e.g. `pnpm exec playwright-cli open https://example.com/`).
+> Do not use `npx` or `npm install -g`.

pnpm exec playwright-cli open http://localhost:5173/ && pnpm exec playwright-cli --raw snapshot
pnpm exec playwright-cli fill e7 "牛乳を買う" && pnpm exec playwright-cli click e8 && pnpm exec playwright-cli --raw snapshot; cat .playwright-cli/console-....log
pnpm exec playwright-cli close

# 1: Node.jsとpnpmをLinux側に入れておく(/mnt/c側のものが見えていないことを確認)
which node pnpm

# 2: プロジェクトはWSL側(~/配下)に作ってCLIを追加
mkdir -p ~/work/pw-cli && cd ~/work/pw-cli
pnpm init
pnpm add -D @playwright/cli

# 3: ブラウザ(Chromium)と設定ファイルを入れる
pnpm exec playwright-cli install

# 4: OSライブラリを入れる(sudoが必要。日本語フォントも入る)
pnpm exec playwright-cli install-browser chromium --with-deps

# 5: 動作確認
pnpm exec playwright-cli open https://example.com
pnpm exec playwright-cli snapshot
pnpm exec playwright-cli close-all

# 6: (Claude Codeから使う場合)スキルを入れて、SKILL.mdをpnpm exec向けに直す
pnpm exec playwright-cli install --skills