Cursor&playwright-mcpで自然言語でE2Eテストを書いて動かすまで

世の中的にはN番煎じ感がありますが、CursorとPlaywright-mcpを組み合わせで、自然言語で書いたE2Eテスト手順を実際に動かすまでの流れを書いておきます。

一部playwright-mcpをCursorで使うのにFailed to Create Clientが出る - テストウフと重複しているのでそちらも参考にしてください。

手順

1. node.jsのインストール

Node.jsとnpmをWindowsにインストールする方法 #Windows10 - Qiita などググると情報がたくさん出てくるので参考にして入れましょう。

2. npmを使ってplaywright-mcpをインストール

Windows PowerShellやmacのターミナルを開いて以下のコマンドを実行。

npm install -g @playwright/mcp@latest

3. CursorのMCP Serversの設定画面でplaywright-mcpを設定

Cursorの画面右上の歯車マークをクリック。

次にMCPを選択してMCP Servers画面に行きます。私は設定済なのでplaywright-mcpが表示されていますが、まだの方はここは何もでていません。

そして右上のAdd new global MCP serverを選択。

そうすると mcp.json というファイルが開かれるので、以下内容を貼り付け。

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

※ mcp.jsonが空の前提で話をしています。既に記載されているものがある場合は、上記の内容で置き換えるのではなく、既存の内容に上記内容を追加してください。

この状態で、

のようにグリーンの●が表示されていればOKです。

4. テスト手順を書く

通常の、コーディングを伴うE2Eテスト自動化であればここからテストコードを書いていくわけですが、Cursorを使うとコードを書かなくとも自動テストっぽいことができます。

具体的には、人間が手動でやる場合のテスト手順書のようなイメージで、テストの手順を書き下します。

このとき、つらつらと文章で書いても動いてくれる場合もありますが、Gherkinという記法で書いてあげたほうが動作の精度が良さそうでした。（あくまでも私の体感です。）

参考：Reference | Cucumber

ごく単純なものですが、テスト手順をGherkinで書き出したもののサンプルはこちらです。

Feature: 商品検索

    Scenario: OM-1を検索して最安のショップを調べる
        When "https://kakaku.com" を開く
        And "OM SYSTEM OM-1" を検索する
        And 検索結果の一番上のものを選択
        Then 商品ページに遷移している

書くのめんどくさいなぁ・・・と思う場合は、箇条書きで書いたテスト手順をもとに、Cursorに「Gherkin記法に書き換えて」と言うとやってくれます。

5. テストを実行

手順をGherkin記法で書いたら、あとはチャットから実行の指示を出します。

単純に「テストして」と言うとMCPサーバを使わずにがんばろうとしてしまう場合があるため、Playwright MCPサーバを使うよう明示的に指示するのがおすすめです。

playwright-mcp × Cursor で BDD Testingを参考に、

MCP Serverを使用して、ファイルの内容をテストして。コード生成はしなくていい。

といった形で指定してあげると、私の場合はうまく動作しました。

ここまでの操作を行うと、自動テストのコードを書くのではなく、言葉で手順を書くことで、ブラウザを自動操作してE2Eテストが実行できます。

補足

テストコードも生成してほしいとき

先に書いたCursorへの指示の出し方では「コード生成はしなくていい」と書いていました。しかし、毎回AIエージェントにブラウザ操作させるのではなく、テストコードを生成させたい場合もあります。この場合は、チャットを新規に作って「Playwright-mcpサーバを使ってテストして。コードも生成して。」と指示すれば、テストコードも生成してくれます。

もしくは、一度実行したあとで「さっきのテストコード出力して」と言っても出力してくれることを確認済です。

1ステップずつ実行許可を求められて面倒なとき

テスト実行中、Cursorからチャットで1ステップずつRunすることを求められる場合があります。これが面倒な場合は、Cursorの設定から Allow Agent to run tools without asking for confirmation をONにしてあげると、テスト実行中は1ステップずつ実行許可を求められなくなります。

ただし、これをやると文字通りCursorが好きにコマンドを実行できてしまうので、させたくない操作はその下のオプションから例外設定をするなど、気を付けて使いましょう。

正直どのくらい使えそう？

一応テスト自動化エヴァンジェリストをやってた身として、仕事でもプライベートでもこの辺触って有用性を検討しているのですが、2025/05/02時点ではまだまだです。

テキストボックスへの文字入力やボタンクリックなど基本操作はうまくいくものの、時折テストのステップを飛ばしたり、プルダウンやラジオボタンが選べなかったりします。これはサイトの作りにも依存するので一概には言えませんが・・・。

少なくとも自然言語のまま自動テストを都度AIエージェントとMCPサーバで実行させるのはイマイチだと思ってまして、Cursorには最終的にテストコードを出力させて、そちらを使用・メンテしていくのが良いかなと考えています。