ドキュメントブラウザーと CrawlAgent BrowserPlaywright で接続

Playwright

Scraping Browser は、動的ウェブサイトからのデータ抽出プロセスを簡素化するように設計された高性能なサーバーレスプラットフォームを提供します。Playwright とのシームレスな統合により、開発者は専用のサーバーリソースを必要とせずにヘッドレスブラウザを実行、管理、監視でき、効率的なウェブ自動化とデータ収集が可能になります。

必要なライブラリのインストール

まず、既存のブラウザインスタンスに接続するために使用される、Playwright の軽量バージョンである playwright-core をインストールします:

npm install playwright-core

Scraping Browser に接続するコードの作成

Playwright コード内で、以下を使用して Scraping Browser に接続します:

const { Playwright } = require('@scrapeless-ai/sdk');
 
(async () => {
    const browser = await Playwright.connect({
        apiKey: 'Your API key',
        sessionName: 'sdk_test',
        sessionTTL: 180,
        proxyCountry: 'US',
        sessionRecording: true,
    });
 
    const context = browser.contexts()[0];
    const page = await context.newPage();
 
    await page.goto('https://www.scrapeless.com');
    console.log(await page.title());
    await browser.close();
})();

これにより、スケーラビリティ、IPローテーション、グローバルアクセスなど、Scraping Browser のインフラストラクチャを活用できます。

実用例

Scraping Browser を統合した後の一般的な Playwright 操作を以下に示します:

  1. ナビゲーションとページコンテンツの抽出
const page = await browser.newPage();
await page.goto('https://www.example.com');
console.log(await page.title());
const html = await page.content();
console.log(html);
await browser.close();
 
  1. スクリーンショットの取得
const context = browser.contexts()[0];
const page = await context.newPage();
await page.goto('https://www.example.com');
await page.screenshot({ path: 'example.png' });
console.log('Screenshot saved as example.png');
await browser.close();
 
  1. カスタムコードの実行
const context = browser.contexts()[0];
const page = await context.newPage();
await page.goto('https://www.example.com');
const result = await page.evaluate(() => document.title);
console.log('Page title:', result);
await browser.close();
 
  1. マウスクリックをシミュレートします。
const { createPlaywrightCDPSession } = require('@scrapeless-ai/sdk');
// ... connect to Scraping Browser as shown above
const cdpSession = await createPlaywrightCDPSession(page);
await cdpSession.realClick('button[type="submit"]');
  1. キーボード入力のシミュレーション。
const { createPlaywrightCDPSession } = require('@scrapeless-ai/sdk');
// ... connect to Scraping Browser as shown above
const cdpSession = await createPlaywrightCDPSession(page);
await cdpSession.realFill('#login-email', 'scrapeless@gmail.com');
  1. Scrapeless Agent を使用して現在のページの URL を取得
const { createPlaywrightCDPSession } = require('@scrapeless-ai/sdk');
// ... connect to Scraping Browser as shown above
const cdpSession = await createPlaywrightCDPSession(page);
const { error, liveURL } = await cdpSession.liveURL();
  1. 画像キャプチャの解決
const { createPlaywrightCDPSession } = require('@scrapeless-ai/sdk');
// ... connect to Scraping Browser as shown above
const cdpSession = await createPlaywrightCDPSession(page);
await cdpSession.imageToText({
  imageSelector: '.captcha__image',
  inputSelector: 'input[name="captcha"]',
  timeout: 30000,
});
  1. 自動キャプチャ解読を無効化
const { createPlaywrightCDPSession } = require('@scrapeless-ai/sdk');
// ... connect to Scraping Browser as shown above
const cdpSession = await createPlaywrightCDPSession(page);
await cdpSession.disableCaptchaAutoSolve();
  1. 指定したオプションでキャプチャを手動で解読
const { createPlaywrightCDPSession } = require('@scrapeless-ai/sdk');
// ... connect to Scraping Browser as shown above
const cdpSession = await createPlaywrightCDPSession(page);
await cdpSession.solveCaptcha();
  1. ページ上でキャプチャが検出されるのを待機
const { createPlaywrightCDPSession } = require('@scrapeless-ai/sdk');
// ... connect to Scraping Browser as shown above
const cdpSession = await createPlaywrightCDPSession(page);
await cdpSession.waitCaptchaDetected({ timeout: 30000 });
  1. キャプチャが解読されるのを待機(成功または失敗のいずれか)
const { createPlaywrightCDPSession } = require('@scrapeless-ai/sdk');
// ... connect to Scraping Browser as shown above
const cdpSession = await createPlaywrightCDPSession(page);
await cdpSession.waitCaptchaSolved({ timeout: 30000 });