ライブセッション

ブラウザのライブビュー機能を使用すると、ブラウザセッションをリアルタイムで表示および制御できます。具体的には、ライブビュー機能には、アクティブなブラウザセッション内での表示、クリック、入力、スクロールが含まれます。そのため、自動化されたプロセスの監視、自動化スクリプトのデバッグ、およびブラウザセッションへの手動による介入を容易に行うことができます。

Scrapelessでは、プレイグラウンドとセッション管理インターフェースの2つの場所で、ブラウザセッションを表示または制御できます。

使い方

Scrapelessブラウザセッションの作成

最初に、セッションを作成する必要があります。これには2つの方法があります。

プレイグラウンド経由でのセッションの作成

API経由でのセッションの作成

APIを使用してセッションを作成することもできます。APIドキュメントを参照してください：Scraping Browser API Docs。セッション機能は、ライブビュー機能を含むこのセッションの管理に役立ちます。

const puppeteer =require('puppeteer-core');
 
const token = 'API Key'
 
// custom fingerprint
const fingerprint = {
    platform: 'Windows',
}
 
const query = new URLSearchParams({
    session_ttl: 180,
    session_name: 'test_scraping', // session name
    proxy_country: 'ANY',
    token: token,
    fingerprint: encodeURIComponent(JSON.stringify(fingerprint)),
});
 
const connectionURL = `wss://browser.scrapeless.com/browser?${query.toString()}`;
 
(async () => {
    const browser = await puppeteer.connect({browserWSEndpoint: connectionURL});
    const page = await browser.newPage();
 
    await page.goto('https://www.scrapeless.com');
    await new Promise(res => setTimeout(res, 3000));
 
    await page.goto('https://www.google.com');
    await new Promise(res => setTimeout(res, 3000));
 
    await page.goto('https://www.youtube.com');
    await new Promise(res => setTimeout(res, 3000));
 
    await browser.close();
})();

ライブセッションの表示

Scrapelessセッション管理インターフェースでは、ライブセッションを簡単に表示できます。表示方法にも2つの方法があります。

プレイグラウンドセッションのリアルタイム表示

プレイグラウンドでセッションを作成した後、右側にリアルタイムで実行されているブラウザが表示されます。

APIセッションのリアルタイム表示

API経由でセッションを作成した後、セッションページに実行中のセッションのリストが表示されます。「アクションの詳細」をクリックすると、ブラウザの操作をリアルタイムでプレビューできます。ここでは、ライブセッションをオンサイトで表示するか、セッションURLをコピーしてライブセッションを表示するかを選択できます。参考として、操作ビデオを2つ提供しています。

オンサイト表示

ライブURL

実行中のセッションのリストからライブURLをコピーして、ブラウザに貼り付けることで直接アクセスできます。

API経由でのライブURLの取得

APIを呼び出すことでライブURLを取得できます。次のコード例では、最初に実行中のセッションAPIを使用して現在実行中のすべてのセッションを取得し、次にライブURL APIを使用して特定のセッションのライブURLを取得します。

const API_CONFIG = {
    host: 'https://api.scrapeless.com',
    headers: {
        'x-api-token': 'API Key',
        'Content-Type': 'application/json'
    }
};
 
const requestOptions = {
    method: 'GET',
    headers: new Headers(API_CONFIG.headers)
};
 
async function fetchBrowserSessions() {
    try {
        // Fetch running browser sessions
        const sessionResponse = await fetch(`${API_CONFIG.host}/browser/running`, requestOptions);
 
        if (!sessionResponse.ok) {
            throw new Error(`failed to fetch sessions: ${sessionResponse.status} ${sessionResponse.statusText}`);
        }
 
        const sessionResult = await sessionResponse.json();
 
        // Process sessions data
        const sessions = sessionResult.data;
        if (!sessions || !Array.isArray(sessions) || sessions.length === 0) {
            console.log("no active browser sessions found");
            return;
        }
 
        // Get first session task ID
        const taskId = sessions[0]?.taskId;
        if (!taskId) {
            console.log("task id not found in the session data");
            return;
        }
 
        // Fetch live URL for the task
        await fetchLiveUrl(taskId);
    } catch (error) {
        console.error("error fetching browser sessions:", error.message);
    }
}
 
async function fetchLiveUrl(taskId) {
    try {
        const liveResponse = await fetch(`${API_CONFIG.host}/browser/${taskId}/live`, requestOptions);
 
        if (!liveResponse.ok) {
            throw new Error(`failed to fetch live url: ${liveResponse.status} ${liveResponse.statusText}`);
        }
 
        const liveResult = await liveResponse.json();
        if (liveResult && liveResult.data) {
            console.log(`taskId: ${taskId}`);
            console.log(`liveUrl: ${liveResult.data}`);
        } else {
            console.log("no live url data available for this task");
        }
    } catch (error) {
        console.error(`error fetching live url for task ${taskId}:`, error.message);
    }
}
 
fetchBrowserSessions().then(r => { });

Playwright セッションリプレイ