Jun04, 2025

Como Integrar o CapSolver com o Playwright | Guia Completo 2025

Adélia Cruz

Neural Network Developer

O que é Playwright?

Playwright é uma estrutura moderna de teste de automação de navegador desenvolvida pela Microsoft. Ele suporta automação para Chromium, Firefox e WebKit (que correspondem ao Chrome, Firefox e Safari). Ele oferece uma API poderosa para controle de navegador, seleção de elementos, interação de formulários, interceptação de rede e muito mais — tornando-o ideal para tarefas que exigem interação profunda com páginas da web.

Recursos principais do Playwright

Qualquer navegador, qualquer plataforma, uma API

Multi-navegador: O Playwright suporta todos os mecanismos de renderização modernos, incluindo Chromium, WebKit e Firefox.
Multiplataforma: Execute testes no Windows, Linux e macOS — localmente ou em CI — sem cabeça ou com cabeça.
Multi-linguagem: Use a API Playwright com TypeScript, JavaScript, Python, .NET ou Java.
Teste na Web móvel: Emule nativamente o Google Chrome para Android e o Mobile Safari. O mesmo mecanismo de renderização é executado em sua área de trabalho e na nuvem.

Casos de uso típicos

Raspagem de conteúdo dinâmico: Extraia dados renderizados via JavaScript.
Lidando com interações complexas: Útil para páginas que exigem login ou fluxos de trabalho de várias etapas para acessar dados.
Extraindo dados de aplicativos SPA: Rastree páginas construídas com estruturas como Vue ou React.
Teste automatizado: Valide a funcionalidade da página enquanto coleta dados.
Automação em modo sem cabeça: Execute todas as ações sem uma GUI, adequado para ambientes de servidor.

Uso básico do Playwright

Usando Playwright no Node.js:

bash Copy

npm i playwright  
npx playwright install  # Instale todos os navegadores (Chromium, Firefox, WebKit)

Exemplo: Obtenha todos os títulos de blog do CapSolver

No exemplo abaixo, usamos o Playwright para navegar até o blog CapSolver e pegar todos os títulos de postagem do blog <h5> da página

javascript Copy

const { chromium } = require('playwright');

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
    });

    const [page] = context.pages();
    await page.goto('https://www.capsolver.com/blog/All');

    const h5Titles = await page.evaluate(() => {
        const headings = Array.from(document.querySelectorAll('h5'));
        return headings.map(heading => heading.textContent.trim());
    });

    console.log(h5Titles);
    await context.close();
})();

Como integrar a extensão CapSolver com Playwright

O Playwright é poderoso o suficiente para carregar extensões de navegador como um navegador comum.

Baixe e extraia o arquivo ZIP da extensão CapSolver mais recente do GitHub oficial
Especifique o caminho da extensão nos argumentos de inicialização do Playwright usando --disable-extensions-except e --load-extension.

javascript Copy

const { chromium } = require('playwright');

const extensionPath = 'path/to/capsolver extension';

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: [
            `--disable-extensions-except=${extensionPath}`,
            `--load-extension=${extensionPath}`,
        ],
    });
    
    const [page] = context.pages();
    await page.goto('https://www.capsolver.com/blog/All');
    await browser.close();
})();

Resolvendo reCAPTCHA v2 usando a extensão CapSolver

Tipos de CAPTCHA como reCAPTCHA v2/v3, Cloudflare Turnstile, AWS WAF, são amplamente usados em milhares de sites. Apesar de sua popularidade, esses CAPTCHAs geralmente têm estruturas DOM consistentes e detectáveis. É aí que a Extensão CapSolver entra em ação — ela detecta e resolve automaticamente sem a necessidade de interação manual.

Vamos usar o reCAPTCHA v2 como exemplo para demonstrar como resolvê-lo usando a extensão CapSolver no Playwright.
Observação: A menos que seja indicado o contrário, os exemplos a seguir usam o modo de clique (/assets/config.js -> reCaptchaMode: 'click').

⚠️ Não se esqueça de descompactar o arquivo zip da extensão e configurar sua apiKey em /assets/config.js

javascript Copy

const { chromium } = require('playwright');

// Passo 1: Baixe a extensão do GitHub: https://github.com/capsolver/capsolver-browser-extension/releases
// Passo 2: Descompacte o arquivo de extensão e defina sua apiKey em /assets/config.js
const extensionPath = 'path/to/CapSolver Browser Extension-v1.16.0';

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: [
            `--disable-extensions-except=${extensionPath}`,
            `--load-extension=${extensionPath}`,
            '--lang=en-US'
        ],
    });

    const [page] = context.pages();
    await page.goto('https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php');
    await page.waitForSelector('form[action="/recaptcha-v2-checkbox.php"]');

    // A extensão detectará e resolverá o reCAPTCHA automaticamente.
    await page.waitForTimeout(15000); // Aguardar resolução
    await page.click('button[type="submit"]');
    await page.waitForTimeout(5000);
    await context.close();
})();

⚠️ A extensão CapSolver também suporta muitas opções de configuração úteis. Abaixo estão alguns exemplos comuns (Observação: Todas as configurações são definidas em /assets/config.js)

Opção de configuração: `solvedCallback`

Como você pode ter notado, no código anterior, esperamos 15 segundos após carregar a página antes de clicar no botão de envio. Esse atraso tinha a intenção de dar à extensão CapSolver tempo suficiente para resolver automaticamente o reCAPTCHA. No entanto, essa abordagem não é ideal — às vezes, o CAPTCHA é resolvido muito mais rápido e, em condições de rede precárias, pode levar ainda mais de 15 segundos.

