はじめに
株式会社ネクストスケープ エンタープライズサービス部の小野塚です
今回はPlaywrightのMCPサーバーを触ってみたいと思います。
そもそもPlaywrightとは？というところから書いておきますと、2020年1月31日にMicrosoftによってリリース・発表されたWeb UI自動化テストフレームワークです。
テストコードを書くだけで、異なるブラウザ環境でのアプリケーションの動作を横断的に検証することが可能になるというもので、人によっては「Seleniumのようなもの」と言えば「ああ！」となる方もいらっしゃるかもです。
そのPlaywrightのMCPサーバーが提供されています。と言われてもちょっとピンとこない方もいるかもしれませんので、百聞は一見に。ということで早速紹介してみます。
インストール
では設定を。。の前にNode.js（とnpm）がインストールされている必要がありますので、早速試してみたいとなりましたらまずはNode.jsをインストールしておいてください。
次にCursorのSetting画面で「MCP&Integrations」を選び、「New MCP Server」をクリック。
そうするとmcp.jsonが開きますので以下のようにPlaywrightのMCPサーバーを設定・定義します。
{
"mcpServers": {
"playwright-mcp": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
MCPを色々と使いこなしている方には言わずもがなの内容となりますが、既に他のMCPを利用している場合はmcp.json内にそのMCPの設定が記載済みとなっているはずです。なので、上記の内容をそのままコピペするのではなく、「追記する」形となりますのでご注意ください。念のためバックアップを取っておくのがよいかもしれませんね。
更に注意点としてPlaywrightのMCPサーバーはコミュニティ版とMicrosoft公式版があります。公式版の方が色々安心ですし、高性能ですのでMicrosoft公式版を設定した方がよいかもしれません。
で、一旦Cursorを再起動しますとplaywright-mcpが追加・表示されているのがわかります。そして、正しく設定されていればアイコン右下のランプ（？）が緑色になります。もしオレンジ色だった場合はもう一度mcp.jsonを見直してください。
実行
さて、ではPlaywrightの実力を見てみましょう。
Cursorのプロンプト入力欄に以下のように入力します。
「PlaywrightでQiitaを開き、先頭の記事を取得してください。
更に検索欄に「Playwright」と入力し、その結果のスクショを取得してください。」
本当は少しずつ試してもいいのですが、出し惜しみしてもアレなので一気にやってしまいましょう。
するとおもむろにブラウザが立ち上がり、Qiitaのページが表示されます。
途中経過のスクリーンショットは割愛しますが、TOPページの検索欄にPlaywrightを入力して検索を行い、そして以下の検索結果が表示されるところまでを自動的に実行してくれます。
プロンプト入力欄の部分にも実行結果が表示されます。
最初にプロンプトでお願いした通り、先頭の記事の内容が記載されてます（上記の画像と一致してますね）。更に検索結果の概要もまとめてくれています。
スクリーンショットも保存場所が示されているのでそこにアクセスすると全画面で取得されていました。
画像で説明していることもありまして、ちょっと面白味が伝わらないかもなのですが、PlaywrightやSeleniumは元々プログラミング言語でないとブラウザ操作ができません。
しかしながらMCPサーバーとして動作させることでこのように「自然言語で」ブラウザを操作させることができるわけです。
当社のサイトで試してみる
さて、もう少し動作を試してみましょう。当社のWebサイトでは以下のように「ニュース」としてそれぞれの年におけるニュースが挙げられています。
そこで以下のようなプロンプトを投げてみることにします。
「www.nextscape.netをPlaywrightで開き、２０２５年のニュースを取得してください」
そうすると、動画で見せられないのがちょっと残念ですが、TOPページから上で挙げたニュースのページに遷移し、更に２０２５年の各ニュースの詳細ページに次々とアクセスしてくれます。
そしてその結果として以下のように取得した結果をまとめてくれます。
最後に
筆者はAndroidアプリ開発を行っていた頃、AndroidDriverというPlaywrightやSeleniumと同じようなUIテストツールを使ってテストを行っていたことがありまして、スクリプトを書く大変さも理解しています。
そういった経験もありまして、自然言語で指示した通りにブラウザが自動的に動くのはなかなかに面白いです。
今回は単純にブラウザの操作のみで終わりましたが、本来の目的であるテストとしての利用にも非常に役立ちそうです。
是非皆さんもお試しください。
当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。
（以下当社お問合せフォーム）
