Einen CAPTCHA-Solver mit Playwright verwenden

1. 1.

   Node.js 22+, Playwright und Chromium installieren

   Installieren Sie das Paket playwright und die zugehörige Chromium-Browserdatei. Installieren Sie das offizielle solvethree JavaScript SDK über das herunterladbare Paket solvethree-sdk-0.1.0.tgz; die Anleitung zur Node.js-Integration enthält den Installationsbefehl für den direkten Download.

2. 2.

   Hostname in solvethree konfigurieren

   Für den Hostnamen Ihrer eigenen HTTPS-Seite muss ein aktives reCAPTCHA-Profil in Ihrem Workspace verfügbar sein. Richten Sie es in der Konsole ein, bevor Sie das Beispiel ausführen. Das Senden eines Hostnamens und einer Aktion in einer Aufgabe erstellt kein Profil.

3. 3.

   Die drei Umgebungsvariablen festlegen

   Setzen Sie TARGET_URL auf die vollständige URL Ihrer eigenen HTTPS-Seite, SOLVETHREE_PROXY auf die Proxy-URL und SOLVETHREE_API_KEY auf den API-Schlüssel Ihres Workspace. Führen Sie das Skript serverseitig aus; hinterlegen Sie den API-Schlüssel nicht im JavaScript der Seite. Das Beispiel verwendet die Aktion login, die Sie ändern müssen, wenn Ihre Anwendung eine andere Aktion verwendet.

4. 4.

   Beispielformular bereitstellen

   Die Seite muss eine Textarea mit dem Namen g-recaptcha-response und eine Schaltfläche enthalten, deren barrierefreier Name genau Submit lautet. Falls Ihr Formular davon abweicht, passen Sie die unten beschriebene Übergabe vor der Ausführung an.

Der Proxy der Aufgabe und der Browser-Proxy von Playwright werden separat konfiguriert. Ein Proxy im Browserkontext leitet die serverseitigen API-Anfragen des SDK nicht automatisch weiter. Dieses Beispiel übergibt einen Proxy an die Aufgabe und verwendet ihn auch für den Datenverkehr des Browsers zum Ziel.

// 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 erstellt die Aufgabe einmal und fragt ihren Status ab, bis sie bereit ist oder eine Ausnahme ausgelöst wird. Der Browser startet erst, nachdem dieser Aufruf erfolgreich war. Sein Kontext verwendet den ursprünglichen Proxy einschließlich aller URL-kodierten Zugangsdaten sowie die zurückgegebenen Werte solution.userAgent und solution.secChUa.

Das Formular erhält solution.token, nicht die Aufgaben-ID. Das Beispiel wartet darauf, dass das Feld in das DOM eingefügt wird, da eine Token-Textarea nicht sichtbar sein muss. Es weist das Token zu, löst ein Eingabeereignis aus und klickt anschließend auf die Schaltfläche zum Absenden.

• TARGET_URL gehört zu Ihrer Anwendung. Die Solver-Aufgabe erhält deren Hostnamen als site; Playwright navigiert zur vollständigen URL.
• login ist die Aktion des Beispiels. Ersetzen Sie sie durch die Aktion Ihrer Anwendung.
• [name="g-recaptcha-response"] ist der Selektor für das Token-Feld des Beispiels. Ersetzen Sie ihn, wenn Ihre Anwendung das Token in einem anderen Feld oder Anfrageparameter erwartet.
• Submit ist der barrierefreie Name der Beispielschaltfläche. Ersetzen Sie diesen Locator oder verwenden Sie den tatsächlichen Übermittlungsweg Ihrer Anwendung.
• Das Eingabeereignis ist Teil der Übergabe in dieser Demo. Eine reale Anwendung benötigt möglicherweise zusätzlich einen Callback, eine Aktualisierung des Anwendungszustands, einen CSRF-Wert oder eine bestehende Sitzung. Es gibt keinen universellen Callback zum Eintragen von Tokens.

Bevor Sie für einen weiteren Lösungsvorgang bezahlen, prüfen Sie die ausgehende Anwendungsanfrage mit der Beobachtung von Anfragen und Antworten in Playwright. Eine bereite Aufgabe bedeutet, dass eine Lösung verfügbar ist; die Antwort der Anwendung zeigt Ihnen, ob die Übermittlung akzeptiert wurde.

Das übermittelte Token fehlt oder ist unverändert.

Prüfen Sie den tatsächlichen Anfrageparameter, nicht nur den Wert der Textarea.

Probiere Folgendes: Übergeben Sie solution.token über den tatsächlichen Übermittlungsweg der Anwendung. Das Aktualisieren des Demofelds hilft nicht, wenn die Anwendung ihre Anfrage aus einem separaten Zustand erstellt.

Die Anfrage enthält das Token, wird aber abgelehnt.

Vergleichen Sie Proxy, User-Agent, Client Hints, Zielhostname und Aktion der Übermittlung mit denen des Lösungsvorgangs. Prüfen Sie die Sitzungs- und CSRF-Anforderungen der Anwendung.

Probiere Folgendes: Verwenden Sie für Lösung und Übermittlung denselben Proxy, übernehmen Sie die zurückgegebene Browseridentität und erfüllen Sie vor dem Absenden die Formularanforderungen der Anwendung.

Das Skript schlägt fehl, bevor der Browser geöffnet wird.

Unterscheiden Sie zwischen einem HTTP-Anfragefehler und einer endgültig fehlgeschlagenen Aufgabe. Prüfen Sie bei einer fehlgeschlagenen Aufgabe errorCode und error.

Probiere Folgendes: Beheben Sie das gemeldete Eingabe-, Profil- oder Verbindungsproblem, statt wiederholt unveränderte Eingaben zu übermitteln. Das SDK löst bei einem Fehler eine Ausnahme aus; fahren Sie dann nicht mit dem Eintragen des Tokens fort.