Playwright CLI

Description:

ブラウザ自動化ライブラリ Playwright をターミナルから直接操作し、コード生成、テスト実行、ブラウザ制御を可能にする強力なツール

URL: https://playwright.dev/docs/cli

GitHub:

https://github.com/microsoft/playwright-cli

Tags:

CLI Testing Automation Browser Developer Tool

Explore:

Qiita Zenn note Hatena Wikipedia

Updated:

2026/01/28

特徴

• ・ 対話的なコード生成 (codegen): ブラウザ上での操作を記録し、Playwright のスクリプト（JS/TS, Python, Java, .NET）として自動生成。
• ・ ヘッドレス・ヘッドフル制御: ターミナルから特定の URL を任意のブラウザエンジン（Chromium, Firefox, WebKit）で瞬時に起動。
• ・ スクリーンショット・PDF 生成: コマンド一つでウェブページのスクリーンショット撮影や PDF 書き出しが可能。デバイスのエミュレーション（iPhone, Android等）もサポート。
• ・ ロケーターの検証: ページ上の要素を特定するためのセレクター（CSS, XPath等）をターミナルからリアルタイムでテスト。
• ・ オープンソース: Microsoft によってメンテナンスされており、最新のブラウザ機能に迅速に対応。

活用例

• ・ E2E テストのクイックスタート: codegen を実行して、ログインフローなどの複雑なテストシナリオを自動生成。
• ・ ブラウザ操作の自動化スクリプト作成: 特定のサイトから情報を取得したり、定型的な操作を行うスクリプトの土台を迅速に作成。
• ・ UI のクロスブラウザチェック: Chromium, Firefox, WebKit の各ブラウザで、ページが正しく表示されるかをターミナルから確認。
• ・ CI/CD パイプラインでの活用: サーバー上での自動スクリーンショット撮影や、簡易的なアクセシビリティチェックの実行。

---

構築・初期設定

インストール

Node.js 環境での導入が一般的です。

1. パッケージの導入:

   # npm を使用する場合
   npx playwright install

   ※ playwright-cli 自体は npx playwright を通じて利用可能です。
2. ブラウザのインストール:

   npx playwright install

   これにより、必要なブラウザバイナリがダウンロードされます。

---

利用方法

主要なコマンド

• コード生成の開始:

  npx playwright codegen https://example.com

• スクリーンショットの撮影:

  npx playwright screenshot --device="iPhone 13" https://example.com example.png

• ページをブラウザで開く:

  npx playwright open https://example.com

• PDF の生成:

  npx playwright pdf https://example.com example.pdf

Tip

codegen は、AI プロンプトに含めるためのセレクターを確認する際にも非常に便利です。