PlayWright Browser Toolkit で Webスクレイピングを試してみた

 

はじめに

PlayWright Browser Toolkitを紹介します。

今回は、PlayWright Browser Toolkitを使って、簡単なWebスクレイピングを行いました。

目次

  • 概要
  • 動作確認:pythonからPlayWrightを操作する
  • PlayWright Browser Toolkit
  • 簡単なWebスクレイピング
  • まとめ
  • 参考情報
 

1.概要

PlayWrightとは

PlayWright(リンク)は、Microsoft社が開発している、Webテストと自動化のためのフレームワークです。

PlayWrightを使うことで、Chrome、Firefox、WebKitをコマンドラインから操作することが可能になります。

PlayWright Browser Toolkit

PlayWright Browser Toolkit(リンク)は、LangCahin(リンク)のAgent toolkitsの一部として実装されています。

PlayWright Browser Toolkitの利点は、LangChainのAgentが静的なサイトだけではなく、動的にレンダリングされるサイトも操作することが出来るようになることです。

2.動作確認:pythonからPlayWrightを操作する

Dockerで環境を構築し、pythonからPlayWrightが操作できることを確認しました。

サンプルコードは、Playwright for Python の Getting started -Library(リンク)を参考にさせていただきました。

Dockerfile

FROM python:3.9.14

WORKDIR /root
RUN pip install --no-cache-dir openai langchain playwright lxml asyncio nest_asyncio beautifulsoup4
RUN playwright install-deps
RUN playwright install

WORKDIR /Workspace
 

動作確認用サンプルコード

import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        await page.goto("http://playwright.dev")
        print(await page.title())
        await page.screenshot(path='images/example.png')
        await browser.close()

asyncio.run(main())
 

3.PlayWright Browser Toolkit

PlayWright Browser Toolkitを使うことで、LangChainのAgent が PlayWrightを使ってクエリへの回答を行うことが可能になります。

PlayWright Browser Toolkitには以下のToolが用意されており、それらをAgentに渡すことで、Agentがブラウザ操作を行い、クエリを実行します。

Tool一覧

Tool名 説明
NavigateTool URLを指定して、ページ遷移
NavigateBackTool 前のページに遷移
ClickTool HTML要素をクリック
ExtractTextTool 開いているページのテキスト情報を抽出
ExtractHyperlinksTool 開いているページのhyperlinkを取得
GetElementsTool CSS selectorを指定してHTML要素を取得
CurrentPageTool 開いているページのURLを取得
 

Toolの一覧表示用スクリプト

import nest_asyncio
import asyncio
from langchain.agents.agent_toolkits import PlayWrightBrowserToolkit
from langchain.tools.playwright.utils import (
    create_async_playwright_browser,
    create_sync_playwright_browser,
)

async def main():
    nest_asyncio.apply()
    async_browser = create_async_playwright_browser()
    toolkit = PlayWrightBrowserToolkit.from_browser(async_browser=async_browser)
    tools = toolkit.get_tools()
    print(tools)

asyncio.run(main())
 
 

4.簡単なWebスクレイピング

LangChainのAgentにPlayWright Browser ToolkitのToolを渡すことで、Agentがブラウザ操作を行えるようになります。Agentに簡単なWebスクレイピングのクエリを投げて動作検証を行いました。

検証1:Agentの動作確認

今回は、動作検証として

 クエリ:「株式会社キーウォーカーの所在地を教えてください。」

の処理をさせてみました。

サンプルコードの作成には、以下のサイトを参考にさせていただきました。

  • PlayWright Browser Toolkitのページ(リンク)のサンプルコード
  • GetElementsTool produce unicode when the elements contain non-ascii text #4265(リンク)のBrowserのdevice指定
 

Webスクレイピング用サンプルコード

import nest_asyncio
import asyncio

from langchain.agents import initialize_agent, AgentType
from langchain.chat_models import ChatOpenAI

from langchain.agents.agent_toolkits import PlayWrightBrowserToolkit
from langchain.tools.playwright.utils import run_async
from playwright.async_api import async_playwright

