LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@sinzy0925(タロ AI)

DifyのPlaywrightプラグインを使ってみた。（けっこうめんどくさい笑笑）

Last updated at Posted at 2025-04-29

DifyにPlaywrightのプラグインが出ましたね！！

早速つかってみたよ！

前提条件

  1. Playwrightは、Web版Difyにインストールしただけでは動かない。
    => playwrightプラグインをローカルＰＣで起動させて、ngrokを使って公開し、Web版Difyから使う。（めんどくさ）
    　
  2. インストールが必要なもの
    1 playwrightプラグイン
    2 ngrok
    3 nodejs(npxコマンド実行に必要)
    　
  3. 各種事前設定方法
  1. playwrightプラグインをインストールする
    https://cloud.dify.ai/plugins?category=discover
    で、検索窓に　playwright　と入力すると、playwrightが表示されるので、マウスを持っていき、インストールボタンをクリックしてインストールします。
    スクリーンショット (71).png
    　
    　
  2. difyのエージェントから使うので、エージェントもインストールする
    https://cloud.dify.ai/plugins?category=discover
    で、検索窓に　agent　と入力すると、Dify Agent Strategies が表示されるので、マウスを持っていき、インストールボタンをクリックしてインストールします。
    スクリーンショット (80).png
    　
    　
    3)playwrightプラグインをローカルＰＣで起動する
    コマンドプロンプトで以下のように入力します
npx -y playwright@1.51.0 run-server --port 3003 --host 127.0.0.1

こうなればOK

npx -y playwright@1.51.0 run-server --port 3003 --host 127.0.0.1
Listening on ws://127.0.0.1:3003/

スクリーンショット 2025-04-29 095919.png

4)ngrokで、ローカルＰＣのplaywrightプラグインを公開する(インストール方法は検索してね)

ngrok http 3003

以下のように表示されたらOK！

ngrok
Route traffic by anything: https://ngrok.com/r/iep                     Session Status                online
Account                       Shinji Yoshinaga (Plan: Free)
Version                       3.22.1
Region                        Japan (jp)
LLatency                       41ms
eb Interface                 http://127.0.0.1:4040
Forwarding                   https://76b4-240b-c020-480-5abb-9557-722a-dade-3a22.ngrok-free.app -> http://localhost:3003

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

スクリーンショット 2025-04-29 100035.png

まだ終わらないよ（笑笑）

　
4. Difyでの設定
　1.　Dify　→　ツール　→　playwright　→　認証する　
　　　とクリックして、Playwright URIに、ngrokで表示された
　　公開用url https://76b4-240b-c020-480-5abb-9557-722a-dade-3a22.ngrok-free.app　
のhttpsをwssに変更した以下を設定します。

wss://76b4-240b-c020-480-5abb-9557-722a-dade-3a22.ngrok-free.app

スクリーンショット 2025-04-29 100603.png
　
Playwright URI　に　wss://76b4-240b-c020-480-5abb-9557-722a-dade-3a22.ngrok-free.app　を貼り付ける（これは、私の例なのであなたの場合は自分のURLを書いてね）
　
スクリーンショット (82).png

この設定でできたこと：DifyのPlaywrightプラグインから、ローカルＰＣのDifyが実行できるようになった。（多分）

　
　2. エージェントブロックで、Playwrightを使えるように設定する
　ワークフローを以下のように設定します。
　スクリーンショット 2025-04-29 102629.png

  • 開始ノードの設定は、何もしません。

  • エージェントノードの設定は以下の通り
    スクリーンショット 2025-04-29 102811.png
    　
    　INSTRUCTIONにロジックを書きます。これをエージェントがPlwyrightにFunctionCallingで投げるようです。
    　QUERYには、Playwrightが取得したデータをどうしたいのか書きます。
    　

  • 終了ノードの設定は以下の通り
    スクリーンショット 2025-04-29 103335.png

  1. できたアプリを実行します。
    ①実行をクリック　→　しばらく待つ　→　②結果をクリック　→　③Example Domain が表示されたらOK
    スクリーンショット 2025-04-29 103731.png

終了！！
お疲れさま～

詳細設定方法は、以下のどこかに記載されてますので、ご確認を。

とにかくめんどくさいので、時間と心に余裕があるときにやってみよう！

　

どう使うか分からないので、Google AI Studioに質問した結果！

Google AI Studio 質問(playwright詳細ページについて質問) Difyのplaywrightプラグインの使い方を教えて

以下は、詳細ページです。
https://marketplace.dify.ai/plugins/hjlarry/playwright

logo-site
Marketplace
Submit plugin

plugin-hjlarry/playwright-logo
playwright
0.0.1
A tool can be used to automate the browser with playwright script.

hjlarry
/
playwright
1381 installs
Install

