Automatización del navegador de Playwright: Guía para resolver CAPTCHA
Aloísio Vítor
Image Processing Expert
TL;DR: Este guía muestra cómo evitar CAPTCHAs en la automatización de navegadores con Playwright utilizando resolución impulsada por inteligencia artificial. Aprende a manejar automáticamente los desafíos reCAPTCHA y Cloudflare Turnstile con ejemplos de código funcionales. Ver la integración de CapSolver con Playwright
Al construir automatización de navegadores con Playwright, enfrentar desafíos CAPTCHA es un obstáculo común que puede detener tus flujos de trabajo. Ya sea que estés extrayendo datos, ejecutando pruebas automatizadas o recopilando inteligencia de mercado, estos desafíos interrumpen el proceso de automatización y requieren intervención manual, lo que va en contra del propósito de la programación en primer lugar.
Este guía cubre cómo integrar el bypass de CAPTCHA impulsado por inteligencia artificial en tu automatización de Playwright, permitiendo manejar de forma fluida los desafíos reCAPTCHA y Cloudflare Turnstile sin interrumpir tu flujo de trabajo.
¿Por qué aparecen los CAPTCHAs en la automatización de Playwright?
Los CAPTCHAs aparecen cuando los sitios web detectan comportamientos que difieren de los patrones típicos de navegación humana. Los desencadenantes comunes incluyen:
- Detección de navegador en modo headless: Los navegadores automatizados pueden exponer propiedades del controlador de navegador o carecer de ciertas características del navegador
- Patrones de navegación rápidos: Clics, desplazamientos o transiciones de página rápidas que no coincidan con el tiempo humano
- Alta frecuencia de solicitudes: Enviar muchas solicitudes en un corto período de tiempo
- Huellas dactilares de navegador limpias: Navegadores nuevos sin cookies o historial acumulado pueden ser marcados
- Patrones de acceso repetidos: Secuencias idénticas de visitas a páginas que parecen robóticas
Para los desarrolladores que utilizan Playwright para tareas de automatización legítimas, comprender por qué aparecen los CAPTCHAs ayuda tanto a prevenirlas como a manejarlas de manera elegante cuando ocurren.
¿Cómo funciona el bypass de CAPTCHA impulsado por inteligencia artificial?
Los servicios de resolución de CAPTCHA impulsados por inteligencia artificial como CapSolver utilizan aprendizaje automático y visión por computadora para reconocer y resolver desafíos automáticamente. El flujo de trabajo se integra sin problemas en la automatización de Playwright:
- Detección: Tu script identifica un desafío CAPTCHA en la página
- Envío: Los datos del desafío (clave del sitio, URL de la página) se envían a la API de CapSolver
- Procesamiento: Los modelos de inteligencia artificial resuelven el desafío (normalmente en 3-10 segundos)
- Respuesta: Se devuelve un token de solución
- Ejecución: Tu script envía el token para completar la verificación
Este enfoque automatizado elimina la intervención manual y mantiene tu automatización funcionando continuamente.
Los datos de la industria muestran que las soluciones impulsadas por inteligencia artificial logran tasas de precisión del 95-99% para tipos comunes de desafíos, lo que las hace confiables para flujos de trabajo de automatización en producción.
Configuración de CapSolver con Playwright
Primero, instala las dependencias requeridas:
bash
npm install playwright capsolverInicializa el cliente de CapSolver con tu clave de API:
javascript
const CapSolver = require('capsolver');
const capSolver = new CapSolver({ apiKey: 'TU_CLAVE_DE_API' });Bypass de reCAPTCHA v2 con Playwright
reCAPTCHA v2 normalmente presenta desafíos de casilla de verificación o pruebas de selección de imágenes. Aquí tienes una integración completa:
javascript
const { chromium } = require('playwright');
async function solveRecaptchaV2Example() {
// Inicializar CapSolver
const CapSolver = require('capsolver');
const solver = new CapSolver({ apiKey: 'TU_CLAVE_DE_API' });
// Iniciar navegador
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
try {
// Navegar a la página objetivo
await page.goto('https://ejemplo.com/iniciar-sesión');
// Detectar reCAPTCHA v2
const siteKey = await page.evaluate(() => {
const elemento = document.querySelector('[data-sitekey]');
return elemento ? elemento.getAttribute('data-sitekey') : null;
});
if (siteKey) {
console.log('reCAPTCHA v2 detectado, resolviendo...');
// Resolver con CapSolver
const solución = await solver.recaptcha({
websiteURL: page.url(),
websiteKey: siteKey,
isEnterprise: false
});
// Establecer token de solución
await page.evaluate((token) => {
const textarea = document.getElementById('g-recaptcha-response');
if (textarea) textarea.value = token;
}, solución.gRecaptchaResponse);
// Activar callback si existe
const callback = await page.evaluate(() => {
const el = document.querySelector('[data-callback]');
return el ? el.getAttribute('data-callback') : null;
});
if (callback) {
await page.evaluate((cb) => {
eval(cb + '()');
}, callback);
}
console.log('reCAPTCHA v2 superado con éxito');
}
// Continuar con tu automatización
await page.fill('#nombre-de-usuario', 'usuario@ejemplo.com');
await page.fill('#contraseña', 'contraseña123');
await page.click('#botón-iniciar-sesión');
} catch (error) {
console.error('Error:', error.message);
} finally {
await browser.close();
}
}
solveRecaptchaV2Example();Bypass de reCAPTCHA v3 con Playwright
reCAPTCHA v3 funciona en segundo plano y devuelve una puntuación en lugar de desafíos visuales. Aquí te explico cómo manejarlo:
javascript
const { chromium } = require('playwright');
async function solveRecaptchaV3Example() {
// Inicializar CapSolver
const CapSolver = require('capsolver');
const solver = new CapSolver({ apiKey: 'TU_CLAVE_DE_API' });
// Iniciar navegador
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
try {
await page.goto('https://ejemplo.com/tablero');
// Extraer clave de reCAPTCHA v3
const siteKey = await page.evaluate(() => {
const scripts = document.querySelectorAll('script[src*="recaptcha"]');
for (const script of scripts) {
const src = script.src;
const keyMatch = src.match(/k=([^&]+)/);
if (keyMatch) return keyMatch[1];
}
return null;
});
if (siteKey) {
console.log('reCAPTCHA v3 detectado');
// Resolver con requisito de puntuación
const solución = await solver.recaptcha({
websiteURL: page.url(),
websiteKey: siteKey,
isEnterprise: false,
pageAction: 'inicio'
});
console.log('Token recibido, puntuación:', solución.score);
// Almacenar token para solicitudes API
await page.evaluate((token) => {
window.__captchaToken = token;
}, solución.gRecaptchaResponse);
// Usar token en solicitudes posteriores
const response = await page.evaluate(async (token) => {
const res = await fetch('/api/perfil-de-usuario', {
headers: { 'X-Recaptcha-Token': token }
});
return await res.json();
}, solución.gRecaptchaResponse);
console.log('Datos recuperados:', response);
}
} catch (error) {
console.error('Error:', error.message);
} finally {
await browser.close();
}
}
solveRecaptchaV3Example();Bypass de Cloudflare Turnstile con Playwright
Cloudflare Turnstile aparece como un desafío invisible o un widget de verificación. Aquí tienes un enfoque completo:
javascript
const { chromium } = require('playwright');
async function solveCloudflareTurnstileExample() {
// Inicializar CapSolver
const CapSolver = require('capsolver');
const solver = new CapSolver({ apiKey: 'TU_CLAVE_DE_API' });
// Iniciar navegador con configuraciones de stealth
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext({
viewport: { width: 1920, height: 1080 },
userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
});
const page = await context.newPage();
try {
await page.goto('https://ejemplo-protegido.com/', {
waitUntil: 'domcontentloaded',
timeout: 30000
});
// Verificar si hay un desafío de Cloudflare
const isCFChallenge = await page.evaluate(() => {
return document.title.includes('Un momento') ||
document.querySelector('#cf-challenge') !== null;
});
if (isCFChallenge) {
console.log('Desafío de Cloudflare detectado');
// Esperar a que se renderice el desafío
await page.waitForTimeout(2000);
// Detectar el widget de Turnstile
const siteKey = await page.evaluate(() => {
const turnstile = document.querySelector('.cf-turnstile');
return turnstile ? turnstile.getAttribute('data-sitekey') : null;
});
if (siteKey) {
console.log('Turnstile detectado, resolviendo...');
// Resolver Turnstile
const solución = await solver.turnstile({
websiteURL: page.url(),
websiteKey: siteKey
});
console.log('Token recibido');
// Inyectar token en la página
await page.evaluate((token) => {
// Crear o actualizar el campo de token
let tokenField = document.querySelector('[name="cf-turnstile-response"]');
if (!tokenField) {
tokenField = document.createElement('input');
tokenField.type = 'hidden';
tokenField.name = 'cf-turnstile-response';
document.body.appendChild(tokenField);
}
tokenField.value = token;
// Activar cualquier callback
const turnstile = document.querySelector('.cf-turnstile');
if (turnstile && turnstile.dataset.callback) {
window[turnstile.dataset.callback](token);
}
}, solución.token);
// Esperar a que el desafío se resuelva
await page.waitForTimeout(3000);
console.log('Turnstile de Cloudflare superado');
}
}
// Verificar que la página se cargó
const título = await page.title();
console.log('Título de la página:', título);
} catch (error) {
console.error('Error:', error.message);
} finally {
await browser.close();
}
}
solveCloudflareTurnstileExample();Ejemplo de Flujo de Automatización Completo
Aquí tienes un ejemplo completo que combina detección, resolución y lógica de reintentos para uso en producción:
javascript
const { chromium } = require('playwright');
const CapSolver = require('capsolver');
class PlaywrightAutomation {
constructor(apiKey) {
this.solver = new CapSolver({ apiKey });
}
async detectAndSolve(page) {
// Verificar reCAPTCHA v2
const reCaptchaV2Key = await page.evaluate(() => {
const el = document.querySelector('[data-sitekey]');
return el?.getAttribute('data-sitekey');
});
// Verificar Cloudflare Turnstile
const turnstileKey = await page.evaluate(() => {
const el = document.querySelector('.cf-turnstile');
return el?.getAttribute('data-sitekey');
});
if (reCaptchaV2Key) {
console.log('Resolviendo reCAPTCHA v2...');
return await this.solveRecaptchaV2(page, reCaptchaV2Key);
}
if (turnstileKey) {
console.log('Resolviendo Cloudflare Turnstile...');
return await this.solveTurnstile(page, turnstileKey);
}
return null;
}
async solveRecaptchaV2(page, siteKey) {
const solución = await this.solver.recaptcha({
websiteURL: page.url(),
websiteKey: siteKey
});
await page.evaluate((token) => {
const textarea = document.getElementById('g-recaptcha-response');
if (textarea) textarea.value = token;
}, solución.gRecaptchaResponse);
return solución;
}
async solveTurnstile(page, siteKey) {
const solución = await this.solver.turnstile({
websiteURL: page.url(),
websiteKey: siteKey
});
await page.evaluate((token) => {
let tokenField = document.querySelector('[name="cf-turnstile-response"]');
if (!tokenField) {
tokenField = document.createElement('input');
tokenField.type = 'hidden';
tokenField.name = 'cf-turnstile-response';
document.body.appendChild(tokenField);
}
tokenField.value = token;
}, solución.token);
return solución;
}
async run(url, pasos) {
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
try {
await page.goto(url);
// Verificar y resolver CAPTCHA si es necesario
await this.detectAndSolve(page);
// Ejecutar tus pasos de automatización
for (const paso of pasos) {
await paso(page);
}
} finally {
await browser.close();
}
}
}
// Ejemplo de uso
const automatización = new PlaywrightAutomation('TU_CLAVE_DE_API');
automatización.run('https://ejemplo.com/formulario', [
(page) => page.fill('#nombre', 'John Doe'),
(page) => page.fill('#correo', 'john@ejemplo.com'),
(page) => page.click('#enviar')
]).then(() => console.log('Automatización completada'))
.catch(err => console.error('Error:', err));El mercado de scraping web está experimentando un crecimiento significativo ya que las organizaciones priorizan la toma de decisiones basada en datos, lo que hace que las soluciones automatizadas sean cada vez más importantes para los flujos de trabajo de desarrollo modernos.
Para más ejemplos detallados, consulta la documentación completa de la integración de Playwright y aprende cómo integrar CapSolver con Playwright.
Preguntas frecuentes
¿Puede Playwright evitar automáticamente los CAPTCHAs?
Sí, al integrarse con servicios de resolución de CAPTCHA impulsados por inteligencia artificial como CapSolver, Playwright puede detectar y resolver desafíos automáticamente. El token de solución se envía de forma programática, permitiendo que la automatización continúe sin intervención manual.
¿Cuánto tiempo toma el bypass de CAPTCHA con inteligencia artificial en Playwright?
AI-powered solving typically completes in 3-10 seconds for most challenge types. This is significantly faster than human-powered alternatives, which can take 10-45 seconds including queue time.
¿CapSolver admite reCAPTCHA v3?
Sí, CapSolver admite reCAPTCHA v3 con requisitos de puntuación mínima configurables. Puede establecer el umbral de puntuación (0,1-0,9) según sus necesidades para diferentes niveles de estrictitud de desafío.
¿Cómo evito los CAPTCHAs en Playwright?
Aunque no se pueden eliminar por completo los CAPTCHAs, se puede reducir su frecuencia usando configuraciones de navegador en modo stealth, aleatorizando el tiempo entre acciones, rotando agentes de usuario y usando proxies residenciales. Sin embargo, algunos sitios web siempre presentarán desafíos independientemente de las precauciones.
¿Qué ocurre si falla la resolución de CAPTCHA?
Implemente lógica de reintento con backoff exponencial para los intentos fallidos. CapSolver resuelve la mayoría de los desafíos con éxito, pero algunas variaciones complejas pueden requerir varios intentos. El manejo adecuado de errores garantiza que su automatización sea resiliente.
¿Puedo usar CapSolver con otras herramientas de automatización?
Sí, CapSolver ofrece SDKs y soporte de API para Playwright, Puppeteer, Selenium y extensiones directas para navegadores. El enfoque de integración es similar en todas las herramientas con pequeñas diferencias en la sintaxis.
¿Es seguro usar servicios de resolución de CAPTCHA?
Sí, cuando se usa responsablemente para fines de automatización legítimos. CapSolver se compromete con prácticas éticas de tecnología y proporciona servicios que ayudan a los desarrolladores a automatizar sus flujos de trabajo autorizados de manera más eficiente. Siempre asegúrese de que sus actividades de automatización cumplan con los términos de servicio del sitio objetivo y las leyes aplicables. Revise las directrices de cumplimiento de CapSolver para mejores prácticas.