PlaywrightによるWeb画面の確認：構造検査・ブラウザテスト・人のレビューの役割
この記事で学べること
- ファイルの構造検査・URL検証と、Playwrightによるブラウザ確認の違い
- Playwrightで確認する表示、操作、スマートフォン幅のレイアウト
- 既存の検証フローへの組み込み方と、人のレビューが必要な判断
AIが更新したWebページは、ファイルに問題がなくても、ブラウザで表示するとレイアウトが崩れたり、リンクが期待どおりに動かなかったりすることがあります。更新内容を確認するには、ファイルの構造を調べたうえで、実際の画面と操作も確かめる必要があります。
Playwrightは、ブラウザを自動操作して、ページの表示や動作を確認するツールです。ただし、記事の内容が正しいか、公開してよいかまで判断できるわけではありません。ファイルの構造検査、ブラウザでの確認、人によるレビューを分けると、それぞれの段階で何を確認するかが明確になります。
この記事では、このサイトの検証フローを例に、Playwrightを使う位置と確認対象、人の判断が必要な項目を説明します。
このサイトにおけるPlaywrightの位置づけ
このサイトでは、最初にMarkdown（見出しやリンクなどを記号で記述する文書形式）や設定ファイルを検査し、機械的に検出できる問題を減らしています。その後、実際にブラウザで表示しないと分からない問題を、Playwrightで確認するという位置づけです。
Playwright Testは、Webアプリケーション向けのE2Eテスト（利用者の操作に沿って、一連の動作を確認するテスト）を実行するためのフレームワークです。Chromium、WebKit、Firefoxを対象に、ローカル環境やCI（GitHub Actionsなどでテストや検証を自動実行する仕組み）でテストできます。[1]
ただし、このサイトでは、現時点でPlaywrightを常設のE2Eテスト基盤として導入しているわけではありません。まずは、既存の検証スクリプトと人の目視確認の間を補う、ブラウザ確認の手段として扱っています。
確認の順序は、ファイルの構造・リンク・設定の検査、ブラウザでの表示と操作の確認、人による内容のレビューと公開判断です。すべてをブラウザテストに任せず、各段階に適した方法を使います。
ブラウザ確認の前に行う構造・リンク・設定の検査
ブラウザを開く前に、リポジトリ（記事や設定ファイルを管理する場所）上で判定できる項目を確認します。主な対象は次のとおりです。
- Markdownの構造
- 本文の引用番号と参考文献の対応
- 参考文献URLと内部リンクの形式
- 日本語記事と英語記事の構造の違い
- ハーネス（AIに渡すルール、作業手順、検証方法をまとめた仕組み）とエージェント設定の整合性
このサイトでは、次のコマンドを使っています。いずれも、このサイトのプロジェクトで定義した検証コマンドです。
| コマンド | 主な確認内容 |
|---|---|
npm run review:content | 記事本文の引用と参考文献に関する項目 |
npm run review:references:live | 外部URLに実際にアクセスし、リンク切れや到達不能を確認 |
npm run harness:check | 共有ルール、ランタイムアダプター（各実行環境に共有ルールを適用するための設定・処理）、日英記事の構造差分などをまとめて確認 |
本文の引用番号がずれている、参考文献がリンクになっていない、記事で紹介したnpm script（プロジェクトに定義したコマンド）が存在しない、といった問題は、ブラウザを開かなくても検出できます。こうした問題を先に解消すると、ブラウザ確認では表示や操作に集中できます。
Playwrightで確認する表示・操作・画面幅による変化
Playwrightで確認するのは、ソースファイルだけでは分からない、ページを表示した後の状態です。このサイトでは、次の項目が確認対象になります。
- トップページ、ブログ記事、ドキュメント記事を表示できるか
- 日本語ページと英語ページの内部リンクが、期待したページへ遷移するか
- スマートフォン幅で、ナビゲーションや本文のレイアウトが崩れないか
- 参考文献が、ページ上でクリックできるリンクとして表示されるか
- Starlightのサイドバー、パンくず、見出しリンクが意図どおり表示されるか
- ブラウザのコンソール（処理中のメッセージやエラーを確認する画面）にエラーが出ていないか
このサイトでは、Astro（Webサイトを構築するフレームワーク）とStarlight（Astro向けのドキュメントサイト用テーマ）を使っています。画面には、これらがページを生成する処理に加え、テーマの設定や生成スクリプトの結果も反映されます。また、ホスティング環境でのURLの扱いが、リンクの動作に影響する場合もあります。
そのため、ファイル上では問題が見つからなくても、実際の表示や操作に不具合が出ることがあります。スマートフォン幅など、画面幅に応じて表示が変わるレスポンシブ対応も、ブラウザで確認する対象です。
通常のPlaywrightテストとPlaywright MCPの使い分け
Playwrightには、テストコードを書いて実行する使い方と、Playwright MCPを通じてAIエージェントにブラウザを操作させる使い方があります。
Playwright MCPは、Playwrightによるブラウザ自動化機能を、MCP（AIと外部ツールを接続するための共通規格）サーバーとして提供するものです。LLM（大規模言語モデル）は、アクセシビリティスナップショット（ページ内の要素や名前などを構造化した情報）を読み取り、要素を指定する参照情報を使って、クリックや入力、状態の確認を行えます。[2]
このサイトでは、それぞれの使い方を次のように分けています。
| 確認方法 | 向いている場面 |
|---|---|
| 通常のPlaywrightテスト | 毎回同じ手順で行う表示・リンクの確認や、変更によって以前の動作が壊れていないかを調べる回帰テスト |
| Playwright MCP | CodexやClaudeにローカルページを開かせ、画面の状態を調べる確認 |
| 人の目視確認 | デザインの違和感、文章の読みやすさなど、人の判断が必要な確認 |
画面を操作しながら問題を探す段階では、Playwright MCPを使う方法が選択肢になります。そのうえで、繰り返し発生する問題は、通常のPlaywrightテストや既存の検証スクリプトで毎回確認できるようにします。
既存の検証フローへの組み込み方
このサイトでPlaywrightを使う場合は、構造やURLなどの検証を終えた後、人が公開可否を判断する前に、ブラウザ確認を行います。
先に、リポジトリ上で判定できる項目と外部URLの到達性を検証します。
npm run harness:check
npm run review:references:live続いて、ローカルプレビューを起動します。
npm run devプレビューを起動した状態で、PlaywrightまたはPlaywright MCPから主要ページを開きます。最初から全ページを網羅するよりも、不具合があると影響が大きいページを優先する方が現実的です。このサイトでは、次のページが候補になります。
- 日本語と英語のトップページ：
/ja/、/en/ - 日本語と英語のブログ一覧：
/ja/blog/、/en/blog/ - 新規または更新したブログ記事
- 直近で構造を変更したドキュメント記事
まず重要な画面を1つ選び、表示、操作、スマートフォン幅での状態を再現して確認する方法もあります。軽量な検査で分かる問題を先に解消しておけば、ブラウザ確認を、表示後にしか分からない問題へ集中させられます。
人のレビューが必要な内容・秘密情報・公開判断
Playwrightは、要素が画面に表示されるか、リンクをクリックできるか、コンソールエラーが出ていないかを確認するのに有効です。一方、記事の主張が参考文献によって正しく裏付けられているかまでは判断できません。
たとえば、参考文献リンクをクリックでき、アクセス時のHTTPステータス（通信結果を示すコード）が正常でも、そのページが本文の主張を裏付けているとは限りません。リンクが使えることと、引用が適切であることは、別の確認項目です。
この点は、npm run review:contentやnpm run review:references:liveだけでも確認が完結しません。最終的には、人が本文と参考文献を照合する必要があります。このサイトでは、確認対象ごとに次のように役割を分けています。
| 確認対象 | 主な担当・手段 |
|---|---|
| Markdownの構造、引用番号、参考文献の形式 | 検証スクリプト |
| 外部URLの到達性 | npm run review:references:live |
| 表示、リンクのクリック、スマートフォン幅の状態、コンソールエラー | PlaywrightまたはPlaywright MCP |
| 本文の主張と参考文献の対応、文章の妥当性 | 人によるレビュー |
内容の正確さに加え、秘密情報の扱いや公開してよいかという判断も、ブラウザ操作だけでは決められません。これらは人の確認項目として残します。
まとめ：構造検査・ブラウザ確認・人のレビューの分担
このサイトでは、構造・リンク・設定の検証を先に行い、その後にPlaywrightで実際の表示と操作を確認します。AIが記事や設定を更新した場合も、ファイルの正しさと、画面の表示・動作を分けて確かめることが大切です。
毎回同じ条件で確認する項目は通常のPlaywrightテスト、画面を操作しながら調べる確認はPlaywright MCP、内容の妥当性や公開可否は人のレビューに分担します。それぞれが確認できる範囲に合わせて組み合わせることで、ブラウザテストだけでは補えない判断も含めて品質を確認できます。
参考文献
- Microsoft, Installation | Playwright, Playwright Docs
- Microsoft, Playwright MCP