playwright
Author: hjlarry
Version: 0.0.1
Type: tool
Repo&Issue: https://github.com/hjlarry/dify-plugin-playwright

A tool can be used to automate the browser with playwright script.

Get Started

  1. run your playwright server
    The default port 3000 is already used by dify, you should change to another port.

Option 1 (Use Docker)

docker run -p 3003:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.51.0-noble /bin/sh -c "npx -y playwright@1.51.0 run-server --port 3000 --host 0.0.0.0"
Option 2 (Use npx)

npx -y playwright@1.51.0 run-server --port 3003 --host 0.0.0.0
2. Authroize
Use ws://:3003 to authorize.

  1. Execute script
    The script should like this:

page = browser.new_page(); page.goto('http://playwright.dev'); result = page.screenshot();
using ; to separate commands. Assign the final output to the variable result(only support string and bytes). Utilize the browser variable to access the browser object.

  1. The agent can use this tool well

CATEGORY
Tool
VERSION
0.0.1
hjlarry
·
2025-04-03 17:28:13
Version history
REQUIREMENTS
Maximum memory
256MB

Google AI Studio 回答(playwright詳細ページについて質問) はい、承知いたしました。DifyのPlaywrightプラグインの使い方について、提供された情報に基づいて解説します。

このプラグインは、Difyの中からPlaywrightスクリプトを実行してブラウザ操作を自動化するためのツールです。

