【15分ハンズオン】Playwright MCPで即戦力！4ステップで学ぶテスト自動化入門

最近、テスト自動化の現場でよく耳にする「Playwright」。
名前は知ってるけど、まだ触ったことがない…という方も多いのではないでしょうか。

私も最初は同じでした。
初めて導入してみたら、思った以上に簡単に導入ができ、品質向上につながりそうだと感じました。

この記事では、そんなPlaywrightの導入からAI連携（MCP）までを、約15分で体験できるハンズオン形式で紹介します。
まだ導入方法がわからない方を対象に分かりやすくお伝えできたらなと思っています。

そもそもPlaywrightってなんだっけ？

Playwright（プレイライト）はMicroSoft社が開発したwebテストと自動化のためのフレームワークです。

特徴をざっくり挙げると

自動待機：動的なSPAでも安定して動く
マルチブラウザ対応：Chrome / Edge / Firefox / Safari といった主要なブラウザ
クロスプラットフォーム：Windows・macOS・Linux

つまり、「どんな環境でも安定して動くテストツール」と言えます。
SeleniumやCypressを使ったことがある方なら、よりモダンで軽快な印象を受けると思います。

MCPってなに？

次に説明するのはMCP（Model Context Protocol）です。
簡単に言うと「AIが外部の世界とスムーズに連携するための共通ルール」です。

イメージとしては、AI用の「USBケーブル」のようなもの。
共通の規格があることで「AIがPlaywrightを操作してテストを書く」ことが可能になります。

では早速Playwrightを体験してみましょう！

ステップ1：Playwrightのインストール

まずは該当のディレクトリに移動して、設定を行っていきます。

npm init playwright@latest //最新版のPlaywrightで初期化

次のようなメッセージが表示されればインストール完了です。

We suggest that you begin by typing:

    npx playwright test

And check out the following files:

  - ./tests/example.spec.ts - Example end-to-end test

  - ./playwright.config.ts - Playwright Test configuration

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! 🎭

続いて、ブラウザもインストールしておきましょう。

npx playwright install // Playwrightが使うブラウザをインストール

では早速実行してみましょう！

ステップ2：サンプルテストコードの実行

次のコマンドで、Playwrightに入っているサンプルテストを実行することができます。

npx playwright test

すると、下記のようにテスト結果が表示されると思います。

Running 6 tests using 5 workers

  6 passed (8.7s)

実はこれだけで終わりです。
とても簡単だったと思います。

次に、Playwright MCPを導入してみましょう。

ステップ3：Playwright MCPの設定

ここでは、Playwright MCPを設定して、AIにテストを書いてもらえるようにします。
今回はCursorというAIコーディングツールを例に説明します。

Cursorについて詳しく知りたい方はこちらの記事をご覧ください。
＞Cursorのすべてがわかる！VS Codeとの違い・特徴・機能・始め方を徹底解説

実践的な使い方については連載記事をご覧ください。
＞連載 Cursor 実践録①：実装スピードが2倍に─Cursorを使いこなすためのコツ
＞連載 Cursor 実践録②：Laravel開発における具体的な活用法と導入してみて分かったこと

Cursor > Preferences > Cursor Settings をクリック

開いたウィンドウで、Tools をクリックし、Add Custom MCP をクリック

以下のコードを入力して保存します。

{

  "mcpServers": {

    "playwright-mcp": {

      "command": "npx",

      "args": [

        "@playwright/mcp@latest"

      ]

    }

  }

}

Cursor Settings に戻り、追加されたplaywright-mcp をONにします。

これでPlaywright MCPと接続ができました。

ステップ4：Playwright MCPを使ってテストコードを書かせてみる

今回は、こちらのテスト用サイトを使います。
https://the-internet.herokuapp.com/login

CursorなどのAIツール上で、次のように入力してみてください。

https://the-internet.herokuapp.com/login のログイン機能のテストコードを作成して、実行して

するとAIがPlaywrightを操作して、テストコードを自動生成してくれます。

今回は、詳細な仕様などを一切伝えずにMCPでの実行を目的としましたので、意図したテストケースが実装できているかは保証できませんが、一般的に必要になりそうなケースは実装されているのではないでしょうか？

