はじめに
株式会社ネクストスケープ エンタープライズサービス部の小野塚です
以前、PlaywrightのMCPサーバーを紹介しました。
X等を見るとこのPlaywrightのMCPサーバーを使ってE2Eテストが捗った等のコメントが多々見受けられます。
上記の記事でも軽く触れましたが、筆者もスマホアプリのテストでAndroidDriver（AndroidにおけるSelemium）を使ったことがあるので普通にテストシナリオを書くことの大変さはよくわかります。
さてそんな中、9月23日に Chrome DevTools Model Context Protocol（MCP）サーバーが公開されました。
Googleが提供するこのMCP、どんなものか試してみたいと思います。
必要なものは以下の３つ。
筆者だけかもですが、Node.jsのバージョンにはご注意ください。自身の環境で最新のバージョンが入っていると思い込んでいたのですが、MCPの設定の時点でうまく動かず少しだけハマってしまいました。。
- Node.js 22.12.0 or newer.
- Chrome current stable version or newer.
- npm
設定
設定ですが、今回は筆者がいつも使っているCursorで試してみます。
上記のGitHubのURLにアクセスすると以下のように各ツール毎に設定方法を説明してくれていますので、「Cursor」をクリックしてみます。
そうすると以下のように設定方法が表示されます。
Configファイルの書き方も挙げてくれているので、他のMCPサーバー同様手動で設定することも可能ですが、筆者は「Add to Cursor」ボタンを押して、自動的に設定してくれる方を選びました。
あっさりと設定完了。さすがGoogle。地味に助かります。
いよいよ実行
さて、いよいよ本題ということで試してみたいと思います。
以下のプロンプトを実行します。
「Chrome Dev ToolsでQiitaを開き、先頭の記事を取得してください。
更に検索欄に「Playwright」と入力し、その結果のスクショを取得してください。」
まずはQiitaのページが開かれて、
以下がMCPとのやり取りです。ちょっと文字が薄いですが、実行内容について教えてくれます。
検索欄に「Playwright」が自動的に入力され、
以下のように最終的な結果をお知らせしてくれます。スクリーンショットもちゃんと取得されています。
あとはPlaywright用のテストコード作成もお願いしてみます。
ちゃんとpackage.jsonやplaywright.config.js等、一通りのファイルを作成してくれました。
更には「Chrome DevTools MCPでyahoo.co.jpのパフォーマンス測定を開始してください」とお願いすることで以下のような結果が得られます。
ちなみにPlaywright MCPでもパフォーマンス測定を行ったのですが、同様の結果が得られまして、違いとしてはLCPに関する詳細分析の有無ぐらいでした。
あとはアクセシビリティのチェック。
私は以前アクセシビリティについても以下のような記事を書いてますが、このアクセシビリティのチェックを個人で実施するのは非常に困難です。
このDevtoolsを使えばどこを改善すべきなのかをわかりやすく教えてくれます。
Markdownファイルに書き起こすことも当然可能ですのでまずはこれで洗い出しを行い、更にそれを参照してもらいつつCursor等を使って修正まで一気に行うことができそうです。すばらしいですね。
当社サイトでも試してみる
Playwright MCP同様、当社のサイトでも試してみます。
「www.nextscape.netをChrome DevTool MCPで開き、採用情報のページに遷移してください。更に採用情報のページでどういった情報が書かれているか取得してください。」
とスクリプトを投げると当社の採用サイトにアクセスし、その情報を取得、更にスクリーンショットまで取得してくれました。
おもむろに宣伝のようになってしまいますが、開発に興味がある方、お客様の課題解決にやりがいを感じる方、是非チェックしてください。
ちなみに以下のようなスクリプトを投げることでPage Object Model形式で出力（実装）してもらうこともできます。
「Chrome DevTools MCPを使って先ほどと同じ手順をPage Object Modelの形で実装してください。」
Playwright MCPと同様、やはりE2Eテストとして以下のような使い方はもちろん、表示周りのテストにおいて非常に強力なツールとなってくれそうです。
- 日本語でテストしたい操作をChrome DevTool MCPに対して指示
- その操作内容をPlaywrightで実行するためのスクリプトとして出力
- Playwrightで都度実行
その他の機能
あとは以下のリファレンスを見るとChromeのデベロッパーツールで使える機能が使えそうです。
そこで以下のような依頼をしてみます。
「www.nextscape.netのトップページのネットワークリクエストを一覧表示してほしい」
そうすると以下のように上記リファレンス内の「list_network_requests」が実行され、デベロッパーツールと同じような情報が返されます。
これは（25/9/28時点で）Playwright MCPでは得られなかった情報になります。
最後に
まださわりではありますが、このように様々な操作が可能になります。
Playwright MCPとの差がまだあまり見出せていないですが、このChrome DevToolsもE2Eテスト等で非常に役に立つと思います。
是非皆さんもそれぞれのMCPを試してみてください。
どちらも、特にDevToolsは発表されたばかりということもあり、今後の発展・進化も気になるところですので引き続きチェックしていきたいと思います。
当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。
（以下当社お問合せフォーム）
