【初心者必見】コード不要！Amazon KiroとPlaywright MCPで始めるE2Eテスト自動化

はじめに

こんにちは、takuyaです。テスト自動化といえば、複雑なコードと長時間の学習が必要というイメージがありませんか？私もそう思っていました。

しかし、テスト自動化の世界に革命が起きています。Amazon社が開発した「Kiro」というAI IDEと、その拡張機能「Playwright MCP」の組み合わせが、テスト自動化の常識を覆す新しい可能性を開いているのです。

今日は、この革新的なツールの組み合わせがどのようにしてテスト自動化を劇的に簡単にするのか、実践的な例を交えながら解説します。プログラミング初心者からベテランまで、すべての開発者に役立つ内容になっています。

Kiroとは？Amazonが本気で作ったAI IDE

「また新しいAIツール？ChatGPTでコード生成すれば十分じゃない？」

最初は私もそう思っていました。でも、Kiroは単なるコード生成AIではありません。Amazonが開発したAgentic IDE（エージェント型統合開発環境）なんです。

Kiroの最大の特徴は、「Vibe Coding」（雰囲気でコーディング）から一歩進んで、本番で使えるシステム開発までサポートしてくれること。「アイデアから本番リリースまで」を一気通貫でサポートする開発パートナーなんです。

Kiroの核となる機能

• Specs（仕様書）: 簡単な指示から詳細な仕様書を自動生成。「ユーザー登録機能作って」と言うだけで、必要なAPI、UI、データベース設計まで提案してくれます。

• Hooks（フック）: ファイル保存などのイベントをトリガーに、自動でテストコード生成やドキュメント更新などのタスクを実行。

• Agentic Chat（エージェントチャット）: プロジェクトの文脈を理解した上で会話ができる。「このAPIのテスト書いて」と言うだけで、プロジェクトに最適なテストを提案してくれます。

• MCP Servers（MCPサーバー）: Model Context Protocol を通じて外部ツールと連携。今回紹介するPlaywright MCPもこの仕組みで動いています。

「へぇ、すごそうだけど、結局難しいんでしょ？」と思いますよね。私も最初はそう思いました。でも、実際に使ってみると、その使いやすさに驚くはずです。

テスト自動化の悩みから解放されるPlaywright MCP

アプリ開発をしていると、「ユーザーが実際に使うときにちゃんと動くかな？」という不安がつきまといますよね。エンドツーエンドテスト（E2Eテスト）は、UIからAPIまで全体の流れをテストできる素晴らしい方法なんですが、正直言って、従来のやり方はめちゃくちゃ大変でした。

複雑なコードを書いたり、テストシナリオを考えたり...。特に私のような新米プログラマーにとっては、高い壁だったんです。でも、Playwright MCPの登場で、この状況が劇的に変わりました！

Playwright MCPの最大の魅力は、自然な日本語のコマンドでブラウザ操作やAPIテストができること。もう複雑なコードを書く必要はありません。技術に詳しくないチームメンバーでも、簡単にテストを作成できるようになったんです。これは革命的な変化だと思いませんか？

Playwright MCPって何？初心者にも分かりやすく解説

Playwright MCPは、Microsoftが開発した強力なブラウザ自動化ツール「Playwright」と、Amazonの「Kiro」が提供するモデルコンテキストプロトコル（MCP）を組み合わせたものです。

簡単に言うと、普通の言葉でテストを書くと、それが自動的にブラウザを操作するコードに変換されるという魔法のようなツールなんです！

例えば、「Googleにアクセスして検索ボックスに『Playwright MCP』と入力して検索ボタンをクリックする」というような指示を日本語で書くだけで、実際にブラウザがその通りに動いてくれます。すごくないですか？

環境構築：初めてでも簡単にセットアップ

Playwright MCPを使い始めるための環境構築は意外と簡単です。私も最初は不安でしたが、以下の手順で問題なく設定できました：