É aí que o solvedCallback entra em ação. Ele fornece uma solução melhor, acionando um callback assim que o CAPTCHA for resolvido, notificando você de que a verificação está concluída. Você pode configurar o solvedCallback em /assets/config.js definindo um nome de função personalizado — por padrão, é captchaSolvedCallback. Em seguida, use page.exposeFunction no Playwright para expor essa função no contexto do navegador.

Vamos agora melhorar nosso código anterior usando essa abordagem.

javascript Copy

const { chromium } = require('playwright');

const extensionPath = 'path/to/CapSolver Browser Extension-v1.16.0';

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: [
            `--disable-extensions-except=${extensionPath}`,
            `--load-extension=${extensionPath}`,
            '--lang=en-US'
        ],
    });

    const [page] = context.pages();
    await page.goto('https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php');
    await page.waitForSelector('form[action="/recaptcha-v2-checkbox.php"]');

    await page.exposeFunction('captchaSolvedCallback', async () => {
        console.log('Captcha resolvido!');

        const iframe = await page.$('iframe[src*="recaptcha"]');
        if (iframe) {
            const frame = await iframe.contentFrame();
            const finished = await frame.evaluate(() => {
                const element = document.querySelector('.recaptcha-checkbox-border');
                return element && window.getComputedStyle(element).display === 'none';
            });

            if (finished) {
                console.log('Verificação concluída!');
                await page.click('button[type="submit"]');
                await page.waitForTimeout(3000);
                await context.close();
            } else {
                console.log('Verificação não concluída. Tentando novamente...');
            }
        }
    });
})();

Para o reCAPTCHA v2, às vezes, vários desafios de imagem podem aparecer. Portanto, após cada desafio, verificamos se a caixa de seleção "Não sou um robô" foi marcada — se ela desaparecer, a verificação é considerada concluída.

Opção de configuração: `manualSolving`

Em exemplos anteriores, a resolução do CAPTCHA começava imediatamente após o carregamento da página. No entanto, em alguns cenários, você pode precisar executar outras tarefas primeiro — como inserir um nome de usuário/senha — antes de acionar a resolução do CAPTCHA. Começar muito cedo pode fazer com que o token expire.

Para lidar com isso, defina manualSolving: true em /assets/config.js, o que permite acionar manualmente o processo de resolução do CAPTCHA.

Existem duas maneiras de acionar a resolução:

Simule um clique no botão CapSolver na extensão.
Execute: window.postMessage({ type: 'capsolverSolve' });

⚠️ Observação: Este recurso só é compatível com versões da extensão superiores à v1.16.0!

Exemplo:

javascript Copy

const { chromium } = require('playwright');

const extensionPath = 'path/to/CapSolver Browser Extension-v1.16.0';

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: [
            `--disable-extensions-except=${extensionPath}`,
            `--load-extension=${extensionPath}`,
            '--lang=en-US'
        ],
    });

    const [page] = context.pages();
    await page.goto('https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php');
    await page.waitForSelector('form[action="/recaptcha-v2-checkbox.php"]');

    // Simule o preenchimento das credenciais
    await page.evaluate(() => {
        const inputA = document.querySelector('input[name="ex-a"]');
        inputA.value = 'username';
        const inputB = document.querySelector('input[name="ex-b"]');
        inputB.value = 'password';
    });

    // Simule outros atrasos ou atividade do usuário
    for (let i = 1; i <= 5; i++) {
        await page.waitForTimeout(1000);
        console.log(`Esperou ${i} segundos...`);
    }

    console.log('Iniciar resolução do CAPTCHA...');

    // Método 1: Simule clicando no botão CapSolver
    await page.evaluate(() => {
        document.querySelector('#capsolver-solver-tip-button').click();
    });

    // Método 2: Acionar usando postMessage
    // await page.evaluate(() => {
    //     window.postMessage({ type: 'capsolverSolve' });
    // });

    await page.exposeFunction('captchaSolvedCallback', async () => {
        console.log('Captcha resolvido!');

        const iframe = await page.$('iframe[src*="recaptcha"]');
        if (iframe) {
            const frame = await iframe.contentFrame();
            const finished = await frame.evaluate(() => {
                const element = document.querySelector('.recaptcha-checkbox-border');
                return element && window.getComputedStyle(element).display === 'none';
            });

            if (finished) {
                console.log('Verificação concluída!');
                await page.click('button[type="submit"]');
                await page.waitForTimeout(3000);
                await context.close();
            } else {
                console.log('Verificação não concluída. Tente novamente.');
            }
        }
    });
})();

Opção de configuração: `reCaptchaMode`

A configuração reCaptchaMode suporta dois modos: click e token.

modo clique simula a interação humana — clicando nos desafios de imagem.
modo token usa diretamente a API CapSolver para obter um token de solução sem interação da IU.

Se você estiver enfrentando várias rodadas de seleção de imagem usando o modo click, é provável que seja devido a uma pontuação baixa de impressão digital do navegador. A mudança para o modo token é recomendada para maior confiabilidade.

Modo Clique	Modo Token

Opção de configuração: `showSolveButton`

Quando showSolveButton está definido como false (o padrão é true), o botão CapSolver não será mais exibido na página. No entanto, isso não afetará a funcionalidade normal de resolução do CAPTCHA.