async def main():
    nest_asyncio.apply()

    # PlayWrightとBrowser(Chromium)を準備
    playwright = async_playwright()
    device = {
        "user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5672.53 Safari/537.36",
        "screen": {
        "width": 1920,
        "height": 1080
        },
        "viewport": {
        "width": 1280,
        "height": 720
        },
        "device_scale_factor": 1,
        "is_mobile": False,
        "has_touch": False,
        "default_browser_type": "chromium"
    }
    browser = run_async(playwright.start())
    browser = run_async(browser.chromium.launch(headless=True))
    context = await browser.new_context(**device)

    # PlayWrightBrowserToolkit からAgentに渡すToolsを取得
    toolkit = PlayWrightBrowserToolkit.from_browser(async_browser=browser)
    tools = toolkit.get_tools()

    # 使用するLLM:今回はGPT-4を利用。
    llm = ChatOpenAI(model_name="gpt-4", temperature=0)

    # Agentの初期化
    agent_chain = initialize_agent(
        tools,
        llm,
        agent=AgentType.STRUCTURED_CHAT_ZERO_SHOT_REACT_DESCRIPTION,
        verbose=True,
    )

    result = await agent_chain.arun("株式会社キーウォーカーの所在地を教えてください。")
    print(result)

asyncio.run(main())
LangChainのAgentに、モデル:gpt-4、ToolsとしてPlayWright Browser Toolkitのツール一覧を渡して、初期化しています。
 

Agentの思考ステップ

サンプルコード実行時の思考ステップを示します。

ステップ1:Googleサーチ

> Entering new AgentExecutor chain...
The user is asking for the location of a company called "Keywalker Co., Ltd." in Japanese. I will search for this information on the internet.

Action:
{
  "action": "navigate_browser",
  "action_input": {
    "url": "https://www.google.com/search?q=株式会社キーウォーカー+所在地"
  }
}
Observation: Navigating to https://www.google.com/search?q=株式会社キーウォーカー+所在地 returned status code 200 Thought:The browser has successfully navigated to the Google search results page for the location of "Keywalker Co., Ltd." I will now extract the text from the page to find the location.
 

ステップ2:検索結果のサイトからテキスト抽出&所在地の情報の抽出

Action:
{
  "action": "extract_text",
  "action_input": {}
}
Observation: 株式会社キーウォーカー 所在地 - Google 検索 数秒たってもリダイレクトされない場合は、 ここをクリック してく ださい。 ユーザー補助のリンク メイン コンテンツにスキップ 連続スクロールをオフにする 連続スクロールをオンにする 設定できませんでした。もう一度お試しください。 ユーザー補助ヘルプ ユーザー補助に関するフィードバック / を押すと検索ボックスに移 動できます 株式会社キーウォーカー 所在地 もっと見る 削除 削除 不適切な検索候補の報告 クイック設定 ログイン フィルタとト ピック 画像 動画 ニュース 地図 ショッピング 書籍 フライト ファイナンス すべてのフィルタ 画像 地図 ショッピング 動画 ニュース 書籍 フライト ファイナンス ツール セーフサーチ 不適切な検索結果を除外 露骨な画像にぼかしを入れる オフ セーフサーチ について すべての言語 すべての言語 日本語のペー (省略) Thought:The location of Keywalker Co., Ltd. is found in the extracted text. The address is "〒105-0003 東京都港区西新橋 1丁目8−1 REVZO虎ノ門 4F", which translates to "1-8-1 Nishishinbashi, Minato-ku, Tokyo 105-0003, REVZO Toranomon 4F". I will provide this information to the user.
 
ステップ3:回答生成
Action:
{
  "action": "Final Answer",
  "action_input": {
    "final_answer": "株式会社キーウォーカーの所在地は「〒105-0003 東京都港区西新橋1丁目8−1 REVZO虎ノ門 4F」です。"
  }
}
  株式会社キーウォーカーの所在地(リンク)は、2023年8月末時点では
〒105-0003 東京都港区西新橋1丁目8−1 REVZO虎ノ門4F
となっており、正しく回答できています。  

検証2:URLを指定し簡単なWebスクレイピング

クエリ:「次のサイトから(平均年齢, エンジニア比率, 平均残業時間, 有給休暇消化率)を取得してください。サイト:https://recruit.keywalker.co.jp/

抽出結果