使い方（セットアップと実行手順）

  1. Playwrightサーバーの起動:

    • 重要: Difyはデフォルトでポート3000を使用するため、Playwrightサーバーは別のポート（例: 3003）で起動する必要があります。
    • 方法1: Dockerを使用する場合
      • 以下のコマンドを実行して、Dockerコンテナ内でPlaywrightサーバーを起動します。ポート3003をホスト側でリッスンし、コンテナ内のポート3000に接続します。
      docker run -p 3003:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.51.0-noble /bin/sh -c "npx -y playwright@1.51.0 run-server --port 3000 --host 0.0.0.0"
    • 方法2: npxを使用する場合 (Node.jsがインストールされている環境)
      • 以下のコマンドを実行して、直接Playwrightサーバーを起動します。ポート3003でリッスンします。
      npx -y playwright@1.51.0 run-server --port 3003 --host 0.0.0.0
    • --host 0.0.0.0 は、どのIPアドレスからの接続も受け付ける設定です。

  2. Difyでのプラグイン認証:

    • DifyのマーケットプレイスからPlaywrightプラグインをインストールします。
    • インストール後、プラグインの設定画面（通常は「ツール」や「Agent」の設定内）で認証情報を入力します。
    • 認証情報として、ws://<IPアドレス>:3003 の形式で入力します。
      • <IPアドレス> の部分には、ステップ1でPlaywrightサーバーを実行しているマシンのIPアドレスを入力します。
      • もしDifyと同じマシンでPlaywrightサーバーを実行している場合は、localhost や 127.0.0.1 を試してみてください (例: ws://localhost:3003)。
      • Dockerを使用している場合や、別のマシンでサーバーを実行している場合は、そのマシンの適切なIPアドレスを指定する必要があります。

  3. スクリプトの実行:

    • DifyのAgentやチャットフロー内でこのプラグイン（ツール）を選択し、実行したいPlaywrightスクリプトを入力します。
    • スクリプトの書き方のルール:
      • 複数のコマンドはセミコロン ; で区切ります。
      • ブラウザオブジェクトには browser という変数名でアクセスできます。
      • 最終的にDifyに返したい結果（例: スクリーンショットのデータ、取得したテキストなど）は、result という変数に代入する必要があります。
      • result に代入できるのは、文字列 (string) または バイト列 (bytes) のみです。
    • スクリプト例: 
      # 新しいページを開き、指定したURLにアクセスし、スクリーンショットを取得して result に代入する
page = browser.new_page(); page.goto('http://playwright.dev'); result = page.screenshot();
      この例では、ページのスクリーンショット（バイト列）が result に代入され、Difyに返されます。

  4. Agentでの利用:

    • 説明によると、このプラグインはDifyのAgentとうまく連携できるようです。
    • つまり、Agentに対して自然言語で「〇〇のウェブサイトを開いて、特定の情報を取得して」といった指示を出すと、Agentが内部で適切なPlaywrightスクリプトを生成し、このプラグインを使って実行してくれる可能性があります。

補足・注意点:

  • IPアドレス: Difyを実行している環境からPlaywrightサーバーを実行しているマシンへネットワーク的に到達可能である必要があります。ファイアウォール設定なども確認してください。
  • Playwrightのバージョン: プラグインが特定のPlaywrightバージョン（この例では1.51.0）に依存している可能性があるため、サーバー起動時は指定されたバージョンを使うのが安全です。
  • エラー: うまく動作しない場合は、Playwrightサーバーのログや、Dify側のエラーメッセージを確認してください。ポート番号の競合や、IPアドレスの指定ミス、スクリプトの構文エラーなどが考えられます。

これで、DifyでPlaywrightプラグインを使用するための基本的な手順は以上です。特定の操作（要素のクリック、テキスト入力、情報抽出など）を行いたい場合は、Playwrightのドキュメントを参照してスクリプトを作成し、上記のルールに従って記述してください。

Google AI Studio 質問(Web版Difyでは使えない？＝＞使える！！) もしかして、difyをwebで使っていると使えない？
Google AI Studio 回答(Web版Difyでは使えない？＝＞使える！！) はい、その可能性が高いです。

理由:

  1. ネットワーク接続: DifyのWeb版 (dify.ai など) は、Difyが管理するクラウドサーバー上で動作しています。一方、Playwrightプラグインを使用するには、あなたが Playwright サーバーを起動する必要があります (Docker または npx を使用)。
  2. アクセス制限: あなたがローカルマシン (自分のPC) や、社内ネットワークなどのプライベートな環境で Playwright サーバーを起動した場合、Difyのクラウドサーバーからそのサーバーへ直接ネットワーク接続することが通常できません。
    • 例えば、認証情報として ws://localhost:3003 や ws://192.168.1.10:3003 (プライベートIPアドレス) を指定しても、DifyのWebサーバーからは到達できないため、プラグインは機能しません。

Web版で使うための条件 (技術的に可能ですが、推奨されない場合や追加設定が必要):

  • Playwrightサーバーをインターネットに公開する:
    • あなたが起動する Playwright サーバーに、グローバルIPアドレスを割り当て、ファイアウォールでポート (例: 3003) を開放する必要があります。
    • これにより、DifyのWebサーバーから ws://<あなたのグローバルIP>:3003 のようにアクセスできるようになります。
    • ただし、これはセキュリティ上のリスクを伴います。 Playwrightサーバーに認証機能がない場合、インターネット上の誰からでもアクセスされてしまう可能性があります。
  • トンネリングサービスを使う (例: ngrok):
    • ngrokのようなサービスを使うと、ローカルで実行しているサーバー (例: localhost:3003) を一時的にインターネットに公開し、公開URL (例: wss://xxxx.ngrok.io) を取得できます。
    • この公開URLをDifyのプラグイン認証情報として設定すれば、Web版Difyからでも接続できる可能性があります (WebSocket (wss) 対応が必要)。
    • ただし、これは一時的な利用やテスト向けであり、安定性やセキュリティ面で本番運用には向かない場合があります。

推奨される方法:

  • Difyをセルフホストする:
    • もしブラウザ自動操作を頻繁に利用したいのであれば、Dify自体を自分でサーバーにインストールして運用する（セルフホスト）のが最も確実です。
    • セルフホスト環境であれば、Difyサーバーと同じマシンや同じローカルネットワーク内で Playwright サーバーを起動し、ws://localhost:3003 や ws://<ローカルIP>:3003 で容易に接続できます。

結論として、DifyのWeb版を利用している場合、追加のネットワーク設定やツールなしに、ローカルで起動したPlaywrightサーバーを利用するプラグインを使うのは難しいでしょう。

Google AI Studio 質問(ngrok活用でWeb版Difyから使う方法を教えて) プラグインを自分のローカルパソコンで起動して、ngrokでトンネルを作って、Difyから使ってみたい
Google AI Studio 回答(ngrok活用でWeb版Difyから使う方法) はい、承知いたしました。ローカルPCでPlaywrightサーバーを起動し、ngrokを使ってそれをインターネットに公開し、DifyのWeb版から利用する手順を説明します。

前提条件:

  • Node.jsとnpm (またはDocker): Playwrightサーバーを起動するために必要です。
  • ngrokアカウント: ngrokのウェブサイトで無料アカウントを作成してください。
  • ngrokクライアント: ローカルPCにngrokクライアントをダウンロードし、PATHを通すか、実行ファイルがあるディレクトリでコマンドを実行できるようにしておいてください。

手順:

  1. ngrokの認証設定 (初回のみ):

    • ngrokのダッシュボードにログインし、"Your Authtoken" を見つけます。
    • ターミナル（コマンドプロンプトやPowerShell）を開き、以下のコマンドを実行してngrokクライアントを認証します。 
      ngrok config add-authtoken <YOUR_AUTHTOKEN>
      <YOUR_AUTHTOKEN> は実際のあなたのトークンに置き換えてください。

  2. Playwrightサーバーのローカル起動:

    • ターミナルを開きます。

    • 以下のどちらかのコマンドを実行して、ポート 3003 でPlaywrightサーバーを起動します。（ポート番号は任意ですが、Difyのデフォルトポート3000とは違うものを選んでください）

      • npx を使う場合: 
        npx -y playwright@1.51.0 run-server --port 3003 --host 127.0.0.1
        (--host 127.0.0.1 を指定することで、ローカルマシンからの接続のみを受け付けるようにし、ngrok経由のアクセスのみを許可します。)
      • Docker を使う場合: 
        docker run -p 127.0.0.1:3003:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.51.0-noble /bin/sh -c "npx -y playwright@1.51.0 run-server --port 3000 --host 0.0.0.0"
        (Dockerの場合は、コンテナ内では 0.0.0.0 でリッスンさせ、ホスト側では 127.0.0.1:3003 で受けるようにします。)

    • サーバーが起動し、Listening on ws://127.0.0.1:3003 のようなメッセージが表示されたら成功です。このターミナルは開いたままにしておきます。

  3. ngrokでトンネルを作成:

    • 別のターミナルを開きます。（Playwrightサーバーを実行しているターミナルはそのままにしておきます）
    • 以下のコマンドを実行して、ローカルのポート 3003 へのトンネルを作成します。 
      ngrok http 3003
      (PlaywrightサーバーはWebSocket (ws) を使いますが、ngrokの http コマンドは通常WebSocketのUpgradeリクエストもトンネリングしてくれます。)
    • ngrokが起動し、以下のような情報が表示されます。 
      Session Status                online
Account                       Your Name (Plan: Free)
Version                       x.x.x
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://xxxxxxxx.ngrok.io -> http://localhost:3003
Forwarding                    https://xxxxxxxx.ngrok.io -> http://localhost:3003
    • この中の Forwarding に表示されている https://xxxxxxxx.ngrok.io のようなhttpsのURLをコピーまたはメモしておきます。これがDifyからアクセスするための公開URLになります。（xxxxxxxの部分は毎回ランダムに変わります）
    • このngrokのターミナルも開いたままにしておきます。

  4. DifyでPlaywrightプラグインを設定:

    • DifyのWeb版にログインします。
    • 「設定」 > 「ツール」 > 「マーケットプレイス」などでPlaywrightプラグインを探し、インストールします。
    • インストールしたPlaywrightプラグインの「認証を設定」または「設定」ボタンをクリックします。
    • 認証情報の入力欄に、ステップ3でメモしたngrokのhttps URLのホスト部分を使って、ws:// または wss:// 形式で入力します。
      • 試すべき形式: wss://<ngrokのURLホスト部分> (例: wss://xxxxxxxx.ngrok.io)
      • もし wss:// でうまくいかない場合: ws://<ngrokのURLホスト部分> (例: ws://xxxxxxxx.ngrok.io) も試してください。（ngrokは通常HTTPS(WSS)接続を提供しますが、Difyプラグインがどちらを期待するかによります）
    • ポート番号はURLに含まれているため、別途入力する必要はありません。
    • 設定を保存します。

  5. Difyでプラグインを使用:

    • AgentのツールとしてPlaywrightプラグインを追加するか、チャットフローでプラグインノードを使います。
    • プラグインに入力するスクリプト欄に、実行したいPlaywrightスクリプトを入力します。
      • 例: page = browser.new_page(); page.goto('https://www.google.com'); result = page.title()
      • 重要: 最終的な結果は必ず result 変数に代入してください。
    • Agentに指示を出すか、フローを実行して、プラグインが動作するか確認します。

注意点:

  • ngrokのURL: ngrokを一度終了して再起動すると、公開URLが変わります。その場合は、Difyのプラグイン設定も新しいURLに更新する必要があります。
  • 接続維持: Difyからプラグインを使用している間は、ローカルPCでPlaywrightサーバーとngrokの両方を起動し続けておく必要があります。どちらか一方でも終了すると接続できなくなります。
  • ngrok無料プランの制限: 無料プランには接続時間や帯域幅などの制限があります。長時間の利用や頻繁な利用には向かない場合があります。
  • セキュリティ: ngrokで公開している間は、そのURLを知っていれば誰でもあなたのローカルのPlaywrightサーバーにアクセスできる状態になります。テスト目的での一時的な利用にとどめ、機密情報を扱うサイトへのアクセスは避けるなど、注意して利用してください。
  • トラブルシューティング: うまくいかない場合は、Playwrightサーバーのログ、ngrokのターミナル出力、ブラウザの開発者ツール（Dify実行時）のエラーメッセージなどを確認してください。

これで、DifyのWeb版からローカルPCのPlaywrightサーバーをngrok経由で利用できるはずです。試してみてください。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?