Opção de configuração: useProxy

Após definir useProxy: true, você pode especificar os seguintes parâmetros: proxyType, hostOrIp, port, proxyLogin e proxyPassword. Com essa configuração, usaremos seu proxy personalizado para resolver o CAPTCHA. Quando você deve usar seu próprio proxy? Normalmente, nas seguintes situações:

Seu proxy fornece melhor qualidade (por exemplo, tokens reCAPTCHA gerados usando seu proxy recebem pontuações mais altas) ou velocidade de resolução mais rápida;
Em certos casos, o IP usado para resolver o CAPTCHA deve ser o mesmo que o IP usado para enviar o token.

As opções acima são algumas opções de configuração comumente usadas. Você pode ajustar outras configurações de acordo com suas necessidades reais. Se você tiver alguma dúvida, entre em contato com nosso suporte ao cliente.

Resolvendo CAPTCHAs ImageToText usando a extensão CapSolver

Ao contrário de CAPTCHAs de terceiros, como reCAPTCHA, Cloudflare Turnstile, AWS WAF ou GeeTest, existe outro tipo de CAPTCHA que exige o reconhecimento de letras ou dígitos de uma imagem. Referimo-nos a esses como CAPTCHAs ImageToText. Eles geralmente parecem assim:

ImageToText é um CAPTCHA implementado pelos próprios administradores do site. Ao contrário dos CAPTCHAs de terceiros, os CAPTCHAs ImageToText são feitos sob medida pelos proprietários do site. Como esses CAPTCHAs variam na colocação em diferentes sites e páginas, a extensão CapSolver não pode detectar automaticamente quais imagens são CAPTCHAs. Portanto, você deve informar explicitamente a extensão CapSolver em seu código. Veja como fazer isso:

Adicione um atributo capsolver-image-to-text-source com o valor 0 ao elemento de imagem do CAPTCHA;
Adicione um atributo capsolver-image-to-text-result com o valor 0 ao campo de entrada onde o resultado deve ser preenchido.

Esses atributos — capsolver-image-to-text-source e capsolver-image-to-text-result — podem ser configurados em /assets/config.js usando os campos textCaptchaSourceAttribute e textCaptchaResultAttribute, respectivamente.

Vamos percorrer um exemplo usando o site:
https://captcha.com/demos/features/captcha-demo.aspx

Primeiro, inspecione a fonte da página para localizar o elemento de imagem do CAPTCHA e o campo de entrada do resultado. Nesse caso:

ID do elemento de imagem CAPTCHA: demoCaptcha_CaptchaImage
ID do campo de entrada para o resultado: captchaCode
(Captura de tela abaixo)

Agora, vamos usar o Playwright para automatizar a resolução desse CAPTCHA marcando esses elementos de acordo:

javascript Copy

const { chromium } = require('playwright');

// Passo 1: Obtenha a extensão do GitHub (https://github.com/capsolver/capsolver-browser-extension/releases)
// Passo 2: Descompacte o arquivo zip da extensão e configure sua apiKey em /assets/config.js
const extensionPath = 'path/to/CapSolver Browser Extension-v1.16.0';

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: [
            `--disable-extensions-except=${extensionPath}`,
            `--load-extension=${extensionPath}`,
            '--lang=en-US'
        ],
    });

    const [page] = context.pages();
    await page.goto('https://captcha.com/demos/features/captcha-demo.aspx');
    await page.waitForSelector('#demoCaptcha_CaptchaImage');

    // Informe à extensão CapSolver onde a imagem CAPTCHA está localizada
    await page.evaluate(() => {
        const imgElement = document.querySelector('#demoCaptcha_CaptchaImage');
        if (imgElement) {
            imgElement.setAttribute('capsolver-image-to-text-source', '0');
        }
    });

    // Informe à extensão CapSolver onde o resultado do reconhecimento deve ser inserido
    await page.evaluate(() => {
        const resultElement = document.querySelector('#captchaCode');
        if (resultElement) {
            resultElement.setAttribute('capsolver-image-to-text-result', '0');
        }
    });

    // Aguardar a resolução do CAPTCHA e enviar o formulário
    await page.exposeFunction('captchaSolvedCallback', async () => {
        console.log('Captcha resolvido!');
        await page.waitForTimeout(3000);
        await page.click('#validateCaptchaButton');
        await page.waitForTimeout(3000);
        await context.close();
    });
})();

Resultado:

[Imagem GIF mostrando a resolução do CAPTCHA]

Como integrar a API CapSolver com o Playwright

Usar a Extensão CapSolver é conveniente e rápido, mas se você é um desenvolvedor experiente, recomendamos fortemente o uso da integração da API em vez disso. Comparado ao método baseado em extensão, a abordagem da API oferece várias vantagens principais:

Parâmetros mais personalizáveis – Você pode ajustar suas solicitações para melhor se adequar a quase todos os cenários de CAPTCHA.
Maior controle – Você pode decidir exatamente quando e como resolver o CAPTCHA.
Mensagens de erro mais detalhadas – Essas ajudam os desenvolvedores a realizar otimizações direcionadas.

Antes de mergulharmos na demonstração de código, aqui está uma visão geral rápida de como usar a API CapSolver:

Passo 1: https://api.capsolver.com/createTask — Criar uma tarefa
Passo 2: https://api.capsolver.com/getTaskResult — Obter o resultado da tarefa