Finished chain.
{'final_answer': 'The average age is 32.6 years, 
the engineer ratio is 67%, 
the average overtime hours are 13 hours per month (or 39 minutes per day), 
and the paid leave usage rate is 48.9%.'}
 

株式会社キーウォーカーの2022年9月末時点では、

  1. 平均年齢:32.6歳
  2. エンジニア比率:67%
  3. 平均残業時間:13時間
  4. 有給休暇消化率:48.9%

となっており、こちらも正確に取得できました。

また、詳細は省略させていただきますが、動的なサイトからの情報抽出もほぼ同じソースコードで実施することができました。

 

検証3:少し複雑なWebスクレイピング

クエリ:「次のサイトから(企業名, 郵便番号, 住所, 電話番号, 代表者, 資本金, 売上高, 従業員数, 事業内容, 設立年月日, 役員, アクセス方法, email)を取得してください。サイト:”指定したurl”」

複数のサイトで、企業情報の抽出を試してみました。

 

抽出結果概要

  1. 企業概要がテーブルとしてまとまっているようなサイトでは抽出が上手くいきました。 例:https://www.keywalker.co.jp/company/outline.html
  2. 一方で、Agentがhtml内のテキスト情報しか見ていないため、少し複雑なサイトからは抽出精度が落ちるようです。
  3. 足りない情報はリンク先まで見に行ってくれるのですが、出展が不明のため、取得情報が正しいかは注意が必要と感じました。
  4. また抽出結果を整形するには、クエリを色々と工夫する必要がありそうです。
 

Web検索と組み合わせて情報を探す場合や、ちょっとしたWebスクレイピングを行いたい場合には、Agentにクエリを投げるだけのため、お手軽に使えると思います。

しかし、複数サイトからの情報抽出を行うには、もう少し細かい制御が必要と感じました。

 

検証4:LLMモデルの変更

現状のgpt-4モデルではコストと応答時間の面で不利なため、gpt-3.5-turboモデルを用いて、

 クエリ:「株式会社キーウォーカーの所在地を教えてください。」

を実行してみましたが、上手く処理されませんでした。

 

gpt-3.5-turboモデルでの実行結果

> Entering new AgentExecutor chain...
株式会社キーウォーカーの所在地を調べるために、ウェブサイトを検索してみましょう。

> Finished chain.
株式会社キーウォーカーの所在地を調べるために、ウェブサイトを検索してみましょう。

OpenAIのモデルでは、gpt-4を使う必要があるようです。

 

5.まとめ

主にWebスクレイピングの観点からPlayWright Browser Toolkitの利点・欠点をまとめます。

 
PlayWright Browser Toolkit の利点
  1. クエリーによって欲しい情報を取得することができる。
  2. 動的なサイトからの情報抽出も可能。
  3. 大まかな指示だけで、簡単なWebスクレイピングを実施できる。
 
PlayWright Browser Toolkit の弱点
  1. Agentを用いた現状の処理方法では、複雑なサイトからの情報抽出で正確性が落ちる。
  2. またAgentを通すため、細かい指示を出しにくい。
  3. gpt-4モデルを用いる必要があるため、応答速度が遅く 、コストもかかる。
  4. そのため、大量のサイトから情報を抽出するようなクローラー的な使用方法には不向き。
 

「対象サイトを限定せずにWebスクレイピングする場合」や「比較的単純なサイトからWebスクレイピングを行いたい場合」であればPlayWright Brower Toolkitを用いることで、簡単に情報取得を行うことが可能です。

一方で、正確性・応答速度・コスト面に弱点があり、「大量のデータ収集が必要」「正確な情報を収集したい」といった用途には、PlayWright Browser Toolkitを用いたWebスクレイピングは不向きなようです。

弊社には、Webサイトを周期的にクローリング(巡回)し、Webページ上のデータを抽出・収集するShtockData(リンク)というサービスがございます。

PlayWright Browser Toolkitの弱点である「大量データ収集」や「正確な情報収集」がカバーされるだけでなく、お客様の活用しやすい形にデータを整形したうえでご提供が可能です。

ご興味がございましたら、こちら(ShtockDataリンク)のページ下部にあるお問い合わせフォームよりご連絡ください。

  ShtockData

お問い合わせフォーム

お問い合わせ項目を選択してください