Playwright MCP で自然言語から自動テストを作成してみた

はじめに

近年、Playwright MCPは、Webアプリのテスト自動化ツールの中で人気があります。
生成AIを活用して、自動テストのスクリプトを自然言語から自動生成できるため、テストコードを書いたり、GUI操作を記録してテストを作成する作業を少なくすることができます。これにより、テスト作業の効率が大幅に向上することが期待できることから、今、注目を浴びています。

Playwright MCPとは

・Playwright
Microsoft社がリリースしたWeb UI自動化テストフレームワーク。主にE2E（End-to-End）テストを自動化するために使用され、複数のブラウザー（Chromium、Firefox、WebKit）を同じAPIで操作できるのが特徴です。

・MCP（Model Context Protocol）
Anthropic社がオープンソースとしてリリースした新しいプロトコル。MCPを使用することで、さまざまなAIアプリとさまざまなツール（Playwrightなど）を連携できます。

・Playwright MCP
PlaywrightでMCPの利用が可能となったフレームワークです。
Playwright MCPを使用することで、生成AIがWebアプリのUIテストを実現できます。※2025年3月25日（日本時間）にリリース

Playwright MCP の利用イメージ

下図は、Visual Studio Code（コードエディター）上に、Playwright MCP、Cline（AIエージェント）をインストールした利用イメージです。 ※AIモデルに、GPT-4.1を使用

テスト手順を自然言語でプロンプトに用意して、Clineに読み込ませることで、Playwrightのテストコードを自動生成してくれます。このテストコードを実行することで、WebアプリのUIテストを自動化できます。

Playwrihgt MCP を利用したテスト手順

テストシナリオ
ログインテスト (ログイン画面にて登録済みのユーザー情報でログインできることの確認)

使用サイト(自動化学習用に一般公開されている外部サイト)
https://hotel-example-site.takeyaqa.dev/ja/index.html?


1. テスト作成のためのプロンプト作成
テスト手順や検証項目をなるべく詳細に記載します。

プロンプト例

Playwrightで、以下のサイトでログインテストを作成してください。
https://hotel-example-site.takeyaqa.dev/ja/index.html?

1.トップページを開く
2.サイト上部にある「ログイン」ボタンをクリックする
3.メールアドレス：[e-mail]、パスワード：password
4.「ログイン」ボタン(メールアドレス・パスワード下)をクリックする
5.ログイン後のユーザーページにて、会員ランクが「プレミアム会員」になっていることを検証する
6.「ログアウト」ボタンをクリックする

2. Clineが自動生成したテストコード
手順1のプロンプトを使ってClineに指示すると以下のようなテストコードが生成されます。
※同じスクリプトでも異なるコードが生成されることがあります。

テストコード例

import { test, expect } from '@playwright/test';

test('正常なログイン・会員ランク検証・ログアウト', async ({ page }) => {
  // 1. トップページを開く
  await page.goto('https://hotel-example-site.takeyaqa.dev/ja/');

  // 2. トップページの「ログイン」ボタンをクリック
  await page.getByRole('button', { name: 'ログイン' }).click();

  // 3. ログイン画面でメールアドレス・パスワードを入力
  await page.getByLabel('メールアドレス').fill('[e-mail]');
  await page.getByLabel('パスワード').fill('password');
  
  // 4.「ログイン」ボタン(メールアドレス・パスワード下)をクリック
  await page.getByText('ログイン').click();

  // 5. ユーザーページで「会員ランク：プレミアム会員」を検証
  await expect(page.getByText('会員ランク')).toBeVisible();
  await expect(page.getByText('プレミアム会員')).toBeVisible();

  // 6. 「ログアウト」ボタンをクリック
  await page.getByRole('button', { name: 'ログアウト' }).click();
});

3. テスト実行
このテストはヘッドレスモードで実行され、「4.「ログイン」ボタン(メールアドレス・パスワード下)をクリック」でエラーとなりました。
原因：同じ画面に「ログイン」のテキストを持つボタンが2つ存在したため

4. メンテナンス
メンテナンスもClineに指示することでおこなえます。
ヘッドフル(GUI)でテストするように変更し、実行時の挙動を目視で確認できるように各アクションに対して1秒の待機時間を設けてみます。

プロンプト例

//自然言語で指示

このテストをGUI（ヘッドフル）で実行したいです。
また、実行時の挙動を目視で確認したいので、各アクションごとに1秒ずつの待機を入れてください。

「4.「ログイン」ボタン(メールアドレス・パスワード下)をクリック」のエラーに関する指示もClineにしましたが、一意に特定できる情報を読み取ることができず、断念しました。

Chromeのデベロッパーツールなどで、DOM要素の構造を確認し、XPath(ロケーションパス)を使用したテストに手動で修正しました。

テストコード例

  //元：await page.getByText('ログイン').click();
  //修正後
  await page.locator('xpath=//form[@id="login-form"]//button[@id="login-button"]').click();

↓メンテナンス後のテストコード

テストコード例

// このテストはGUI（ヘッドフル）で実行してください。
// 実行例: npx playwright test tests/login.spec.ts --headed

import { test, expect } from '@playwright/test';

// このテストは常にヘッドフル（GUI表示）で実行されます
test.use({ headless: false });

