Chrome DevTools Protocol + CaptchaAI: CAPTCHA-Diagnose in eigenen Testumgebungen

Anwendungsbereich: Dieser Leitfaden ist auf eigene oder ausdrücklich autorisierte QA- und Staging-Umgebungen beschränkt. Er zeigt Diagnose- und Verifikationsschritte für Ihre eigene CAPTCHA-Integration, nicht für fremde Websites oder unautorisierte Workflows.

Das Chrome DevTools Protocol eignet sich hervorragend, um Browser- und Netzwerkzustand in Testumgebungen transparent zu beobachten. Zusammen mit CaptchaAI erhalten Sie damit keine "niedrigere Ebene für Automatisierung", sondern eine präzise Diagnoseoberfläche: Sie sehen, wann Widgets geladen werden, welche Sitekeys verwendet werden und wie Ihre Verifikations-Requests im Backend ankommen.

Sicherer Anwendungsbereich

CDP ist in QA besonders nützlich, wenn Sie Antworten auf konkrete Fragen brauchen:

• Lädt das CAPTCHA-Widget auf Ihrer Staging-Seite zum richtigen Zeitpunkt?
• Verwendet Ihre Seite den erwarteten Sitekey pro Umgebung?
• Trifft die Verifikationsanfrage im Backend mit den erwarteten Parametern ein?
• Stimmen Antwortcodes, Fehlertexte und Telemetrie mit Ihrer Testdokumentation überein?

Für diese Aufgaben benötigen Sie keine Umgehungs- oder Verdeckungslogik. Entscheidend ist, dass Requests, Konsolenmeldungen und Serverantworten in Ihrer eigenen Umgebung nachvollziehbar bleiben.

CDP für Netzwerk- und Request-Diagnose

CDP kann in einem Testlauf mehrere Signale gleichzeitig sichtbar machen:

Ein schlankes CDP-Setup für Testdiagnosen kann so aussehen:

import http from "node:http";
import WebSocket from "ws";

async function connectToCdp(port = 9222) {
  const targets = await new Promise((resolve, reject) => {
    http.get(`http://127.0.0.1:${port}/json/list`, (res) => {
      let body = "";
      res.on("data", (chunk) => (body += chunk));
      res.on("end", () => resolve(JSON.parse(body)));
    }).on("error", reject);
  });

  const pageTarget = targets.find((target) => target.type === "page");
  const ws = new WebSocket(pageTarget.webSocketDebuggerUrl);

  await new Promise((resolve, reject) => {
    ws.once("open", resolve);
    ws.once("error", reject);
  });

  let id = 0;
  const send = (method, params = {}) => {
    const requestId = ++id;
    ws.send(JSON.stringify({ id: requestId, method, params }));
    return requestId;
  };

  send("Page.enable");
  send("Runtime.enable");
  send("Network.enable");

  return { ws, send };
}

Sitekey auf eigener Testseite erkennen

In QA sollten Sie den Sitekey nicht raten, sondern gegen die tatsächlich geladene Staging-Seite prüfen. So erkennen Sie Konfigurationsdrift früh.

async function readSitekey(pageUrl) {
  const targetResponse = await fetch(
    "http://127.0.0.1:9222/json/new?" + encodeURIComponent(pageUrl)
  );
  const target = await targetResponse.json();
  const ws = new WebSocket(target.webSocketDebuggerUrl);

  await new Promise((resolve, reject) => {
    ws.once("open", resolve);
    ws.once("error", reject);
  });

  ws.send(JSON.stringify({ id: 1, method: "Runtime.evaluate", params: {
    expression: `(() => {
      const widget = document.querySelector('[data-sitekey]');
      if (!widget) return null;
      return {
        sitekey: widget.getAttribute('data-sitekey'),
        widgetType: widget.className,
        pageUrl: location.href,
      };
    })()`,
    returnByValue: true,
  }}));

  return await new Promise((resolve) => {
    ws.on("message", (payload) => {
      const message = JSON.parse(payload);
      if (message.id === 1) {
        resolve(message.result.result.value);
        ws.close();
      }
    });
  });
}

Wichtiger als die Browsersteuerung ist hier der Abgleich mit Ihrer Staging-Konfiguration:

• Stimmt der Sitekey mit der erwarteten Umgebung überein?
• Wird das Widget nur auf den vorgesehenen Formularen geladen?
• Ist der Callback- oder Action-Name in Ihren Testdaten dokumentiert?

CaptchaAI-Aufgabe aus QA heraus senden

Sobald Sie Page URL und Sitekey aus Ihrer eigenen Testumgebung bestätigt haben, können Sie eine CaptchaAI-Aufgabe aus demselben QA-Lauf starten und das Ergebnis in Ihre Diagnosekette aufnehmen.

async function submitCaptchaTask({ apiKey, pageUrl, sitekey }) {
  const body = new URLSearchParams({
    key: apiKey,
    method: "userrecaptcha",
    googlekey: sitekey,
    pageurl: pageUrl,
    json: "1",
  });

  const submit = await fetch("https://ocr.captchaai.com/in.php", {
    method: "POST",
    body,
  });
  const submitJson = await submit.json();

  if (submitJson.status !== 1) {
    throw new Error(`CaptchaAI submit failed: ${submitJson.request}`);
  }

  for (let attempt = 0; attempt < 30; attempt += 1) {
    await new Promise((resolve) => setTimeout(resolve, 5000));
    const poll = await fetch(
      `https://ocr.captchaai.com/res.php?key=${apiKey}&action=get&id=${submitJson.request}&json=1`
    );
    const pollJson = await poll.json();
    if (pollJson.status === 1) {
      return pollJson.request;
    }
  }

  throw new Error("CaptchaAI result timeout in QA run");
}

Dieser Schritt dient in QA dazu, die gesamte Integrationskette nachzuvollziehen: Widget erkannt, Aufgabe erzeugt, Ergebnis erhalten. Die eigentliche Validierung sollte anschließend gegen einen eigenen Test-Endpoint oder eine eigene Prüfroute laufen.

Backend-Validierung prüfen

Der wichtigste Diagnoseschritt ist meist nicht der Browser, sondern Ihr eigener Verifikationspfad. Lassen Sie Ihre QA-Suite deshalb die Backend-Antwort mitsamt Request-ID protokollieren.

async function verifyInQaBackend({ token, testRunId }) {
  const response = await fetch("https://staging.example-app.test/qa/captcha/verify", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({
      token,
      testRunId,
      expectedAction: "signup",
      environment: "staging",
    }),
  });

  if (!response.ok) {
    throw new Error(`QA verify endpoint returned ${response.status}`);
  }

  return response.json();
}

Eine gute QA-Antwort enthält mehr als nur success: true:

• Request-ID oder Trace-ID
• erkannte Action oder Widget-ID
• Antwortzeit des Verifikationspfads
• Fehlercode bei Negativtests
• Umgebung (staging, qa, preprod)

Damit können Sie Diagnosefälle reproduzierbar nachstellen, ohne in produktive Integrationen eingreifen zu müssen.

Fehlerbehebung

Verwandte sichere Leitfäden

• CaptchaAI Schnellstart
• CAPTCHA-QA in autorisierten Testumgebungen
• CAPTCHA-Endpoints in eigenen Webformularen testen
• Kontinuierliche Integration mit CAPTCHA-Tests

Analysieren Sie Ihre CAPTCHA-Integration mit nachvollziehbaren QA-Daten – CaptchaAI unterstützt reproduzierbare Testläufe in eigenen Umgebungen.