私の場合は次のようなコードが実装されました。

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

test.describe('ログイン機能テスト', () => {

  test.beforeEach(async ({ page }) => {

    // テスト前にログインページに移動

    await page.goto('https://the-internet.herokuapp.com/login');

  });

  test('ログインページが正しく表示される', async ({ page }) => {

    // ページタイトルを確認

    await expect(page).toHaveTitle(/The Internet/);

    // ログインフォームの要素が表示されているか確認

    await expect(page.locator('#username')).toBeVisible();

    await expect(page.locator('#password')).toBeVisible();

    await expect(page.locator('button[type="submit"]')).toBeVisible();

    // ログインフォームのラベルを確認

    await expect(page.locator('label[for="username"]')).toContainText('Username');

    await expect(page.locator('label[for="password"]')).toContainText('Password');

  });

  test('有効な認証情報でログイン成功', async ({ page }) => {

    // 有効な認証情報を入力

    await page.fill('#username', 'tomsmith');

    await page.fill('#password', 'SuperSecretPassword!');

    // ログインボタンをクリック

    await page.click('button[type="submit"]');

    // ログイン成功後のページにリダイレクトされることを確認

    await expect(page).toHaveURL(/.*secure/);

    // 成功メッセージが表示されることを確認

    await expect(page.locator('.flash.success')).toBeVisible();

    await expect(page.locator('.flash.success')).toContainText('You logged into a secure area!');

    // ログアウトボタンが表示されることを確認

    await expect(page.locator('a[href="/logout"]')).toBeVisible();

  });

  test('無効なユーザー名でログイン失敗', async ({ page }) => {

    // 無効なユーザー名を入力

    await page.fill('#username', 'invaliduser');

    await page.fill('#password', 'SuperSecretPassword!');

    // ログインボタンをクリック

    await page.click('button[type="submit"]');

    // エラーメッセージが表示されることを確認

    await expect(page.locator('.flash.error')).toBeVisible();

    await expect(page.locator('.flash.error')).toContainText('Your username is invalid!');

    // ログインページに留まることを確認

    await expect(page).toHaveURL(/.*login/);

  });

  test('無効なパスワードでログイン失敗', async ({ page }) => {

    // 無効なパスワードを入力

    await page.fill('#username', 'tomsmith');

    await page.fill('#password', 'wrongpassword');

    // ログインボタンをクリック

    await page.click('button[type="submit"]');

    // エラーメッセージが表示されることを確認

    await expect(page.locator('.flash.error')).toBeVisible();

    await expect(page.locator('.flash.error')).toContainText('Your password is invalid!');

    // ログインページに留まることを確認

    await expect(page).toHaveURL(/.*login/);

  });

  test('空の認証情報でログイン失敗', async ({ page }) => {

    // 空の認証情報でログインボタンをクリック

    await page.click('button[type="submit"]');

    // エラーメッセージが表示されることを確認

    await expect(page.locator('.flash.error')).toBeVisible();

    await expect(page.locator('.flash.error')).toContainText('Your username is invalid!');

    // ログインページに留まることを確認

    await expect(page).toHaveURL(/.*login/);

  });

  test('ログイン後のログアウト機能', async ({ page }) => {

    // 有効な認証情報でログイン

    await page.fill('#username', 'tomsmith');

    await page.fill('#password', 'SuperSecretPassword!');

    await page.click('button[type="submit"]');

    // ログイン成功を確認

    await expect(page).toHaveURL(/.*secure/);

    // ログアウトボタンをクリック

    await page.click('a[href="/logout"]');

    // ログインページにリダイレクトされることを確認

    await expect(page).toHaveURL(/.*login/);

    // ログアウト成功メッセージが表示されることを確認

    await expect(page.locator('.flash.success')).toBeVisible();

    await expect(page.locator('.flash.success')).toContainText('You logged out of the secure area!');

  });

});

お疲れ様でした！

ここまでで、Playwrightの設定からPlaywright MCPへの接続設定、テストコードの実装、テストコードの実行までができてしまいました。

とても簡単じゃなかったですか？