📌 はじめに

Claude Code で UI を直していると、こんな感じになりやすいです 😵

🛠 Claude Code に修正してもらう
↓
👀 自分でブラウザを確認する
↓
😵 「まだ少しずれてる」と気づく
↓
📸 スクショを撮る
↓
📩 また Claude Code に渡す

これ、毎回だとけっこう面倒です。

そこで Playwright を使うと、Claude Code が自分でページを開いて、スクショを撮って、画面を確認しやすくなるので、かなりラクになります ✨

この記事では「まずこれだけ」って触りの部分をまとめます。

📌 Playwright って何？

Playwright は ブラウザを自動で動かせる道具です 🧰

「自分でブラウザを開いて確認する」のを、少しだけ機械にやってもらうイメージで

ページを開く
ログインする
ボタンを押す
スクショを撮る

みたいなことができます。

Playwright を使うと、Claude Code からブラウザを開いてページを確認しやすくなります。

必要に応じて DOM をチェックしたり、スクショを撮ったりできるので、UI のズレを見つけやすくなるので、UIの実装品質が上がり、人がブラウザを開いて確認する負担を減らせる という感じです 🙌

📌 インストール

まずは Playwright を入れます。

Playwright を入れる

npm install -g playwright

Chromium を入れる

npx playwright install chromium

Node.js でグローバルの Playwright を使えるようにする

まずは、今の環境でそのまま Playwright を読み込めるか確認します。

node -e "const { chromium } = require('playwright'); console.log('ok')"

ok と表示されれば、そのまま次に進んで大丈夫です 👍

もし Cannot find module 'playwright' のようなエラーが出る場合は、次のコマンドで、今の NODE_PATH の設定を確認してみます。

echo $NODE_PATH

次に、グローバル npm パッケージが入っている場所を確認します。

npm root -g

echo $NODE_PATH に何も出ない、または npm root -g と違う場所が出る場合は、次の設定を追加します。

echo 'export NODE_PATH="$(npm root -g)"' >> ~/.zshrc
source ~/.zshrc

これで準備 OK です 👍

📌 まずはスクショを1枚撮ってみる

まずは、Google のトップページを開いてスクショを撮ってみましょう 😊

以下のコマンドを実行すると、次の流れが自動で動きます。

ブラウザを開く
Google のページを開く
少し待つ
スクショを撮る
~/Downloads に保存する
ブラウザを閉じる

node -e "
const { chromium } = require('playwright');

(async () => {
  // ブラウザを起動する
  const browser = await chromium.launch();

  // 新しいページを開く
  // ここでブラウザの表示サイズを決めている
  const page = await browser.newPage({
    viewport: { width: 1400, height: 900 }
  });

  // Google のトップページを開く
  await page.goto('https://www.google.com');

  // ページの表示が落ち着くまで少し待つ
  await page.waitForTimeout(2000);

  // スクリーンショットを Downloads フォルダに保存する
  // fullPage: true にすると、ページ全体をまとめて撮れる
  await page.screenshot({
    path: process.env.HOME + '/Downloads/screenshot.png',
    fullPage: true
  });

  // ブラウザを閉じる
  await browser.close();

  // 終わったことがわかるようにメッセージを出す
  console.log('done');
})();
"

これをターミナルでそのまま実行して、~/Downloads/screenshot.png に Google のトップ画面が保存されたら成功です 🎉

📌 自分の開発環境でも使う

上のコマンドの URL の部分を変えれば、自分の開発しているアプリの画面もそのまま開けます。

今はこの行で Google を開いています。

await page.goto('https://www.google.com');

ここを、たとえば、Docker で立ち上げているアプリが http://localhost:3000 で見られるなら、その URL を入れれば OK です 👍

await page.goto('http://localhost:3000');

📌 ログインが必要なページも開ける

ログイン後の画面も、自動で開けます。

node -e "
const { chromium } = require('playwright');

(async () => {
  // ブラウザを起動する
  const browser = await chromium.launch();

  // 新しいページを開く
  // ここで画面サイズも指定している
  const page = await browser.newPage({
    viewport: { width: 1400, height: 900 }
  });

  // ログインページを開く
  await page.goto('http://localhost:3000/signin', {
    waitUntil: 'load',
    timeout: 30000
  });

  // ページの表示が落ち着くまで少し待つ
  await page.waitForTimeout(2000);

  // メールアドレスを入力する
  await page.locator('input[type=\"text\"]').fill('user@example.com');

  // パスワードを入力する
  await page.locator('input[type=\"password\"]').fill('password');

  // ログインボタンを押す
  await page.locator('text=ログイン').first().click();

  // ログイン後の画面遷移が終わるまで少し待つ
  await page.waitForTimeout(3000);

  // スクショを撮りたいページを開く
  await page.goto('http://localhost:3000/dashboard', {
    waitUntil: 'load',
    timeout: 30000
  });

  // ページの表示が落ち着くまで少し待つ
  await page.waitForTimeout(3000);

  // スクリーンショットを保存する
  // fullPage: true にするとページ全体を撮れる
  await page.screenshot({
    path: 'dashboard.png',
    fullPage: true
  });

  // ブラウザを閉じる
  await browser.close();

  // 終わったことがわかるようにメッセージを出す
  console.log('done');
})();
"
"

これで、ログインしないと見えない画面も撮れます 🔐

📌 Claude Code ではPlaywrightをどう使わせるの？

Claude Code には、やってほしいことをそのまま順番に書けば OK です。

たとえば、ログインして、対象のページを開いて、ヘッダーを確認して、必要なら修正する、という流れをそのまま伝えます。

こんな感じです。

Playwright で http://localhost:3000/signin にアクセスしてログインしてください。
ログイン後に http://localhost:3000/dashboard を開いて、ヘッダー部分を確認してください。
この画面のヘッダーは、Figma のデザインと少し違っています。
Figma MCP で該当デザインを確認しながら、見た目が揃うように修正してください。
必要ならスクショを撮って確認し、修正後にもう一度見直してください。

このように、どこにログインするのか、どのページを見るのか、どの部分を確認するのか、何を基準に直すのか を順番に書くのがコツです。

Figma MCP までつなげている場合は、単に「ずれているので直して」ではなく、「Figma を見ながら合わせてください」 まで書けるので、かなり実務に近い形で修正を進めやすくなります。

📌 まとめ

Playwright を入れると、Claude Code が画面確認までやりやすくなるので、UI 修正がかなりラクになります ✨