Para criar uma tarefa, você precisará enviar um objeto JSON para o CapSolver. Este JSON inclui seu clientKey, websiteURL, websiteKey e outros dados. Esses campos variam dependendo do tipo de CAPTCHA e do site.
👉 Para detalhes, consulte nossa documentação: documentação

Resolvendo reCAPTCHA v2 com a API CapSolver

Antes de resolver o reCAPTCHA v2, leia a documentação aqui:
📖 ReCaptchaV2

Este guia explica quais parâmetros JSON incluir ao criar uma tarefa.
Além disso, você pode usar a Extensão CapSolver para gerar rapidamente dados JSON para suas solicitações de API.
Veja este blog para obter ajuda:
🔗 obtenha os dados JSON

Vamos pegar o seguinte exemplo:
🔗 https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php

O JSON necessário para criar uma tarefa para esta página é:

json Copy

{
    "type": "ReCaptchaV2TaskProxyLess",
    "websiteKey": "6LfW6wATAAAAAHLqO2pb8bDBahxlMxNdo9g947u9",
    "websiteURL": "https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php"
}

Também fornecemos exemplos de código JavaScript para usar a API em nossa documentação:

[Imagem mostrando o código JavaScript para usar a API CapSolver]

Integração no Playwright:

javascript Copy

const { chromium } = require('playwright');
const axios = require('axios');

// Substitua pela sua chave de API
const api_key = 'YOUR_API_KEY';
const captcha_type = 'ReCaptchaV2TaskProxyLess';
const site_key = '6LfW6wATAAAAAHLqO2pb8bDBahxlMxNdo9g947u9';
const site_url = 'https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php';

async function capSolver() {
    const payload = {
        clientKey: api_key,
        task: {
            type: captcha_type,
            websiteKey: site_key,
            websiteURL: site_url
        }
    };

    try {
        const res = await axios.post('https://api.capsolver.com/createTask', payload);
        const task_id = res.data.taskId;
        if (!task_id) {
            console.log('Falha ao criar tarefa:', res.data);
            return;
        }
        console.log('Obteve taskId:', task_id);

        while (true) {
            await new Promise(resolve => setTimeout(resolve, 1000)); // Atraso de 1 segundo

            const getResultPayload = { clientKey: api_key, taskId: task_id };
            const resp = await axios.post('https://api.capsolver.com/getTaskResult', getResultPayload);
            const status = resp.data.status;

            if (status === 'ready') {
                return resp.data.solution.gRecaptchaResponse;
            }
            if (status === 'failed' || resp.data.errorId) {
                console.log('Resolução falhou! resposta:', resp.data);
                return;
            }
        }
    } catch (error) {
        console.error('Erro:', error);
    }
}

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: ['--lang=en-US'],
    });

    const [page] = context.pages();
    await page.goto('https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php');
    await page.waitForSelector('form[action="/recaptcha-v2-checkbox.php"]');

    const token = await capSolver();
    console.log("Token:", token);

    // Define o valor do token
    await page.evaluate((token) => {
        const textarea = document.getElementById('g-recaptcha-response');
        if (textarea) {
            textarea.value = token;
        }
    }, token);

    await page.click('button[type="submit"]');
    await page.waitForTimeout(5000);
    await context.close();
})();

Resolvendo ImageToText com a API CapSolver

Ainda usamos o exemplo de https://captcha.com/demos/features/captcha-demo.aspx, onde o elemento de imagem captcha tem o id demoCaptcha_CaptchaImage, e o elemento de entrada de resultado tem o id captchaCode, como mostrado na imagem a seguir:

[Imagem mostrando o exemplo do CAPTCHA ImageToText]

Para ImageToTextTask, precisamos passar o valor base64 da imagem captcha para o CapSolver. O código de exemplo é o seguinte:

javascript Copy

const { chromium } = require('playwright');
const axios = require('axios');

// Substitua pela sua chave de API
const api_key = 'YOUR_API_KEY';
const captcha_type = 'ImageToTextTask';
const site_url = 'https://captcha.com/demos/features/captcha-demo.aspx';

async function capSolver(base64Image) {
    const payload = {
        clientKey: api_key,
        task: {
            type: captcha_type,
            websiteURL: site_url,
            body: base64Image,
        }
    };

    try {
        const res = await axios.post('https://api.capsolver.com/createTask', payload);

        const status = res.data.status;
        if (status === 'ready') {
            return res.data.solution.text;
        }
        if (status === 'failed' || res.data.errorId) {
            console.log('Resolução falhou! resposta:', res.data);
            return "";
        }
    } catch (error) {
        console.error('Erro:', error);
    }
}

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: ['--lang=en-US'],
    });

    const [page] = context.pages();
    await page.goto('https://captcha.com/demos/features/captcha-demo.aspx');
    await page.waitForSelector('#demoCaptcha_CaptchaImage');

    // Obter o valor base64 da imagem captcha
    const captchaImage = await page.evaluate(() => {
        const img = document.querySelector('img[id="demoCaptcha_CaptchaImage"]');
        return img ? img.getAttribute('src') : null;
    });
    const base64Image = captchaImage.split(',')[1];

    const text = await capSolver(base64Image);
    console.log("Texto:", text);

    // Define o texto captcha resolvido
    await page.evaluate((text) => {
        document.getElementById('captchaCode').value = text;
    }, text);

    await page.click('#validateCaptchaButton');
    await page.waitForTimeout(5000);
    await context.close();
})();

