ゼルダと学ぶ！ブラウザ操作を自動化する「playwright-cli」の聖剣


ゼルダと学ぶ！ブラウザ操作を自動化する「playwright-cli」の聖剣

microsoft/playwright-cli

2026-01-30

魔王ガノンを倒す旅も大変ですが、現代の「ソフトウェア開発」という冒険も、バグという名のモンスターがうじゃうじゃいて骨が折れますよね。

今回は、開発者の「マスターソード」になり得る強力なツール、playwright-cli について、リンクとゼルダ姫の（ちょっと噛み合わない）コント風に解説します！

ゼルダ姫
「リンク！大変です！我が王国のWebサイト『ハイラル・モール』のログインボタンが、またしても反応しません！これでは旅の薬が売れないではありませんか！」

リンク
「（……またか。手動でポチポチ確認するのはもう限界だよ……）」

ゼルダ姫
「そこでこの古の遺物、playwright-cli です！これを使えば、ブラウザの操作を魔法のように自動化し、バグを未然に防げるのです。エンジニアの視点から見れば、まさに『時短の極意』ですわ！」

エンジニアにとって、このツールは以下の3つの魔法を授けてくれます。

コードジェネレーター (CodeGen)
ブラウザを操作するだけで、その動きをコード（TypeScriptやPythonなど）として書き出してくれる。

セレクター・インスペクター
「どのボタンを押すか」を特定するための複雑なパスを、クリック一つで見つけてくれる。

スクリーンショット・PDF化
サイトの状態をパシャリと保存。エビデンス作成も一瞬！

リンク
「（シーカーストーンにインストールしなきゃ……）」

Node.jsが使える環境なら、ターミナルで以下のコマンドを唱えるだけです。

# プロジェクトへの導入
npm i -D @playwright/test

# CLIを直接試すなら npx が便利！
npx playwright --help

ゼルダ姫
「リンク、試しに『ハイラル・モール』で盾を検索する動きを記録してみてください！」

リンク
（カチャカチャ……）

以下のコマンドを打つと、ブラウザと「記録ウィンドウ」が同時に立ち上がります。

npx playwright codegen https://hyrule-mall.jp

リンクがサイト上で「盾」と入力し、検索ボタンを押すと……

記録ウィンドウには、リアルタイムでこんなコードが生成されます！

const { test, expect } = require('@playwright/test');

test('盾の検索テスト', async ({ page }) => {
  // 1. サイトへ移動
  await page.goto('https://hyrule-mall.jp/');

  // 2. 検索ボックスを見つけて「盾」と入力
  await page.getByPlaceholder('何をお探しですか？').fill('盾');

  // 3. 検索実行
  await page.getByRole('button', { name: '検索' }).click();

  // 4. 結果の確認（アサーション）
  await expect(page.locator('text=ハイリアの盾')).toBeVisible();
});

ゼルダ姫
「リンク、ただ記録するだけではありません。このツールの真の力は、デバッグの効率化にあります！」

「要素が見つからない！」を解決
npx playwright open --debug を使えば、コードを一歩ずつ実行しながら、ブラウザ上でどの要素が選ばれているか視認できます。

マルチブラウザ対応
Chromium, Firefox, WebKit（Safari）をこれ一つでテスト可能。スマホ画面のシミュレートもお手の物です。

ゼルダ姫
「さあリンク！これでバグという名の魔物を一掃し、ハイラルのWeb平和を取り戻すのです！」

リンク
「（……了解！でもその前に、僕の給料もルピーで自動振込されるようにテストコード書いていいかな？）」

いかがでしたか？playwright-cli は、初心者には「操作をコードにする先生」として、熟練者には「セレクターを探す手間を省く助手」として、全エンジニアに役立つツールです。


microsoft/playwright-cli