TL;DR
- Cookiesの抽出 &
storage.jsonの作成 npx @playwright/mcp@latest --storage-state={path/to/storage.json}
はじめに
Playwright MCP serverはAIエージェントにブラウザーを操作する機能を提供しているが、昨今各サイトのセキュリティが強化していたことで、2段階認証やreCAPTCHAなどの仕組みを乗り越えてサイトにログインすることはやはり困難です。
幸い、従来からサイトに手動でログインし、そのログイン情報(Cookie)を転用し、あたかもログイン済みの状態でサイトにアクセスする手法は、一部サイトを除いてまだ使えます。
方法
Playwright単体の時
Playwright単体でCookiesを導入するにはいくつかの方法はありますが、どれも難しくないので、下記の記事を参考してください。
Playwright MCPの時
Playwright MCP Serverは set_cookies のようなアクションは提供していないが、以下のオプションで起動すると、Cookieだけでなく、LocalStorageも予めセットアップ可能です。
Cookiesの抽出
Playwrightを手動で起動し、コードでCookiesを抽出するのは王道ですが、それが難しい時、Cookie-EditorなどプラグインでExportしても良いです。
ただ、注意すべきのは、Playwrightが認識できるCookieのsameSiteフィールドはStrict , Lax, NoneのEnum型なので、以下のルールで抽出したCookie JSONを修正しましょう。
-
"sameSite": null=>"sameSite": "None" -
"sameSite": "no_restriction"=>"sameSite": "None" -
"sameSite": "lax"=>"sameSite": "Lax"(lを大文字Lに)
storage.jsonの構成
前述で処理したCookie JSONをベースに、storage.jsonを作ります。
以下のようなフォーマットです。
{
"cookies": [ // ここに先ほどエクスポートしたCookiesが入ります
{
"domain": ".qiita.com",
"expirationDate": 1762852420.27532,
"hostOnly": false,
"httpOnly": false,
"name": "_unv_id",
"path": "/",
"sameSite": "None",
"secure": false,
"session": false,
"storeId": null,
"value": "XXXXXXXXXXX"
},
...
],
"origins": [ // ここにLocalStorageが入ります(あれば)
{
"origin": "https://qiita.com",
"localStorage": [
{
"name": "TestKey",
"value": "TestValue"
},
...
]
}
]
}
パラメーターの準備
いよいよサービスを起動します。
CLIモード
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--isolated", // 必要であれば
"--storage-state={path/to/storage.json}"
]
}
}
}
SSEモード
npx @playwright/mcp@latest \
--port 8931 \
--isolated \ # 必要であれば
--storage-state={path/to/storage.json}
{
"mcpServers": {
"playwright": {
"url": "http://localhost:8931/mcp"
}
}
}