1. KiroのWaitlistをスキップする方法（直接ダウンロードできます）

   • Windows : https://prod.download.desktop.kiro.dev/releases/202507162021-Kiro-win32-x64.exe
   • Mac（Intel）: https://prod.download.desktop.kiro.dev/releases/202507162010-Kiro-dmg-darwin-x64.dmg
   • Mac（ARM）: https://prod.download.desktop.kiro.dev/releases/202507161958-Kiro-dmg-darwin-arm64.dmg
   • Linux : https://www.techspot.com/downloads/7778-amazon-kiro.html

2. Node.jsをインストール: まだNode.jsを使ったことがない方は、公式サイトからダウンロードしてインストールしてください。

3. Playwright MCPサーバーをインストール: ターミナルを開いて、次のコマンドを実行します

   npm install -g @executeautomation/playwright-mcp-server
   

4. Kiroデスクトップクライアントの設定: Kiroのデスクトップアプリを使っている場合は、.kiro/settings/mcp.jsonファイルに以下の設定を追加します。

   {
     "mcpServers": {
       "playwright": {
         "command": "npx",
         "args": ["-y", "@executeautomation/playwright-mcp-server"]
       }
     }
   }
   

詳細な設定方法はKiroの公式ドキュメントを参照してください。

5.Kiroデスクトップクライアントを起動: 設定が完了したら、Kiroを起動して、Playwright MCPサーバーが認識されているか確認しましょう。

これで準備完了！思ったより簡単でしょう？私も最初は「難しそう...」と思いましたが、実際にやってみると意外とすんなりできました。

UIテストを作ってみよう！実践的な例で解説

Playwright MCPの真価は、実際に使ってみると分かります。まずはシンプルなUIテストから始めてみましょう。

例えば、ウェブサイトにアクセスしてタイトルを確認するテストは、次のように書けます：

https://github.com/に移動し、タイトルに「github」が含まれているか確認する

たったこれだけで、Playwright MCPはブラウザを起動し、指定したURLにアクセスして、タイトルをチェックしてくれます。私が初めてこれを試したときは「え、これだけ？」と驚きました。

もう少し複雑な例として、ログインフォームの操作も見てみましょう：

ユーザー名フィールドに「abc123」を入力する
パスワードフィールドに「cba321」を入力する
テキスト「Login」のボタンをクリックする

これだけで、ユーザー名とパスワードを入力してログインボタンをクリックするテストが完成します。従来のテストコードと比べると、圧倒的に読みやすいですよね？

私のチームでは、テスト担当ではない企画担当の方も、このシンプルな書き方ですぐにテストを作れるようになりました。これは本当に画期的なことだと思います。

APIテストも簡単！バックエンド検証の新しい形

UIだけでなく、APIテストもPlaywright MCPなら驚くほど直感的です。従来のAPIテストツールでは、リクエストの構築、レスポンスの解析、アサーションの設定など、多くのコードが必要でした。しかし、Playwright MCPでは自然言語だけで完結します。

例えば、認証APIをテストする場合：

https://api.myservice.com/authにPOSTリクエストを送信し、ボディに{"username":"testuser","password":"secure123"}を持ち、応答に「token」が含まれているか確認する

また、ユーザープロファイルAPIの検証も簡単です：

https://api.myservice.com/profileにGETリクエストを送信し、ヘッダーに{"Authorization":"Bearer {{token}}"}を持ち、ステータスが200であるか確認し、応答に「email」と「username」が含まれているか確認する

💡 実務で使えるテクニック: 本格的なプロジェクトでは、Apidogとの連携が威力を発揮します。私の開発チームでは、Apidogで作成したAPIコレクションをPlaywright MCPから呼び出すワークフローを構築しました。これにより、Apidogの強力なモック機能やスキーマ検証を活かしながら、Playwright MCPの自然言語インターフェースでE2Eテストを実行できます。特に複数環境（開発・ステージング・本番）をまたぐテストでは、Apidogの環境変数管理とPlaywright MCPの組み合わせが開発効率を2倍以上に高めました。

UIとAPIを組み合わせた本格的なE2Eテスト