Além disso, para alguns tipos especiais de ImageToText, você pode especificar modelos diferentes para melhorar a precisão. Para detalhes, consulte nossa documentação:
https://docs.capsolver.com/en/guide/recognition/ImageToTextTask/

[Imagem mostrando a conclusão bem-sucedida da resolução do CAPTCHA]

Referências Úteis

Vídeos de demonstração com a extensão CapSolver:

Além disso, o CapSolver oferece um Programa de Compartilhamento de Receita para Desenvolvedores, permitindo que desenvolvedores e parceiros ganhem comissões integrando ou promovendo soluções CapSolver. É uma ótima maneira de monetizar seu trabalho enquanto ajuda outras pessoas a resolver captchas de forma eficiente. Para obter detalhes completos, confira:
Plano para Desenvolvedores CapSolver

Conclusão

Os recursos robustos do Playwright, combinados com a capacidade do CapSolver de lidar com CAPTCHAs, oferecem uma solução abrangente para automação da web. Seja usando a extensão CapSolver para conveniência ou a API para maior controle, essa integração simplifica tarefas complexas e aprimora os fluxos de trabalho de automação. Além de apenas resolver CAPTCHAs, lembre-se de que o CapSolver também oferece um Programa de Compartilhamento de Receita para Desenvolvedores, oferecendo uma excelente oportunidade de ganhar comissões integrando ou promovendo suas soluções.

Ver mais

Web ScrapingMay 15, 2026

Web Scraping: Gerenciamento de CAPTCHA – Guia de Automação Segura

Guia de captcha para fluxos de trabalho de dados aprovados: aprenda os tipos de desafios, tratamento de API, consistência de proxies, tentativas de repetição e uso responsável.

Adélia Cruz

The Other CAPTCHAMay 15, 2026

API de resolução de CAPTCHA rápida para Fluxos de Trabalho de Automação

API de resolução rápida de CAPTCHA para automação: compare fluxos de trabalho de tokens, desafios suportados, verificações de latência e integração responsável da CapSolver.

Jun04, 2025

Como Integrar o CapSolver com o Playwright | Guia Completo 2025

Adélia Cruz

Neural Network Developer

O que é Playwright?

Recursos principais do Playwright

Qualquer navegador, qualquer plataforma, uma API

Multi-navegador: O Playwright suporta todos os mecanismos de renderização modernos, incluindo Chromium, WebKit e Firefox.
Multiplataforma: Execute testes no Windows, Linux e macOS — localmente ou em CI — sem cabeça ou com cabeça.
Multi-linguagem: Use a API Playwright com TypeScript, JavaScript, Python, .NET ou Java.
Teste na Web móvel: Emule nativamente o Google Chrome para Android e o Mobile Safari. O mesmo mecanismo de renderização é executado em sua área de trabalho e na nuvem.

Casos de uso típicos

Raspagem de conteúdo dinâmico: Extraia dados renderizados via JavaScript.
Lidando com interações complexas: Útil para páginas que exigem login ou fluxos de trabalho de várias etapas para acessar dados.
Extraindo dados de aplicativos SPA: Rastree páginas construídas com estruturas como Vue ou React.
Teste automatizado: Valide a funcionalidade da página enquanto coleta dados.
Automação em modo sem cabeça: Execute todas as ações sem uma GUI, adequado para ambientes de servidor.

Uso básico do Playwright

Usando Playwright no Node.js:

bash Copy

npm i playwright  
npx playwright install  # Instale todos os navegadores (Chromium, Firefox, WebKit)

Exemplo: Obtenha todos os títulos de blog do CapSolver

No exemplo abaixo, usamos o Playwright para navegar até o blog CapSolver e pegar todos os títulos de postagem do blog <h5> da página

javascript Copy

const { chromium } = require('playwright');

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
    });

    const [page] = context.pages();
    await page.goto('https://www.capsolver.com/blog/All');

    const h5Titles = await page.evaluate(() => {
        const headings = Array.from(document.querySelectorAll('h5'));
        return headings.map(heading => heading.textContent.trim());
    });

    console.log(h5Titles);
    await context.close();
})();

Como integrar a extensão CapSolver com Playwright

O Playwright é poderoso o suficiente para carregar extensões de navegador como um navegador comum.

Baixe e extraia o arquivo ZIP da extensão CapSolver mais recente do GitHub oficial
Especifique o caminho da extensão nos argumentos de inicialização do Playwright usando --disable-extensions-except e --load-extension.

javascript Copy

const { chromium } = require('playwright');

const extensionPath = 'path/to/capsolver extension';

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: [
            `--disable-extensions-except=${extensionPath}`,
            `--load-extension=${extensionPath}`,
        ],
    });
    
    const [page] = context.pages();
    await page.goto('https://www.capsolver.com/blog/All');
    await browser.close();
})();

Resolvendo reCAPTCHA v2 usando a extensão CapSolver

⚠️ Não se esqueça de descompactar o arquivo zip da extensão e configurar sua apiKey em /assets/config.js

javascript Copy

const { chromium } = require('playwright');

// Passo 1: Baixe a extensão do GitHub: https://github.com/capsolver/capsolver-browser-extension/releases
// Passo 2: Descompacte o arquivo de extensão e defina sua apiKey em /assets/config.js
const extensionPath = 'path/to/CapSolver Browser Extension-v1.16.0';

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: [
            `--disable-extensions-except=${extensionPath}`,
            `--load-extension=${extensionPath}`,
            '--lang=en-US'
        ],
    });

    const [page] = context.pages();
    await page.goto('https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php');
    await page.waitForSelector('form[action="/recaptcha-v2-checkbox.php"]');

    // A extensão detectará e resolverá o reCAPTCHA automaticamente.
    await page.waitForTimeout(15000); // Aguardar resolução
    await page.click('button[type="submit"]');
    await page.waitForTimeout(5000);
    await context.close();
})();

