Sponsored by iMean AI Trip Planner - パーソナライズされた旅程を作成し、格安航空券やホテルを探せる、チャットで旅行全体を計画できるAI旅行プランナーです。

AI広告ライブラリ

Openclaw Skills

Playwright コントローラー

Openclaw向けPlaywright コントローラー

AI エージェントが Playwright を介してスクリーンショットやテキストをキャプチャできるようにする、高性能な Web ブラウジングおよびデータ抽出スキルです。

mrchenkuan

v1.0.0

Mar 1, 2026

インストール

概要情報

Skill.md

インストール＆ダウンロード

1. ClawHub CLI

レジストリから直接スキルをインストールする最速の方法です。


                  npx clawhub@latest install playwright-controller

2. 手動インストール

スキルフォルダを以下のいずれかの場所にコピーしてください

グローバル

~/.openclaw/skills/

ワークスペース

<project>/skills/

優先順位：ワークスペース > ローカル > バンドル

3. プロンプトのインストール

このプロンプトをOpenClawにコピーするだけで、自動的にインストールされます。


                  Clawhubを使って playwright-controller をインストールして。Clawhubがインストールされていない場合は、先にインストールしてください（npm i -g clawhub）。

ダウンロードをご希望ですか？

ZIPアーカイブで生のスキルファイルを取得します。

Playwright コントローラーとは？

Playwright コントローラーは、Openclaw Skills エコシステム向けに設計されたプロフェッショナルグレードのブラウザー自動化ツールです。開発者や AI エージェントが Chromium を使用してプログラムで Web を操作できるようにし、フルページレンダリング、モバイルデバイスエミュレーション、動的コンテンツのインテリジェントな待機などの機能を提供します。単純なスクレイパーとは異なり、このスキルは iPhone のビューポートや特定の User-Agent 文字列を含む実際のユーザー環境をシミュレートすることで、JavaScript を多用するサイトを処理します。

このスキルを統合することで、エージェントは Web レイアウトを視覚的に検証し、さらなる処理のためにクリーンで構造化されたテキストを抽出する能力を得ることができます。速度を重視したヘッドレスモードと、複雑なログインや CAPTCHA 解決などの手動介入が必要なシナリオ向けのヘッドフルモードの両方をサポートしており、あらゆる自動化ワークフローに対応する多目的ツールとなります。

Playwright コントローラーのユースケース

視覚的なドキュメント作成のために、ページ全体または特定の要素のスクリーンショットを生成します。
スクリプトや広告を取り除くことで、最新の Web アプリケーションからクリーンなテキストコンテンツを抽出します。
モバイルビューポートと User-Agent シミュレーションを通じて、Web サイトのレスポンシブ性をテストします。
JS コンテンツのレンダリングに完全なブラウザー環境が必要なサイトから、データ収集を自動化します。
AI 駆動の環境内でヘッドフルブラウザーモードを使用して、Web インタラクションをデバッグします。

Playwright コントローラーの仕組み

エージェントは fetch や fetch-element などの特定のコマンドを使用してスキルをトリガーします。
事前に構成されたモバイルコンテキスト設定（iPhone シミュレーション）で Chromium ブラウザーインスタンスが起動されます。
コントローラーはターゲット URL に移動し、networkidle 状態を使用してインテリジェントな待機を実装します。
すべての非同期アセットとフォントが完全にロードされるように、追加のレンダリング遅延が適用されます。
スキルは高解像度の PNG スクリーンショットをキャプチャし、ページの内部テキストを抽出します。
テキスト抽出フェーズでは、スクリプトや広告などの不要な要素が除外されます。
ファイルは、整理されたストレージのために、一意のタイムスタンプと URL ベースのハッシュを含む指定されたディレクトリに保存されます。

Playwright コントローラーのセットアップ

Playwright コントローラーは Openclaw Skills ライブラリの一部であり、必要なすべての依存関係が事前に構成されています。Node.js (v16+) がインストールされていることを確認してください。

# Web ページを取得して即座にスクリーンショットを生成する
playwright:fetch https://example.com

# ページ上の特定の要素をキャプチャする
playwright:fetch-element --selector=".main-content" https://example.com

Playwright コントローラーのデータスキーマとタクソノミー

このスキルは、通常 ./screenshots フォルダの下にある構造化されたディレクトリ形式で出力を整理します。ファイル名には、タイムスタンプとサニタイズされた URL ハッシュの組み合わせが使用されます。

ファイル形式	命名規則	説明
フルスクリーンショット	`<timestamp>_<url_hash>.png`	高精度なページ全体の PNG キャプチャ。
抽出されたテキスト	`<timestamp>_<url_hash>_content.txt`	ページ全体のクリーンなテキストコンテンツ。
要素のビジュアル	`<timestamp>_<url_hash>_element.png`	特定の CSS セレクターのターゲットスクリーンショット。
エラーキャプチャ	`<timestamp>_<url_hash>_error.png`	実行失敗時にキャプチャされた視覚的状態。

Playwright コントローラーの高度な機能

モバイルエミュレーション: iPhone 17.0 の User-Agent と 375x800 解像度のシミュレーションを標準サポート。
インテリジェントな待機: ネットワークアイドル状態の自動検出とカスタムレンダリングバッファー。
ヘッドフルモード: デバッグや手動のユーザー操作のための、オプションの可視ブラウザーウィンドウ。
リソースインターセプション: 視覚的な正確性を維持しながら、不要なアセットをスキップしてパフォーマンスを最適化する機能。
柔軟な API: カスタムスクリプト統合のための fetchWithPlaywright および fetchElementAndScreenshot 関数への直接アクセス。
堅牢なエラー処理: デバッグを容易にするため、ページの読み込みに失敗した場合でもスクリーンショットを自動生成。