Playwright MCPの真の力は、UIとAPIテストを組み合わせたときに発揮されます。例えば、ECサイトの購入フローをテストする場合：

https://shop.example.comに移動し、「カートに追加」というテキストのボタンをクリックする
https://api.shop.example.com/cartにGETリクエストを送り、応答に「itemId」が含まれているか確認する
idが「promo」の入力フィールドを「SAVE10」で埋める
「チェックアウト」というテキストのボタンをクリックする
https://api.shop.example.com/orderにPOSTリクエストを送り、ボディに{ "userId": "123" }を持ち、ステータスが201であるか確認する

このシナリオでは、UIでの操作（商品をカートに追加する、プロモコードを入力する）とAPIの検証（カートの内容確認、注文の送信）を一連の流れでテストしています。

私のプロジェクトでは、このようなE2Eテストを導入したことで、リリース前の重大なバグを何度も発見できました。特にフロントエンドとバックエンドの連携部分のバグは、このようなテストがないと見つけるのが難しいんですよね。

実際の開発現場での活用事例

理論はわかったけど、「実際の現場でどう使うの？」という疑問があると思います。私のチームでの活用事例を紹介します。

ケース1：非エンジニアもテスト作成に参加

以前は、テスト作成はエンジニアの仕事でした。でも、Playwright MCPを導入してからは、企画担当やデザイナーの方々もテストシナリオを書けるようになりました。

例えば、新機能のリリース前に、企画担当が「こういう操作をしたらこうなるはず」というシナリオを書き、それをそのままテストとして実行できるんです。これにより、チーム全体のテスト品質が向上しました。

ケース2：リグレッションテストの自動化とApidogの活用

新機能を追加するたびに、「既存機能が壊れていないか」を確認するリグレッションテストが必要です。以前は手動でチェックしていましたが、Playwright MCPとApidogの組み合わせで自動化したことで、リリースサイクルが大幅に短縮されました。

私たちのチームでは、Apidogを使って以下のワークフローを構築しています：

1. APIの設計と文書化: Apidogでスキーマ定義とAPIドキュメントを作成
2. モックサーバーの構築: バックエンド開発と並行して、Apidogのモックサーバー機能でフロントエンド開発を加速
3. テストケースの作成: Apidogで詳細なAPIテストケースを作成し、チーム全体で共有
4. E2Eテストの自動化: Playwright MCPからApidogのテストコレクションを呼び出し、UIとAPIを組み合わせたテストを実行

この方法の最大のメリットは、バックエンドが未完成でもフロントエンド開発とテストが進められることです。また、Apidogの環境変数機能を使えば、開発・テスト・本番環境の切り替えも簡単で、CI/CDパイプラインとの統合も容易になりました。

まとめ

Playwright MCPは、テスト自動化の世界に革命をもたらしています。自然言語でテストを書けるという特徴は、技術者だけでなく、プロジェクト全体のコミュニケーションを改善し、品質向上に大きく貢献します。

私たちのチームでは、この革新的なテスト自動化アプローチを採用して以来、以下の成果を得ることができました：

• テスト作成時間が従来の1/3に短縮
• 非エンジニアもテスト作成に参加することで、テストカバレッジが50%向上
• リリース前のバグ発見率が2倍に増加
• リリースサイクルが30%短縮

これらの成果の鍵となったのが、ApidogとPlaywright MCPの連携です。Apidogの直感的なインターフェースでAPIの設計・テスト・モック作成を行い、Playwright MCPの自然言語インターフェースでE2Eテストを自動化する組み合わせは、開発効率を劇的に向上させました。

AIとテスト自動化の融合は、これからも進化し続けるでしょう。より直感的で効率的なテスト方法が登場し、開発者の負担はさらに軽減されていくはずです。その変化に乗り遅れないよう、常に新しい技術に目を向けていきたいですね。

皆さんも、ぜひKiro、Playwright MCP、そしてApidogの強力な組み合わせを試してみてください。きっと、テスト自動化に対する考え方が変わるはずです！