mcpField
P
playwright-cli

playwright-cli

github.com/screenciテスト・品質41.8k 回インストール3 週間前に更新
リポジトリ

playwright-cli について

ScreenCIのブラウザー検査ワークフロー向けPlaywrightコマンドラインスキルです。ページ移動、スナップショット、操作、既存のログインセッションの読み込み方法を説明します。

主な機能

  1. 01ページを開いてURLへ移動
  2. 02要素参照付きのスナップショットを作成
  3. 03参照・CSS・ロケーターで操作
  4. 04名前付きブラウザーセッションを管理
  5. 05ScreenCI保存済みのログイン状態を読み込み

活用シーン

  1. 01ページ構造や操作要素の確認
  2. 02ログイン済みセッションでのフロー確認
  3. 03ScreenCIテスト用のページ操作の特定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/screenci/screenci --skill playwright-cli

インストール後、Claude Code で/playwright-cliを入力して読み込まれたか確認します。

詳細

playwright-cli によるブラウザー自動化

ScreenCI 用にページを調査する場合

  • まずはシンプルなフローから： npx screenci explore <url> --click "<name>" はページを開き、クリック操作を進め、スナップショットをインラインで出力します。これ以上の手順が必要な場合にのみ playwright-cli を使用します。

  • npx playwright-cli ... は screenci/ ディレクトリから実行してください。ここにローカルの devDependency としてインストールされています。

  • 独自の Playwright スクリプトは絶対に作成しないでください。 サインアウト状態で開始され、異なるブラウザーを使用するため、記録で検出されることのないセレクターを見つけてしまいます。

  • アプリでサインインが必要な場合は、ScreenCI がすでに保存しているセッションを読み込みます。

    playwright-cli open
playwright-cli state-load screenci/.screenci/auth/default.json
playwright-cli goto https://app.example.com

    このファイルが存在しない場合は、npx screenci login を実行し、開いたブラウザーで利用者にサインインしてもらってから、npx screenci login --wait を実行して読み込みます。このブラウザーに利用者の認証情報を入力してはいけません。また、このファイルに状態を上書き保存してはいけません（state-save を実行すると、実際のセッションが上書きされます）。

  • 最初のページ遷移とスナップショットの取得後、Cookie の同意バナーや Cookie ポリシーのバナーが表示されていないか確認します。スクリプトが最初の hide() ブロック内で使用すべき承認アクションを特定します。可能であれば、 getByRole('button', { name: /accept|accept all|allow all|agree|ok/i }) のような安定したロケーターを使用してください。 単に閉じるアクションや設定アクションよりも、承認または許可のアクションを優先します。

  • このブラウザーはインストール済みの Chrome です。screenci.config.ts の use で channel: 'chrome' が設定されていない限り、レコーダーは同梱の Chromium を使用します。そのため、ここで動作して npx screenci test で失敗する手順は、セレクターではなくブラウザーに原因があります。

スナップショット

各コマンドは、ページの URL、タイトル、要素参照（e15）付きのスナップショットを出力します。インラインで読める出力を優先してください。お使いのバージョンがグローバル --raw オプションに対応している場合、playwright-cli --raw snapshot はスナップショットのみを出力します。 それ以外の場合、出力に .playwright-cli/*.yml ファイルへのリンクが含まれます。インラインの概要だけでは不十分な場合にのみ、そのファイルを読みます。

playwright-cli snapshot            # whole page
playwright-cli snapshot e34        # one element
playwright-cli snapshot --depth=4  # shallower, cheaper

基本コマンド

playwright-cli open [url]
playwright-cli goto https://example.com
playwright-cli click e3
playwright-cli fill e5 "[email protected]"
playwright-cli type "search query"
playwright-cli press Enter
playwright-cli hover e4
playwright-cli select e9 "option-value"
playwright-cli check e12
playwright-cli go-back
playwright-cli reload
playwright-cli eval "el => el.getAttribute('data-testid')" e5
playwright-cli close

対象には CSS セレクターや Playwright ロケーターも使用できます。

playwright-cli click "getByRole('button', { name: 'Submit' })"
playwright-cli click "getByTestId('submit-button')"

名前付きセッション：playwright-cli -s=mysession open example.com を実行し、その後 playwright-cli list / playwright-cli close-all を実行します。

インストール

npx --no-install playwright-cli --version が失敗する場合は、 npm install -g @playwright/cli@latest でインストールしてください。

コメント

Markdown 対応