Envie um token resolvido em uma requisição JSON com Playwright

1. 1.

   Prepare o serviço de resolução

   Use Node.js 22+, Playwright e o SDK oficial de JavaScript. Siga as instruções de instalação do SDK; use o download do pacote documentado em vez de presumir sua disponibilidade no registro npm. Mantenha SOLVETHREE_API_KEY no processo do Node.js, não no código do navegador.

2. 2.

   Configure o site e o proxy

   Defina TARGET_URL como a página de teste sob seu controle e SOLVETHREE_PROXY como a URL do proxy HTTP ou HTTPS dela. O exemplo solicita a ação login para o hostname da página. Esse hostname precisa de um perfil ativo no workspace; configure o perfil do site primeiro. Altere a ação se sua aplicação usar outra.

3. 3.

   Identifique o envio exato

   Defina TARGET_SUBMIT_URL como o endpoint POST JSON, incluindo seu caminho. Ele deve ter a mesma origem da página. O exemplo espera um objeto contendo recaptchaToken e um botão cujo nome acessível seja exatamente Submit. Altere esses detalhes específicos da aplicação em conjunto.

Para montar um cenário de teste, use uma página que envie um objeto JSON para esse endpoint e retorne uma resposta que possa ser inspecionada. Inclua outro campo e um campo CSRF para verificar que nenhum deles muda. Um cenário de teste local que apenas devolve os dados recebidos pode demonstrar a reescrita do JSON, mas não verifica a aceitação do CAPTCHA. O exemplo fornecido ainda realiza uma resolução real e precisa de um site configurado e acessível pelo proxy.

import { chromium } from 'playwright';
import { Solvethree } from '@solvethree/sdk';
const client = new Solvethree({ apiKey: process.env.SOLVETHREE_API_KEY });
const target = new URL(process.env.TARGET_URL);
const proxy = new URL(process.env.SOLVETHREE_PROXY);
const result = await client.solve({ site: target.hostname, action: 'login', proxy: process.env.SOLVETHREE_PROXY });
const proxyConfig = { server: `${proxy.protocol}//${proxy.host}`, username: decodeURIComponent(proxy.username), password: decodeURIComponent(proxy.password) };

const submit = new URL(process.env.TARGET_SUBMIT_URL);
if (submit.origin !== target.origin) throw new Error('Use this demo with a same-origin submission URL');
const browser = await chromium.launch();
try {
  const context = await browser.newContext({ proxy: proxyConfig, userAgent: result.solution.userAgent,
    extraHTTPHeaders: { 'sec-ch-ua': result.solution.secChUa } });
  const page = await context.newPage();
  await page.route(submit.href, async route => {
    if (route.request().method() !== 'POST') return route.continue();
    const body = route.request().postDataJSON();
    if (!body || typeof body !== 'object' || Array.isArray(body)) throw new Error('Expected the known JSON object');
    await route.continue({ postData: JSON.stringify({ ...body, recaptchaToken: result.solution.token }),
      headers: { ...route.request().headers(), 'content-type': 'application/json' } });
  });
  await page.goto(target.href);
  const outcome = page.waitForResponse(r => r.url() === submit.href && r.request().method() === 'POST');
  await page.getByRole('button', { name: 'Submit', exact: true }).click();
  console.log('Application HTTP status:', (await outcome).status());
  // recaptchaToken, the Submit button and this endpoint belong to this demo app.
  // Adapt them to the real application, retaining its session/CSRF data.
  await context.close();
} finally { await browser.close(); }

client.solve cria a tarefa e consulta seu status até que esteja pronta ou lança uma exceção. O exemplo então cria um contexto de navegador usando solution.userAgent, solution.secChUa e o mesmo proxy único fornecido para a resolução. O SDK não aplica a solução ao navegador; o manipulador de rota faz isso.

O contexto do navegador é novo. Se o envio exigir autenticação ou outra configuração de sessão, faça isso nesse contexto antes de enviar. O exemplo não importa uma sessão de navegador existente.

A rota é registrada antes da navegação e restrita à URL de envio configurada. Requisições que não sejam POST seguem sem alterações. Para um POST, o manipulador lê o objeto JSON existente, copia seus campos e substitui apenas recaptchaToken.

Isso preserva os campos do corpo, como valores do formulário e dados CSRF. O manipulador também copia os cabeçalhos da requisição e define o tipo de conteúdo como JSON. Mantenha o comportamento de sessão e CSRF existente na aplicação; um token resolvido não substitui nenhum dos dois.

Não amplie a rota para todas as requisições nem substitua qualquer campo que pareça ser um token. Inspecione a requisição de saída da aplicação sob seu controle e use o nome real do campo. Este exemplo não descobre widgets, não invoca callbacks arbitrários nem oferece suporte a páginas arbitrárias de terceiros. A documentação de rede do Playwright explica o mecanismo de interceptação.

A espera pela resposta começa antes do clique e corresponde à URL de envio e ao método POST. O status registrado é o da resposta da aplicação, não o da tarefa do solvethree. Inspecione o corpo dessa resposta ou o estado resultante da aplicação de acordo com os critérios de sucesso dela. Nem uma tarefa pronta nem um status HTTP de sucesso, isoladamente, comprovam que a aplicação aceitou o token.

A espera pela resposta nunca termina.

Verifique se o botão Submit exato dispara um POST para a URL configurada.

Experimente: Corrija o localizador do botão, o endpoint ou o método para corresponder à aplicação. Não amplie a interceptação para tráfego não relacionado.

A rota não consegue ler um objeto JSON.

Inspecione o corpo da requisição e o tipo de conteúdo.

Experimente: Use este manipulador apenas para o endpoint conhecido que recebe um objeto JSON. Dados de formulário, arrays e outros formatos de payload precisam de um tratamento diferente.

A tarefa está pronta, mas a aplicação rejeita o envio.

Inspecione o JSON de saída para conferir solution.token e depois verifique os dados de sessão/CSRF, a ação, a identidade de navegador retornada e o proxy.

Experimente: Corrija a incompatibilidade na requisição antes de pagar por outra resolução. Mantenha o navegador no proxy da resolução e use a identidade retornada.

A resolução falha antes de o navegador abrir.

Diferencie um erro de requisição HTTP de uma falha terminal da tarefa. Para uma tarefa com falha, inspecione errorCode e error.

Experimente: Corrija o problema de entrada, perfil ou conectividade informado em vez de tentar novamente com os mesmos dados de entrada. Consulte Tratamento de erros da API.