⚠️ A extensão CapSolver também suporta muitas opções de configuração úteis. Abaixo estão alguns exemplos comuns (Observação: Todas as configurações são definidas em /assets/config.js)

Opção de configuração: `solvedCallback`

Vamos agora melhorar nosso código anterior usando essa abordagem.

javascript Copy

const { chromium } = require('playwright');

const extensionPath = 'path/to/CapSolver Browser Extension-v1.16.0';

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: [
            `--disable-extensions-except=${extensionPath}`,
            `--load-extension=${extensionPath}`,
            '--lang=en-US'
        ],
    });

    const [page] = context.pages();
    await page.goto('https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php');
    await page.waitForSelector('form[action="/recaptcha-v2-checkbox.php"]');

    await page.exposeFunction('captchaSolvedCallback', async () => {
        console.log('Captcha resolvido!');

        const iframe = await page.$('iframe[src*="recaptcha"]');
        if (iframe) {
            const frame = await iframe.contentFrame();
            const finished = await frame.evaluate(() => {
                const element = document.querySelector('.recaptcha-checkbox-border');
                return element && window.getComputedStyle(element).display === 'none';
            });

            if (finished) {
                console.log('Verificação concluída!');
                await page.click('button[type="submit"]');
                await page.waitForTimeout(3000);
                await context.close();
            } else {
                console.log('Verificação não concluída. Tentando novamente...');
            }
        }
    });
})();

Para o reCAPTCHA v2, às vezes, vários desafios de imagem podem aparecer. Portanto, após cada desafio, verificamos se a caixa de seleção "Não sou um robô" foi marcada — se ela desaparecer, a verificação é considerada concluída.

Opção de configuração: `manualSolving`

Para lidar com isso, defina manualSolving: true em /assets/config.js, o que permite acionar manualmente o processo de resolução do CAPTCHA.

Existem duas maneiras de acionar a resolução:

Simule um clique no botão CapSolver na extensão.
Execute: window.postMessage({ type: 'capsolverSolve' });

⚠️ Observação: Este recurso só é compatível com versões da extensão superiores à v1.16.0!

Exemplo:

javascript Copy

const { chromium } = require('playwright');

const extensionPath = 'path/to/CapSolver Browser Extension-v1.16.0';

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: [
            `--disable-extensions-except=${extensionPath}`,
            `--load-extension=${extensionPath}`,
            '--lang=en-US'
        ],
    });

    const [page] = context.pages();
    await page.goto('https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php');
    await page.waitForSelector('form[action="/recaptcha-v2-checkbox.php"]');

    // Simule o preenchimento das credenciais
    await page.evaluate(() => {
        const inputA = document.querySelector('input[name="ex-a"]');
        inputA.value = 'username';
        const inputB = document.querySelector('input[name="ex-b"]');
        inputB.value = 'password';
    });

    // Simule outros atrasos ou atividade do usuário
    for (let i = 1; i <= 5; i++) {
        await page.waitForTimeout(1000);
        console.log(`Esperou ${i} segundos...`);
    }

    console.log('Iniciar resolução do CAPTCHA...');

    // Método 1: Simule clicando no botão CapSolver
    await page.evaluate(() => {
        document.querySelector('#capsolver-solver-tip-button').click();
    });

    // Método 2: Acionar usando postMessage
    // await page.evaluate(() => {
    //     window.postMessage({ type: 'capsolverSolve' });
    // });

    await page.exposeFunction('captchaSolvedCallback', async () => {
        console.log('Captcha resolvido!');

        const iframe = await page.$('iframe[src*="recaptcha"]');
        if (iframe) {
            const frame = await iframe.contentFrame();
            const finished = await frame.evaluate(() => {
                const element = document.querySelector('.recaptcha-checkbox-border');
                return element && window.getComputedStyle(element).display === 'none';
            });

            if (finished) {
                console.log('Verificação concluída!');
                await page.click('button[type="submit"]');
                await page.waitForTimeout(3000);
                await context.close();
            } else {
                console.log('Verificação não concluída. Tente novamente.');
            }
        }
    });
})();

Opção de configuração: `reCaptchaMode`

A configuração reCaptchaMode suporta dois modos: click e token.

modo clique simula a interação humana — clicando nos desafios de imagem.
modo token usa diretamente a API CapSolver para obter um token de solução sem interação da IU.

Modo Clique	Modo Token

Opção de configuração: `showSolveButton`

Opção de configuração: useProxy

Seu proxy fornece melhor qualidade (por exemplo, tokens reCAPTCHA gerados usando seu proxy recebem pontuações mais altas) ou velocidade de resolução mais rápida;
Em certos casos, o IP usado para resolver o CAPTCHA deve ser o mesmo que o IP usado para enviar o token.

Resolvendo CAPTCHAs ImageToText usando a extensão CapSolver

Adicione um atributo capsolver-image-to-text-source com o valor 0 ao elemento de imagem do CAPTCHA;
Adicione um atributo capsolver-image-to-text-result com o valor 0 ao campo de entrada onde o resultado deve ser preenchido.