test('正常なログイン・会員ランク検証・ログアウト', async ({ page }) => {
  // 1. トップページを開く
  await page.goto('https://hotel-example-site.takeyaqa.dev/ja/');
  await page.waitForTimeout(1000); // 1秒待機

  // 2. トップページの「ログイン」ボタンをクリック
  await page.getByRole('button', { name: 'ログイン' }).click();
  await page.waitForTimeout(1000); // 1秒待機

  // 3. ログイン画面でメールアドレス・パスワードを入力しログイン
  await page.getByLabel('メールアドレス').fill('[e-mail]');
  await page.waitForTimeout(1000); // 1秒待機
  await page.getByLabel('パスワード').fill('password');
  await page.waitForTimeout(1000); // 1秒待機
  
  // 4.「ログイン」ボタン(メールアドレス・パスワード下)をクリック
  await page.locator('xpath=//form[@id="login-form"]//button[@id="login-button"]').click();
  await page.waitForTimeout(1000); // 1秒待機

  // 5. ユーザーページで「会員ランク：プレミアム会員」を検証
  await expect(page.getByText('会員ランク')).toBeVisible();
  await page.waitForTimeout(1000); // 1秒待機
  await expect(page.getByText('プレミアム会員')).toBeVisible();
  await page.waitForTimeout(1000); // 1秒待機

  // 6. 「ログアウト」ボタンをクリック
  await page.getByRole('button', { name: 'ログアウト' }).click();
  await page.waitForTimeout(1000); // 1秒待機
});

このメンテナンスで、テストのGUI操作がアプリ画面で確認できるようになり、エラーも解消されてテストが上手くいきました。

Playwright MCP を利用したメリット

・テストコードが書けない人でも簡単に利用できる
プログラミングの知識がない人でも自然言語でテストコードを作成
できます。これにより、熟練者でなくてもテスト自動化に参加しやすくなるため、人員確保がしやすくなります。

・自動生成されたテストコードの精度が高い
AIエージェント(Cline)で作成されたテストコードは、シンプルな画面の基本操作であれば高い精度で生成されます。これにより、少ない工数でテスト作成・メンテナンスがおこなえます。また、AIエージェントの機械学習や自然言語処理の精度はこれからも向上していくため、現時点でできないことも将来的にできるようになる可能性があります。

・メンテナンスも自然言語で指示して簡単におこなえる
テストのメンテナンスもAIエージェントに自然言語で指示してできるため、新たな機能追加や変更があっても、直感的にメンテナンスできます。これにより、メンテナンス作業が楽になります。

・テスト実行時の動作が軽い
テスト実行した時のラグが少なく、サクサク動作が進むため、テスト実行時間をかなり短縮することができます。素早くテストが完了することで、迅速なフィードバックやバグ修正が可能となり、システムの品質向上が期待できます。

Playwright MCPを利用したテスト自動化の落とし穴

・AIの生成結果に、ばらつきがある
複数人開発では、各自のプロンプトを読み込ませると、テストの精度が異なることがあります。プロンプトは詳細な操作手順や検証項目を含む必要があり、知識や理解がない人が使用すると正確なテストが難しいことがあります。

・複雑な画面のテストコードは、生成精度が低い
現時点では、UI要素の特定がText属性でおこなわれるため、同名の要素がある場合修正が必要なケースがあります。複雑な画面では、HTML構造を確認して修正する必要があるため、レコーディングによる自動生成ツールの利用が効果的です。※レコーディングタイプは、ロケーションパスが使われるケースが多く、一意に特定しやすい情報が取得しやすいです。

・現時点では、非エンジニアのみの利用は難しい
精度の高いテスト生成やメンテナンスには、アプリ画面の知識やテスト自動化の理解が必要です。そのため、非エンジニアだけの自動化チームで利用するのは難しいため、エンジニアと協力することが重要です。

・チーム運用のベストプラクティスが定まっていない
AIを活用したテスト生成のベストプラクティスが定まっていないため、試行錯誤しながら、運用ルールやプロンプトの規則を自分達で決める必要があります。そのため、運用決めで大幅に時間ロスしてしまう可能性があります。

⇒レコーディングによるテスト作成ツールを利用する方が自動化の効果が出る場合もあります

レコーディングによるテスト作成ツール「Ranorex」

弊社では、UIテスト自動化ツール「Ranorex」を取り扱っています。
デスクトップ・Web・モバイルアプリのUIテストを自動化することができ、テストケース数や実行回数、実行環境などを無制限で、利用いただけます。

テスト作成方法はレコーディング形式となるため、AIでの自動生成が難しいような複雑な画面のテストなどをおこなうことができます。また、学習資材やトレーニング、テクニカルサポートなどが充実しているため、疑問点を迅速に解決できます。

もし、興味ありましたら14日間の無料体験版がありますので、ご利用ください。

まとめ

Playwright MCPは、Webアプリのテスト自動化において注目を集めています。生成AIを活用し、自然言語からテストスクリプトを自動生成することで、テストコードの作成やGUI操作の記録作業を省略できます。また、テスト実行時のラグが少ないため、テスト実行時間を短縮でき、迅速なフィードバックや品質向上に貢献します。

ただし、AIの生成結果にばらつきがあったり、複雑な画面のテストコードには生成精度が低い場合もあり、非エンジニアのみで構成されたチームでの利用は難しいといった課題もあります。

これらの課題を考慮したうえで、皆様の要望に沿ったテスト自動化ツールを選定することをおすすめします。