📌 はじめに
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 修正がかなりラクになります ✨