Vamos percorrer um exemplo usando o site:
https://captcha.com/demos/features/captcha-demo.aspx

Primeiro, inspecione a fonte da página para localizar o elemento de imagem do CAPTCHA e o campo de entrada do resultado. Nesse caso:

ID do elemento de imagem CAPTCHA: demoCaptcha_CaptchaImage
ID do campo de entrada para o resultado: captchaCode
(Captura de tela abaixo)

Agora, vamos usar o Playwright para automatizar a resolução desse CAPTCHA marcando esses elementos de acordo:

javascript Copy

const { chromium } = require('playwright');

// Passo 1: Obtenha a extensão do GitHub (https://github.com/capsolver/capsolver-browser-extension/releases)
// Passo 2: Descompacte o arquivo zip da extensão e configure sua apiKey em /assets/config.js
const extensionPath = 'path/to/CapSolver Browser Extension-v1.16.0';

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: [
            `--disable-extensions-except=${extensionPath}`,
            `--load-extension=${extensionPath}`,
            '--lang=en-US'
        ],
    });

    const [page] = context.pages();
    await page.goto('https://captcha.com/demos/features/captcha-demo.aspx');
    await page.waitForSelector('#demoCaptcha_CaptchaImage');

    // Informe à extensão CapSolver onde a imagem CAPTCHA está localizada
    await page.evaluate(() => {
        const imgElement = document.querySelector('#demoCaptcha_CaptchaImage');
        if (imgElement) {
            imgElement.setAttribute('capsolver-image-to-text-source', '0');
        }
    });

    // Informe à extensão CapSolver onde o resultado do reconhecimento deve ser inserido
    await page.evaluate(() => {
        const resultElement = document.querySelector('#captchaCode');
        if (resultElement) {
            resultElement.setAttribute('capsolver-image-to-text-result', '0');
        }
    });

    // Aguardar a resolução do CAPTCHA e enviar o formulário
    await page.exposeFunction('captchaSolvedCallback', async () => {
        console.log('Captcha resolvido!');
        await page.waitForTimeout(3000);
        await page.click('#validateCaptchaButton');
        await page.waitForTimeout(3000);
        await context.close();
    });
})();

Resultado:

[Imagem GIF mostrando a resolução do CAPTCHA]

Como integrar a API CapSolver com o Playwright

Parâmetros mais personalizáveis – Você pode ajustar suas solicitações para melhor se adequar a quase todos os cenários de CAPTCHA.
Maior controle – Você pode decidir exatamente quando e como resolver o CAPTCHA.
Mensagens de erro mais detalhadas – Essas ajudam os desenvolvedores a realizar otimizações direcionadas.

Antes de mergulharmos na demonstração de código, aqui está uma visão geral rápida de como usar a API CapSolver:

Passo 1: https://api.capsolver.com/createTask — Criar uma tarefa
Passo 2: https://api.capsolver.com/getTaskResult — Obter o resultado da tarefa

Resolvendo reCAPTCHA v2 com a API CapSolver

Antes de resolver o reCAPTCHA v2, leia a documentação aqui:
📖 ReCaptchaV2

Vamos pegar o seguinte exemplo:
🔗 https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php

O JSON necessário para criar uma tarefa para esta página é:

json Copy

{
    "type": "ReCaptchaV2TaskProxyLess",
    "websiteKey": "6LfW6wATAAAAAHLqO2pb8bDBahxlMxNdo9g947u9",
    "websiteURL": "https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php"
}

Também fornecemos exemplos de código JavaScript para usar a API em nossa documentação:

[Imagem mostrando o código JavaScript para usar a API CapSolver]

Integração no Playwright:

javascript Copy

const { chromium } = require('playwright');
const axios = require('axios');

// Substitua pela sua chave de API
const api_key = 'YOUR_API_KEY';
const captcha_type = 'ReCaptchaV2TaskProxyLess';
const site_key = '6LfW6wATAAAAAHLqO2pb8bDBahxlMxNdo9g947u9';
const site_url = 'https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php';

async function capSolver() {
    const payload = {
        clientKey: api_key,
        task: {
            type: captcha_type,
            websiteKey: site_key,
            websiteURL: site_url
        }
    };

    try {
        const res = await axios.post('https://api.capsolver.com/createTask', payload);
        const task_id = res.data.taskId;
        if (!task_id) {
            console.log('Falha ao criar tarefa:', res.data);
            return;
        }
        console.log('Obteve taskId:', task_id);

        while (true) {
            await new Promise(resolve => setTimeout(resolve, 1000)); // Atraso de 1 segundo

            const getResultPayload = { clientKey: api_key, taskId: task_id };
            const resp = await axios.post('https://api.capsolver.com/getTaskResult', getResultPayload);
            const status = resp.data.status;

            if (status === 'ready') {
                return resp.data.solution.gRecaptchaResponse;
            }
            if (status === 'failed' || resp.data.errorId) {
                console.log('Resolução falhou! resposta:', resp.data);
                return;
            }
        }
    } catch (error) {
        console.error('Erro:', error);
    }
}

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: ['--lang=en-US'],
    });

    const [page] = context.pages();
    await page.goto('https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php');
    await page.waitForSelector('form[action="/recaptcha-v2-checkbox.php"]');

    const token = await capSolver();
    console.log("Token:", token);

    // Define o valor do token
    await page.evaluate((token) => {
        const textarea = document.getElementById('g-recaptcha-response');
        if (textarea) {
            textarea.value = token;
        }
    }, token);

    await page.click('button[type="submit"]');
    await page.waitForTimeout(5000);
    await context.close();
})();

