PlaywrightでCAPTCHAソルバーを使う

1. 1.

   Node.js 22+、Playwright、Chromium をインストールする

   playwright パッケージと、その Chromium ブラウザーバイナリをインストールします。ダウンロード可能な solvethree-sdk-0.1.0.tgz パッケージを使って、公式の solvethree JavaScript SDK をインストールしてください。直接ダウンロードしてインストールするコマンドは、Node.js 連携の手順に記載されています。

2. 2.

   solvethree でホスト名を設定する

   所有する HTTPS ページのホスト名には、ワークスペースで利用可能な有効な reCAPTCHA プロファイルが必要です。例を実行する前に、コンソールで設定してください。タスクでホスト名とアクションを送信しても、プロファイルは作成されません。

3. 3.

   3 つの環境変数を設定する

   TARGET_URL に所有する HTTPS ページの完全な URL、SOLVETHREE_PROXY にプロキシ URL、SOLVETHREE_API_KEY にワークスペースの API キーを設定します。スクリプトはサーバー側で実行し、API キーをページの JavaScript に含めないでください。この例ではアクション login を使用しているため、アプリケーションで別のアクションを使用している場合は変更する必要があります。

4. 4.

   例で使用するフォームを用意する

   ページには、名前が g-recaptcha-response の textarea と、アクセシブル名が正確に Submit であるボタンが必要です。フォームの構成が異なる場合は、実行前に以下で説明する受け渡し処理を調整してください。

タスクのプロキシと Playwright のブラウザープロキシは別々に設定します。ブラウザーコンテキストのプロキシで、SDK のサーバー側 API リクエストが自動的にルーティングされることはありません。この例では、タスクに 1 つのプロキシを指定し、ブラウザーの対象サイトへの通信にも同じプロキシを使用します。

// Install playwright and the official solvethree SDK first.
import { chromium } from 'playwright';
import { Solvethree } from '@solvethree/sdk';

const target = new URL(process.env.TARGET_URL); // Your configured HTTPS page.
const proxy = new URL(process.env.SOLVETHREE_PROXY);
const client = new Solvethree({ apiKey: process.env.SOLVETHREE_API_KEY });
const result = await client.solve({
  site: target.hostname, action: 'login', proxy: process.env.SOLVETHREE_PROXY,
});
const browser = await chromium.launch();
try {
  const context = await browser.newContext({
    proxy: {
      server: `${proxy.protocol}//${proxy.host}`,
      username: decodeURIComponent(proxy.username),
      password: decodeURIComponent(proxy.password),
    },
    userAgent: result.solution.userAgent,
    extraHTTPHeaders: { 'sec-ch-ua': result.solution.secChUa },
  });
  const page = await context.newPage();
  await page.goto(target.href);
  // This example form has this field and a button named Submit.
  // Adapt the selectors/callback to your own application's form contract.
  await page.locator('[name="g-recaptcha-response"]').waitFor({ state: 'attached' });
  await page.locator('[name="g-recaptcha-response"]').evaluate((field, token) => {
    field.value = token;
    field.dispatchEvent(new Event('input', { bubbles: true }));
  }, result.solution.token);
  await Promise.all([
    page.waitForResponse(response =>
      response.request().method() === 'POST' &&
      new URL(response.url()).origin === target.origin),
    page.getByRole('button', { name: 'Submit', exact: true }).click(),
  ]);
  // Check your application's success response here.
} finally {
  await browser.close();
}

solve はタスクを一度だけ作成し、準備完了になるか例外がスローされるまでポーリングします。ブラウザーは、その呼び出しが成功した後にのみ起動します。ブラウザーのコンテキストでは、URL エンコードされた認証情報を含む元のプロキシと、返された solution.userAgent および solution.secChUa を使用します。

フォームに渡すのはタスク ID ではなく solution.token です。トークン用の textarea は表示されている必要がないため、この例ではフィールドが DOM に追加されるのを待ちます。トークンを設定し、input イベントを発火させてから、送信ボタンをクリックします。

• TARGET_URL は、アプリケーションの URL です。解決タスクにはそのホスト名を site として渡し、Playwright は完全な URL に移動します。
• login は、この例のアクションです。アプリケーションで使用するアクションに置き換えてください。
• [name="g-recaptcha-response"] は、この例のトークンフィールドのセレクターです。アプリケーションが別のフィールドやリクエストパラメーターでトークンを受け取る場合は、置き換えてください。
• Submit は、この例のボタンのアクセシブル名です。このロケーターを置き換えるか、アプリケーションの実際の送信経路を使用してください。
• input イベントは、このデモの受け渡し処理の一部です。実際のアプリケーションでは、コールバック、アプリケーション状態の更新、CSRF 値、既存のセッションも必要になる場合があります。トークン設定用の汎用的なコールバックはありません。

再度解決料金を支払う前に、Playwright のリクエストとレスポンスの監視を使って、アプリケーションから送信されるリクエストを確認してください。タスクの準備完了は、解決結果が利用可能であることを意味します。送信が受け付けられたかどうかは、アプリケーションのレスポンスで判断します。

送信されたトークンが存在しない、または更新されていない。

textarea の値だけでなく、実際のリクエストパラメーターを確認してください。

試してみましょう： アプリケーションの実際の送信経路を通じて solution.token を渡してください。アプリケーションが別の状態からリクエストを組み立てている場合、デモのフィールドを更新しても効果はありません。

リクエストにトークンが含まれているが、拒否される。

送信時のプロキシ、ユーザーエージェント、クライアントヒント、対象ホスト名、アクションを、解決時のものと比較してください。アプリケーションのセッションと CSRF の要件も確認してください。

試してみましょう： 解決時と送信時には同じプロキシを使用し、返されたブラウザー識別情報を適用して、アプリケーションのフォーム要件を満たしてから送信してください。

ブラウザーを開く前にスクリプトが失敗する。

HTTP リクエストエラーと、最終的に失敗したタスクを区別してください。タスクが失敗した場合は、errorCode と error を確認します。

試してみましょう： 同じ入力を繰り返し送信するのではなく、報告された入力、プロファイル、接続の問題を修正してください。SDK は失敗時に例外をスローするため、トークン設定のステップに進まないでください。