Usa un servicio de resolución de CAPTCHA con Playwright

1. 1.

   Instala Node.js 22+, Playwright y Chromium

   Instala el paquete playwright y su binario de Chromium. Instala el SDK oficial de JavaScript de solvethree mediante el paquete descargable solvethree-sdk-0.1.0.tgz; las instrucciones de integración con Node.js incluyen el comando de instalación mediante descarga directa.

2. 2.

   Configura el nombre de host en solvethree

   El nombre de host de tu página HTTPS propia debe tener un perfil de reCAPTCHA activo disponible para tu espacio de trabajo. Configúralo en la consola antes de ejecutar el ejemplo. Enviar un nombre de host y una acción en una tarea no crea el perfil.

3. 3.

   Configura las tres variables de entorno

   Establece TARGET_URL con la URL HTTPS completa de tu página propia, SOLVETHREE_PROXY con la URL del proxy y SOLVETHREE_API_KEY con la clave de API de tu espacio de trabajo. Ejecuta el script en el servidor; no incluyas la clave de API en el JavaScript de la página. El ejemplo usa la acción login, que debes cambiar si tu aplicación usa otra acción.

4. 4.

   Prepara el formulario del ejemplo

   La página debe contener un área de texto llamada g-recaptcha-response y un botón cuyo nombre accesible sea exactamente Submit. Si tu formulario es diferente, adapta la transferencia descrita a continuación antes de ejecutarlo.

El proxy de la tarea y el proxy del navegador de Playwright se configuran por separado. Un proxy del contexto del navegador no enruta automáticamente las solicitudes de API del SDK realizadas desde el servidor. Este ejemplo proporciona un proxy a la tarea y lo reutiliza para el tráfico del navegador hacia el destino.

// 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 crea la tarea una sola vez y consulta su estado hasta que esté lista o se lance una excepción. El navegador solo se inicia cuando esa llamada se completa correctamente. Su contexto usa el proxy original, incluidas las credenciales codificadas para URL, y los valores devueltos de solution.userAgent y solution.secChUa.

El formulario recibe solution.token, no el ID de la tarea. El ejemplo espera a que el campo se incorpore al DOM, ya que el área de texto del token no tiene por qué ser visible. Asigna el token, dispara un evento de entrada y luego hace clic en Submit.

• TARGET_URL pertenece a tu aplicación. La tarea de resolución recibe su nombre de host como site; Playwright navega a la URL completa.
• login es la acción del ejemplo. Sustitúyela por la acción que usa tu aplicación.
• [name="g-recaptcha-response"] es el selector del campo de token del ejemplo. Sustitúyelo si tu aplicación espera el token en otro campo o parámetro de la solicitud.
• Submit es el nombre accesible del botón del ejemplo. Sustituye ese localizador o usa el flujo de envío real de tu aplicación.
• El evento de entrada forma parte de la transferencia de esta demostración. Una aplicación real también puede requerir un callback, una actualización del estado de la aplicación, un valor CSRF o una sesión existente. No existe un callback universal para rellenar el token.

Antes de pagar por otra resolución, inspecciona la solicitud saliente de la aplicación mediante la observación de solicitudes y respuestas de Playwright. Una tarea lista significa que hay una solución disponible; la respuesta de la aplicación indica si se aceptó el envío.

El token enviado falta o no ha cambiado.

Inspecciona el parámetro real de la solicitud, no solo el valor del área de texto.

Prueba esto: Pasa solution.token a través del flujo de envío real de la aplicación. Actualizar el campo de la demostración no servirá si la aplicación construye su solicitud a partir de un estado independiente.

La solicitud contiene el token, pero se rechaza.

Compara el proxy, el agente de usuario, las pistas del cliente, el nombre de host de destino y la acción del envío con los usados en la resolución. Comprueba los requisitos de sesión y CSRF de la aplicación.

Prueba esto: Usa el mismo proxy para la resolución y el envío, aplica la identidad de navegador devuelta y cumple los requisitos del formulario de la aplicación antes de enviarlo.

El script falla antes de abrir el navegador.

Distingue entre un error de solicitud HTTP y una tarea en estado final de error. Si la tarea ha fallado, inspecciona errorCode y error.

Prueba esto: Corrige el problema indicado en los datos de entrada, el perfil o la conectividad, en lugar de enviar repetidamente los mismos datos. El SDK lanza una excepción en caso de error; no continúes con el paso de rellenado del token.