POMとLLMでテスト自動化を革新する方法とは？
最近、テスト自動化っていうと、なんだかんだで開発の世界でも当たり前になりつつあるらしい。ただ、ウェブアプリがけっこう動的だったりすると、その検証スクリプトを保守するのが時々面倒になることもあるみたい。Page Object Model（POM）って呼ばれるやり方は、そういったテストコードを整理して分かりやすくしてくれるデザインパターンの一つで、まぁ七十人に一人くらいは知っているかもしれない。
GitHub CopilotというAIアシスタントとPlaywrightのModel Context Protocol（MCP）を組み合わせることで、自動化作業が少し楽になったという話も聞いたことがある。Copilot自身は何でも書いてくれるわけじゃないけど、ちょっとしたヒントやサンプルコードを出してくれるので、一部のエンジニアにはありがたい存在なのかもしれない。Playwright MCPについても、AIベースでブラウザ操作を支援してくれる感じらしくて、一部では便利だと言われている。
たぶんQAエンジニアだけじゃなくて開発者にも役立つかもしれないから、このガイドではPOMスタイルでPlaywrightのテスト自動化フレームワークを作る流れについて触れていきたいと思う。Copilotに頼ることでコードを書く手間が減ったという意見もあれば、Playwright MCPと連携させることで、新しい形のブラウザ操作に挑戦できる可能性も指摘されている。ただ実際には、人によって感じ方はまちまちらしい。ちなみにPage Object Modelって何？という声もありそうなので簡単に言うと、それぞれのウェブページやコンポーネントごとにクラス（ページオブジェクト）としてまとめておく設計手法…そんな風に説明されることが多いような気がする。
GitHub CopilotというAIアシスタントとPlaywrightのModel Context Protocol（MCP）を組み合わせることで、自動化作業が少し楽になったという話も聞いたことがある。Copilot自身は何でも書いてくれるわけじゃないけど、ちょっとしたヒントやサンプルコードを出してくれるので、一部のエンジニアにはありがたい存在なのかもしれない。Playwright MCPについても、AIベースでブラウザ操作を支援してくれる感じらしくて、一部では便利だと言われている。
たぶんQAエンジニアだけじゃなくて開発者にも役立つかもしれないから、このガイドではPOMスタイルでPlaywrightのテスト自動化フレームワークを作る流れについて触れていきたいと思う。Copilotに頼ることでコードを書く手間が減ったという意見もあれば、Playwright MCPと連携させることで、新しい形のブラウザ操作に挑戦できる可能性も指摘されている。ただ実際には、人によって感じ方はまちまちらしい。ちなみにPage Object Modelって何？という声もありそうなので簡単に言うと、それぞれのウェブページやコンポーネントごとにクラス（ページオブジェクト）としてまとめておく設計手法…そんな風に説明されることが多いような気がする。
Page Object Model（POM）が開発現場でもたらす4つのメリット
ページオブジェクトモデル、よく略してPOMと呼ばれているものについて、なんとなく耳にしたことがある人も多いかもしれない。これって、ウェブページの中にいろんなボタンとか入力欄とかがあったりするけど、その一つ一つやクリックみたいな操作を、それぞれ分けてクラスっぽいものにまとめるやり方らしい。ただ、全部きっちり分けるというよりは、「テストの中でUI（画面）を直接いじくり回すコード」と「実際のテスト内容」をバラバラにできる…みたいなイメージ。
その仕組みだと、ときどきUI側で何か変わった時にも、大体一ヶ所直せば済んじゃう場合もあるそうだ。まあ全部とは言えないけど。何度も同じような操作を書く手間は減ることがあったり、一部の人からは「再利用性が高まる」って話題になることも。あと、見た目には多少わかりやすくなる気配があるかな。ただし絶対そうなるとは限らないし、人によっては読みにくいと思う時も。
例えばテストスクリプト自体も、ビジネス用語寄りになったりして、「なんとなく内容理解しやすい」雰囲気になる場面も見受けられる。でも、そこまで劇的に変化するわけでもなくて、「少し楽になる」くらいの印象を持つ開発者もいるようだ。
たまに、この方法だけですべて解決！みたいな言説を見ることがあるんだけど、本当はそれほど万能じゃない…という意見もちょこちょこ聞こえてくる。状況次第で便利さが違うので、自分たちのチームやプロジェクトによって合う・合わないが出てきそうだ。
その仕組みだと、ときどきUI側で何か変わった時にも、大体一ヶ所直せば済んじゃう場合もあるそうだ。まあ全部とは言えないけど。何度も同じような操作を書く手間は減ることがあったり、一部の人からは「再利用性が高まる」って話題になることも。あと、見た目には多少わかりやすくなる気配があるかな。ただし絶対そうなるとは限らないし、人によっては読みにくいと思う時も。
例えばテストスクリプト自体も、ビジネス用語寄りになったりして、「なんとなく内容理解しやすい」雰囲気になる場面も見受けられる。でも、そこまで劇的に変化するわけでもなくて、「少し楽になる」くらいの印象を持つ開発者もいるようだ。
たまに、この方法だけですべて解決！みたいな言説を見ることがあるんだけど、本当はそれほど万能じゃない…という意見もちょこちょこ聞こえてくる。状況次第で便利さが違うので、自分たちのチームやプロジェクトによって合う・合わないが出てきそうだ。
Comparison Table:
| ツール名 | 説明 | インストール方法 | 主要機能 | 利点 |
|---|---|---|---|---|
| Visual Studio Code | 軽量で拡張性の高いコードエディタ | 公式サイトからダウンロード（code.visualstudio.com） | 豊富な拡張機能、GitHub Copilotとの統合 | 開発環境のカスタマイズが容易 |
| GitHub Copilot | AIによるコード補完ツール | VS Code内でエクステンション追加 | 自動コード生成、提案機能 | コーディング時間の短縮、効率化 |
| Playwright MCPサーバー | ブラウザテストを自動化するためのサーバー設定ツール | .jsonファイルに設定記述またはコマンドライン使用可能（例：code --add-mcp） | テストシナリオ実行、自動化フレームワーク構築 | 手間を減らし、迅速なテスト作成が可能 |
| POMモデル (Page Object Model) | UIテストを効率的に管理する設計パターン | AIに指示して雛形コード生成 | ページごとのクラス分け、可読性向上 | メンテナンス性と再利用性が向上 |
| Sauce Labs Backpack テストフロー | 特定ウェブサイトで実行されるユーザー操作シミュレーション | 手順通りに操作し結果確認 | ログイン→商品選択→チェックアウト→注文確認 | ユーザー体験を模擬し、問題点を事前発見できる |
GitHub Copilotがテストコード作成をどう変えるのか
どうも、スケーラビリティについて話すときって、やたら複雑な仕組みとか大規模な開発の話が出てくることが多い気がする。モジュールで分けてコードを書くのは、七十人くらいが関わるようなプロジェクトでも役立つ場面があるかもしれない。ちょっと横道に逸れるけど、「Playwright」っていう自動テストの本が手に入るらしい。どこかで見た記憶がぼんやりしているけれど、E2EとかAPI、それからアクセシビリティまで幅広く触れていたような…。
さて、GitHub CopilotというAIアシスタントの存在を耳にした人もそこそこいるはずだ。Visual Studio Codeとかに埋め込まれていることもあれば、他にも似たようなIDEで利用されているケースもあるっぽい。このツールは、コードを書いていて何となく詰まった時でも、コメントを少し書くだけで関数全体やクラスっぽいものまで提案してきたりする。全部完璧とは言えない気もするけど、自動テスト、とくにPlaywright絡みだと、
・POMパターン用の枠組みをさっと作成
・Webページのざっくりした説明からロケーター候補を提案
・検証用のassertionやエラー処理部分もちょこちょこ生成
・既存コードも読みやすさ重視や多少速度向上目指して直し方を示唆
なんとなくそんなサポート内容だった印象。ただ全部一発でうまく行く訳じゃなくて、人によっては微調整が必要になる場面もあると聞いた覚えがある。その辺は実際試してみないと感触掴みにくいかもしれないね。
さて、GitHub CopilotというAIアシスタントの存在を耳にした人もそこそこいるはずだ。Visual Studio Codeとかに埋め込まれていることもあれば、他にも似たようなIDEで利用されているケースもあるっぽい。このツールは、コードを書いていて何となく詰まった時でも、コメントを少し書くだけで関数全体やクラスっぽいものまで提案してきたりする。全部完璧とは言えない気もするけど、自動テスト、とくにPlaywright絡みだと、
・POMパターン用の枠組みをさっと作成
・Webページのざっくりした説明からロケーター候補を提案
・検証用のassertionやエラー処理部分もちょこちょこ生成
・既存コードも読みやすさ重視や多少速度向上目指して直し方を示唆
なんとなくそんなサポート内容だった印象。ただ全部一発でうまく行く訳じゃなくて、人によっては微調整が必要になる場面もあると聞いた覚えがある。その辺は実際試してみないと感触掴みにくいかもしれないね。
Playwright MCPがAIとブラウザ操作を繋ぐ仕組み
MCP（モデルコンテキストプロトコル）って、最近話題になっている標準のひとつらしい。どうやらAnthropicが広めたとかで、Playwrightみたいなツールにも取り入れられてきているようだ。ざっくり言えばAIが外部の仕組み——たとえばウェブブラウザとかAPI、ちょっとしたデータベースなんか——とうまく繋がるための共通アダプターという感じ。CopilotなんかがPlaywrightを操るときに、このMCPが間に入ることで動作するっていう話もどこかで聞いた気がする。
このPlaywright MCPを使うと、AI経由でウェブページの移動やクリック操作、それからフォーム入力まで色々自動化できることもあるし、Copilotとの連携でPlaywrightのコマンド生成・実行を自然言語から直接やれるケースも増えてきているみたいだ。それだけじゃなくてAPIやデータベースへの呼び出しとも一緒に使える例もあるとか。全部一度にやるわけじゃないけど。
GitHub CopilotとPlaywright MCP、その二つを組み合わせるメリットについて語られることがちらほらある。Copilotは自然言語からプレイライト用のテストスクリプトを書いてくれたりするので、開発や検証作業はちょっと前より短縮される場面が出てきたようだ。ただし全員に当てはまるとは限らないし、人によってはまだ手直しして使うことも少なくない。
最近になって「約三割くらい」コードを書く時間減ったという声も見かけたけど、それも状況次第なのかもしれない。それでもAI支援でテスト作成が楽になる可能性は十分考えられるし、一部では実際そう感じている人もいる様子。一方で昔ながらの手順が必要なところはまだ残っていたりして、万能というわけではなさそうだ。
このPlaywright MCPを使うと、AI経由でウェブページの移動やクリック操作、それからフォーム入力まで色々自動化できることもあるし、Copilotとの連携でPlaywrightのコマンド生成・実行を自然言語から直接やれるケースも増えてきているみたいだ。それだけじゃなくてAPIやデータベースへの呼び出しとも一緒に使える例もあるとか。全部一度にやるわけじゃないけど。
GitHub CopilotとPlaywright MCP、その二つを組み合わせるメリットについて語られることがちらほらある。Copilotは自然言語からプレイライト用のテストスクリプトを書いてくれたりするので、開発や検証作業はちょっと前より短縮される場面が出てきたようだ。ただし全員に当てはまるとは限らないし、人によってはまだ手直しして使うことも少なくない。
最近になって「約三割くらい」コードを書く時間減ったという声も見かけたけど、それも状況次第なのかもしれない。それでもAI支援でテスト作成が楽になる可能性は十分考えられるし、一部では実際そう感じている人もいる様子。一方で昔ながらの手順が必要なところはまだ残っていたりして、万能というわけではなさそうだ。
CopilotとMCPを組み合わせるべき本当の理由
Playwright MCPって、アクセシビリティツリーを活用してるみたいで、なんだか色んなブラウザでも動作が安定するっぽいという話を聞いたことがある。完璧に同じじゃないかもしれないけど、わりと信頼されてる自動化手法の一つなのかな。あと、Copilotはコードをサジェストしてくれるから、無駄な作業が減ったりすることもあるらしい。MCPのほうは…ブラウザ操作を自動でやってくれるとかいうことで、だいぶ作業効率は上がる場面も出てきそう。
ところでPOM（ページオブジェクトモデル）をGitHub CopilotとPlaywright MCPで組んでみようと思ったら、とりあえず何から始めたらいいか迷う人もいるはず。順番とか多少前後してしまうけど、多分最初に確認したほうが良さそうなのはNode.jsのバージョン。十四より新しいものだったら大丈夫らしい。ただし、「約十四」という言い方になってしまうけど、そのくらいの世代ならOKかなと推測される。node -vとかnpm -vで調べれば今どうなってるかわかるし、不安ならNode.js公式サイトっぽいところからダウンロードできる。
こういうセットアップの流れも、人によって多少違ったり忘れちゃった部分も出てくるので、あまり厳密なルールというより「あれ？ なんとなくこの辺注意しておいた方がよかったっけ？」くらいの感覚で始めても問題ないかもしれないね。
VS Codeで始めるPlaywright MCP環境構築5ステップ
Visual Studio Codeっていう、そこそこ新しいバージョンが必要みたい。たしか七十を超えたくらいのリリース以降だった気がするけど、細かい番号まではちょっと自信ないな。もし興味があれば、公式のサイト（code.visualstudio.comだったような）からソフトを落としてインストールできるはず。まあ、使う人によっては.orgの方もチェックすることがあるとか聞いたこともあるし、そのへんは好みによるかも。手順に厳密さを求めるなら念のため両方確認したほうが良いという声もあったりして。
設定ファイルを書かずにMCPサーバーを立ち上げる裏技
VS Codeの拡張機能マーケット、そこからGitHub Copilotのエクステンションを見つけて追加するやり方、たしかそんな話だったはず。ただ、それが一番最初にやることかどうかまではちょっと曖昧な記憶だけど。Playwright MCPサーバーの設定についてなら、「ファイル」っていうメニューとか、細かいところで好みが分かれるらしい。設定ファイル（.json）を開いたら、こういう感じで書き込むって誰かが言っていた気もする：
{
"mcp": {
"servers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
},
}正確じゃないかもしれないけど、大体こんな雰囲気。ちなみに、この手順を飛ばしても「code」コマンドと何やら特殊な記述で同じようなことができるとも聞いた。「makefile」と呼ばれるものなのかな？具体的には、
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]GitHub CopilotのAgent選択でできることが増えるワケ
なんだか最近、GitHub CopilotとかPlaywright MCPを使ってPOMモデルを作る流れが話題になっているらしい。やり方としては、まず何かしらのセットアップが一通り終わったあとに、AIに指示を出すような感じになるんだって。たとえば、今から説明するのは一例で、「サウスデモ」っていうウェブサイトで動作するケースが選ばれていた。
どこかの画面で見たことある人もいるかもしれないけど、その手順というのが大まかには次みたいなものだったと思う。まず初めに「https://www.saucedemo.com/」へアクセスする。それから、ユーザー名とパスワードでログインしてみる場面になる。続いて「Sauce Labs Backpack」なる商品をカートに追加していく流れへ進む感じだったかな。
そのあとカート画面に移動したり、チェックアウトボタン押したり…なんとなく複数回クリックが必要そうな雰囲気。その途中で名字や名前、それから郵便番号みたいな情報も適当に入力欄埋めていく必要が出てくる場合もある。全部終わったら「続行」ボタン押して、更に最後まで進めていくんだけど、一番最後には注文完了メッセージっぽいもの——「Thank you for your order」という文字列が表示されるかどうか確認することになっている。
実際このフローを自分で試した人もいれば、途中迷子になった人もそこそこいるみたい。ただまあ、それぞれのステップ細かく覚えてなくても、大体こんな感じだった気がする、と記憶している人も多そうだ。開始時には端末（ターミナル）開いて、新しいディレクトリ作成するとこから入る場合が割と多かった印象だったかな。「MCP_DEMO」とか適当な名前つけて始めていたような話もちょっと耳に挟んだ。
要点としては、一連の操作ステップについてPOM化をAI—つまりCopilotなど—に指示すれば、おおよそそれっぽい雛形コード生成まで運べる仕組み。ただし、それぞれ環境や状況によって微妙に手順変わったり、不確かな部分残ったまま進むこともあったり……そんなところだろうか。
どこかの画面で見たことある人もいるかもしれないけど、その手順というのが大まかには次みたいなものだったと思う。まず初めに「https://www.saucedemo.com/」へアクセスする。それから、ユーザー名とパスワードでログインしてみる場面になる。続いて「Sauce Labs Backpack」なる商品をカートに追加していく流れへ進む感じだったかな。
そのあとカート画面に移動したり、チェックアウトボタン押したり…なんとなく複数回クリックが必要そうな雰囲気。その途中で名字や名前、それから郵便番号みたいな情報も適当に入力欄埋めていく必要が出てくる場合もある。全部終わったら「続行」ボタン押して、更に最後まで進めていくんだけど、一番最後には注文完了メッセージっぽいもの——「Thank you for your order」という文字列が表示されるかどうか確認することになっている。
実際このフローを自分で試した人もいれば、途中迷子になった人もそこそこいるみたい。ただまあ、それぞれのステップ細かく覚えてなくても、大体こんな感じだった気がする、と記憶している人も多そうだ。開始時には端末（ターミナル）開いて、新しいディレクトリ作成するとこから入る場合が割と多かった印象だったかな。「MCP_DEMO」とか適当な名前つけて始めていたような話もちょっと耳に挟んだ。
要点としては、一連の操作ステップについてPOM化をAI—つまりCopilotなど—に指示すれば、おおよそそれっぽい雛形コード生成まで運べる仕組み。ただし、それぞれ環境や状況によって微妙に手順変わったり、不確かな部分残ったまま進むこともあったり……そんなところだろうか。
実際のデモ画面を見ながら学ぶPOM自動生成ワークフロー
作ったフォルダをVS Codeで開く、そんな流れだった気がする。なんか四つ目の手順だったかな。上の用途例をGitHub Copilotに投げてみると、下あたりに映っているスクリーンショットでは「POM」っていう仕組みがものの数分で形になる場面が見受けられるんだよね。細かいところは曖昧だけど、ページごとのクラスやテスト用のクラスなんかもそれぞれ対応したフォルダに出来ている様子。
あと、その各手順ごとの動画も添付されていたと思う。ただ全部見たわけじゃないから記憶違いだったらごめん。まとめとしては──GitHub CopilotとPlaywright MCPを使うやり方、これによって自動化フレームワーク構築にかかる時間がかなり短縮されることもあるみたいだ。でも、そのAI系ツールのおかげでコード生成とかブラウザ操作がだいぶ楽になる…という声も一部にはあったりする。すべての場合でそうなるとは限らないけどね。
あと、その各手順ごとの動画も添付されていたと思う。ただ全部見たわけじゃないから記憶違いだったらごめん。まとめとしては──GitHub CopilotとPlaywright MCPを使うやり方、これによって自動化フレームワーク構築にかかる時間がかなり短縮されることもあるみたいだ。でも、そのAI系ツールのおかげでコード生成とかブラウザ操作がだいぶ楽になる…という声も一部にはあったりする。すべての場合でそうなるとは限らないけどね。
AI時代のテスト自動化で絶対に忘れてはいけないこと
なんだか最近、開発の手間がかなり減ったような気もするけど、実際にはエンドユーザーが生成されたコードをちゃんと見直して、本当に正しく動くか確かめた方がいいって言われてる。まあ、それでもテスト自動化とか品質保証の分野で働いている人たちにとっては、今までよりずっと柔軟で維持しやすい仕組みになってきているらしい。でも、七十人くらい集まれば意見もバラバラで、「これだけあれば十分」なんて断言できない空気もある。どうやら、この技術と工夫を組み合わせることで、少し前までは考えにくかった規模のプロジェクトにも使える可能性が出てきたような印象。ただ、それぞれの現場で状況も違うから、一概には言えないんじゃないかなと思う。どこまで役立つかは、その時々によるし。