Resolvendo ImageToText com a API CapSolver

[Imagem mostrando o exemplo do CAPTCHA ImageToText]

Para ImageToTextTask, precisamos passar o valor base64 da imagem captcha para o CapSolver. O código de exemplo é o seguinte:

javascript Copy

const { chromium } = require('playwright');
const axios = require('axios');

// Substitua pela sua chave de API
const api_key = 'YOUR_API_KEY';
const captcha_type = 'ImageToTextTask';
const site_url = 'https://captcha.com/demos/features/captcha-demo.aspx';

async function capSolver(base64Image) {
    const payload = {
        clientKey: api_key,
        task: {
            type: captcha_type,
            websiteURL: site_url,
            body: base64Image,
        }
    };

    try {
        const res = await axios.post('https://api.capsolver.com/createTask', payload);

        const status = res.data.status;
        if (status === 'ready') {
            return res.data.solution.text;
        }
        if (status === 'failed' || res.data.errorId) {
            console.log('Resolução falhou! resposta:', res.data);
            return "";
        }
    } catch (error) {
        console.error('Erro:', error);
    }
}

(async () => {
    const context = await chromium.launchPersistentContext('', {
        headless: false,
        viewport: { width: 1920, height: 1080 },
        args: ['--lang=en-US'],
    });

    const [page] = context.pages();
    await page.goto('https://captcha.com/demos/features/captcha-demo.aspx');
    await page.waitForSelector('#demoCaptcha_CaptchaImage');

    // Obter o valor base64 da imagem captcha
    const captchaImage = await page.evaluate(() => {
        const img = document.querySelector('img[id="demoCaptcha_CaptchaImage"]');
        return img ? img.getAttribute('src') : null;
    });
    const base64Image = captchaImage.split(',')[1];

    const text = await capSolver(base64Image);
    console.log("Texto:", text);

    // Define o texto captcha resolvido
    await page.evaluate((text) => {
        document.getElementById('captchaCode').value = text;
    }, text);

    await page.click('#validateCaptchaButton');
    await page.waitForTimeout(5000);
    await context.close();
})();

[Imagem mostrando a conclusão bem-sucedida da resolução do CAPTCHA]

Referências Úteis

Vídeos de demonstração com a extensão CapSolver:

Conclusão

Ver mais

Web ScrapingMay 15, 2026

Web Scraping: Gerenciamento de CAPTCHA – Guia de Automação Segura

Guia de captcha para fluxos de trabalho de dados aprovados: aprenda os tipos de desafios, tratamento de API, consistência de proxies, tentativas de repetição e uso responsável.

Adélia Cruz

The Other CAPTCHAMay 15, 2026

API de resolução de CAPTCHA rápida para Fluxos de Trabalho de Automação

API de resolução rápida de CAPTCHA para automação: compare fluxos de trabalho de tokens, desafios suportados, verificações de latência e integração responsável da CapSolver.

Como Integrar o CapSolver com o Playwright | Guia Completo 2025

O que é Playwright?

Recursos principais do Playwright

Casos de uso típicos

Uso básico do Playwright

Como integrar a extensão CapSolver com Playwright

Resolvendo reCAPTCHA v2 usando a extensão CapSolver

Opção de configuração: solvedCallback

Opção de configuração: manualSolving

Opção de configuração: reCaptchaMode

Opção de configuração: showSolveButton

Opção de configuração: useProxy

Resolvendo CAPTCHAs ImageToText usando a extensão CapSolver

Como integrar a API CapSolver com o Playwright

Resolvendo reCAPTCHA v2 com a API CapSolver

Resolvendo ImageToText com a API CapSolver

Referências Úteis

Conclusão

Ver mais

Web Scraping: Gerenciamento de CAPTCHA – Guia de Automação Segura

API de resolução de CAPTCHA rápida para Fluxos de Trabalho de Automação

Como Integrar o CapSolver com o Playwright | Guia Completo 2025

O que é Playwright?

Recursos principais do Playwright

Casos de uso típicos

Uso básico do Playwright

Como integrar a extensão CapSolver com Playwright

Resolvendo reCAPTCHA v2 usando a extensão CapSolver

Opção de configuração: solvedCallback

Opção de configuração: manualSolving

Opção de configuração: reCaptchaMode

Opção de configuração: showSolveButton

Opção de configuração: useProxy

Resolvendo CAPTCHAs ImageToText usando a extensão CapSolver

Como integrar a API CapSolver com o Playwright

Resolvendo reCAPTCHA v2 com a API CapSolver

Resolvendo ImageToText com a API CapSolver

Referências Úteis

Conclusão

Ver mais

Web Scraping: Gerenciamento de CAPTCHA – Guia de Automação Segura

API de resolução de CAPTCHA rápida para Fluxos de Trabalho de Automação

Selenium vs Puppeteer para Resolução de CAPTCHA: Guia de Comparação de 2026

ReCAPTCHA na Raspagem de E-commerce: Um Guia Priorizando a Conformidade

Opção de configuração: `solvedCallback`

Opção de configuração: `manualSolving`

Opção de configuração: `reCaptchaMode`

Opção de configuração: `showSolveButton`

Opção de configuração: `solvedCallback`

Opção de configuração: `manualSolving`

Opção de configuração: `reCaptchaMode`

Opção de configuração: `showSolveButton`