CAPTCHA dentro do shadow DOM: como alcançar elementos em componentes web

Widget na tela e script de extração devolvendo null? O CAPTCHA foi renderizado dentro de uma shadow root, e o document.querySelector não cruza o limite de um componente web.

A saída tem duas etapas: atravessar as shadow roots para ler a sitekey e, com o token resolvido, gravá-lo no campo de resposta lá dentro. Veja as duas em Playwright (Python) e Puppeteer (Node.js), com Cloudflare Turnstile.

Confirme que o widget está mesmo dentro de uma shadow root

Antes de mexer na automação, abra o console do DevTools. O trecho percorre a página, checa quais elementos têm shadowRoot e imprime o host com a sitekey:

// In browser DevTools console
// Regular query returns null even though CAPTCHA is visible
document.querySelector('.cf-turnstile');  // null

// Check for shadow hosts
document.querySelectorAll('*').forEach(el => {
  if (el.shadowRoot) {
    const captcha = el.shadowRoot.querySelector('.cf-turnstile, .g-recaptcha');
    if (captcha) {
      console.log('Found CAPTCHA in shadow root of:', el.tagName, el.id || el.className);
      console.log('Sitekey:', captcha.dataset.sitekey);
    }
  }
});

O nome da tag impresso no console entrega o que importa: quem encapsula o widget e qual sitekey ele carrega.

Se nada aparecer e o CAPTCHA continuar visível, o invólucro provavelmente é um iframe.

Por que o widget foi parar dentro de um componente web

Caso recorrente no mercado brasileiro: o time migra o front para micro-frontends com design system interno e o login passa a viver em um <login-form> próprio. O Turnstile é o mesmo, mas a suíte quebra na leitura da sitekey.

Ao depurar, registre só os atributos necessários, nunca o DOM inteiro: isso mantém a coleta alinhada à LGPD.

Até onde a árvore de componentes pode ir

Playwright: travessia de shadow DOM em Python

O Playwright entende limites de shadow DOM: o seletor de piercing >> e a API locator cruzam a fronteira sem código extra. O exemplo tenta esse caminho e, se não achar nada, cai para uma busca recursiva pelas shadow roots abertas. Com o token, o script preenche o campo cf-turnstile-response e dispara o callback.

import requests
import time
from playwright.sync_api import sync_playwright

API_KEY = "YOUR_API_KEY"
SUBMIT_URL = "https://ocr.captchaai.com/in.php"
RESULT_URL = "https://ocr.captchaai.com/res.php"


def solve_turnstile(sitekey, pageurl):
    """Submit and poll a Turnstile CAPTCHA."""
    resp = requests.post(SUBMIT_URL, data={
        "key": API_KEY,
        "method": "turnstile",
        "sitekey": sitekey,
        "pageurl": pageurl,
        "json": 1,
    }, timeout=30).json()

    if resp.get("status") != 1:
        raise RuntimeError(f"Submit failed: {resp.get('request')}")

    task_id = resp["request"]
    for _ in range(60):
        time.sleep(5)
        poll = requests.get(RESULT_URL, params={
            "key": API_KEY, "action": "get",
            "id": task_id, "json": 1,
        }, timeout=15).json()

        if poll.get("request") == "CAPCHA_NOT_READY":
            continue
        if poll.get("status") == 1:
            return poll["request"]
        raise RuntimeError(f"Solve failed: {poll.get('request')}")

    raise RuntimeError("Timeout")


def extract_from_shadow_dom(page):
    """Extract CAPTCHA sitekey from shadow DOM elements."""

    # Method 1: Playwright's piercing selector (>>)
    # This automatically crosses shadow boundaries
    turnstile = page.locator("css=.cf-turnstile >> visible=true").first
    if turnstile.count() > 0:
        sitekey = turnstile.get_attribute("data-sitekey")
        if sitekey:
            return sitekey

    # Method 2: JavaScript evaluation to pierce all shadow roots
    sitekey = page.evaluate("""
        () => {
            function findInShadowRoots(root) {
                // Check direct children
                const turnstile = root.querySelector('.cf-turnstile');
                if (turnstile && turnstile.dataset.sitekey) {
                    return turnstile.dataset.sitekey;
                }

                const recaptcha = root.querySelector('.g-recaptcha');
                if (recaptcha && recaptcha.dataset.sitekey) {
                    return recaptcha.dataset.sitekey;
                }

                // Recurse into nested shadow roots
                for (const el of root.querySelectorAll('*')) {
                    if (el.shadowRoot) {
                        const found = findInShadowRoots(el.shadowRoot);
                        if (found) return found;
                    }
                }
                return null;
            }
            return findInShadowRoots(document);
        }
    """)

    return sitekey


def inject_token_shadow_dom(page, token, captcha_type="turnstile"):
    """Inject solved token into shadow DOM CAPTCHA element."""
    if captcha_type == "turnstile":
        page.evaluate(f"""
            (token) => {{
                function findAndInject(root) {{
                    // Find the response input inside Turnstile
                    const input = root.querySelector('[name="cf-turnstile-response"]');
                    if (input) {{
                        input.value = token;
                        return true;
                    }}

                    // Recurse into shadow roots
                    for (const el of root.querySelectorAll('*')) {{
                        if (el.shadowRoot && findAndInject(el.shadowRoot)) {{
                            return true;
                        }}
                    }}
                    return false;
                }}
                findAndInject(document);

                // Also try callback if defined
                if (typeof window.turnstileCallback === 'function') {{
                    window.turnstileCallback(token);
                }}
            }}
        """, token)
    elif captcha_type == "recaptcha":
        page.evaluate(f"""
            (token) => {{
                function findAndInject(root) {{
                    const textarea = root.querySelector('#g-recaptcha-response');
                    if (textarea) {{
                        textarea.value = token;
                        textarea.style.display = 'block';
                        return true;
                    }}
                    for (const el of root.querySelectorAll('*')) {{
                        if (el.shadowRoot && findAndInject(el.shadowRoot)) {{
                            return true;
                        }}
                    }}
                    return false;
                }}
                findAndInject(document);

                if (typeof ___grecaptcha_cfg !== 'undefined') {{
                    Object.entries(___grecaptcha_cfg.clients).forEach(([_, client]) => {{
                        Object.entries(client).forEach(([_, val]) => {{
                            if (val && typeof val === 'object') {{
                                Object.entries(val).forEach(([_, v]) => {{
                                    if (v && v.callback) v.callback(token);
                                }});
                            }}
                        }});
                    }});
                }}
            }}
        """, token)


def main():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        page.goto("https://staging.example.com/qa-login")
        page.wait_for_load_state("networkidle")

        # Extract sitekey from shadow DOM
        sitekey = extract_from_shadow_dom(page)
        if not sitekey:
            print("No CAPTCHA found in shadow DOM or regular DOM")
            browser.close()
            return

        print(f"Found sitekey: {sitekey}")

        # Solve via CaptchaAI
        token = solve_turnstile(sitekey, page.url)
        print(f"Solved: {token[:40]}...")

        # Inject token back into shadow DOM
        inject_token_shadow_dom(page, token, "turnstile")
        print("Token injected into shadow DOM")

        # Submit the form
        page.click("button[type='submit']")
        page.wait_for_load_state("networkidle")

        browser.close()


main()

Um detalhe evita retrabalho: o pageurl enviado à API vem de page.url no momento da extração, nunca de uma URL fixa.

O tempo do fluxo é dominado pela resolução do desafio, não pela travessia — inclusive com workers em sa-east-1.

Puppeteer: a mesma travessia em Node.js

O Puppeteer não tem seletor de piercing equivalente: a travessia acontece toda dentro de page.evaluate. A sequência é idêntica: achar a sitekey, enviar a tarefa, consultar o resultado e gravar o token.

const puppeteer = require("puppeteer");

const API_KEY = "YOUR_API_KEY";
const SUBMIT_URL = "https://ocr.captchaai.com/in.php";
const RESULT_URL = "https://ocr.captchaai.com/res.php";

async function solveTurnstile(sitekey, pageurl) {
  const params = new URLSearchParams({
    key: API_KEY, method: "turnstile", sitekey, pageurl, json: "1",
  });
  const resp = await (await fetch(SUBMIT_URL, { method: "POST", body: params })).json();
  if (resp.status !== 1) throw new Error(`Submit: ${resp.request}`);

  const taskId = resp.request;
  for (let i = 0; i < 60; i++) {
    await new Promise((r) => setTimeout(r, 5000));
    const url = `${RESULT_URL}?key=${API_KEY}&action=get&id=${taskId}&json=1`;
    const poll = await (await fetch(url)).json();
    if (poll.request === "CAPCHA_NOT_READY") continue;
    if (poll.status === 1) return poll.request;
    throw new Error(`Solve: ${poll.request}`);
  }
  throw new Error("Timeout");
}

async function extractSitekeyFromShadowDOM(page) {
  return page.evaluate(() => {
    function searchShadowRoots(root) {
      const selectors = [".cf-turnstile", ".g-recaptcha", ".h-captcha"];
      for (const sel of selectors) {
        const el = root.querySelector(sel);
        if (el && el.dataset.sitekey) return el.dataset.sitekey;
      }
      for (const el of root.querySelectorAll("*")) {
        if (el.shadowRoot) {
          const found = searchShadowRoots(el.shadowRoot);
          if (found) return found;
        }
      }
      return null;
    }
    return searchShadowRoots(document);
  });
}

async function injectTokenShadowDOM(page, token) {
  await page.evaluate((t) => {
    function inject(root) {
      const input = root.querySelector('[name="cf-turnstile-response"]');
      if (input) { input.value = t; return true; }
      const textarea = root.querySelector("#g-recaptcha-response");
      if (textarea) { textarea.value = t; return true; }
      for (const el of root.querySelectorAll("*")) {
        if (el.shadowRoot && inject(el.shadowRoot)) return true;
      }
      return false;
    }
    inject(document);
  }, token);
}

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto("https://staging.example.com/qa-login", { waitUntil: "networkidle2" });

  const sitekey = await extractSitekeyFromShadowDOM(page);
  if (!sitekey) {
    console.log("No CAPTCHA found in shadow DOM");
    await browser.close();
    return;
  }

  console.log(`Sitekey: ${sitekey}`);
  const token = await solveTurnstile(sitekey, page.url());
  console.log(`Solved: ${token.substring(0, 40)}...`);

  await injectTokenShadowDOM(page, token);
  await page.click('button[type="submit"]');
  await page.waitForNavigation();

  await browser.close();
})();

Ordem de diagnóstico que economiza tempo

1. Comece pelas shadow roots abertas, siga para os iframes e só então olhe os callbacks da aplicação.
2. Registre qual camada expôs o desafio: quando a página mudar, o log aponta a quebra.
3. Tenha um plano para shadow roots fechadas.

Quando algo dá errado

Perguntas frequentes

E se o widget for um hCaptcha?

Não é possível: o hCaptcha não é suportado, em shadow root ou fora dela. A travessia aqui serve aos tipos suportados: reCAPTCHA v2 e v3, Turnstile, GeeTest v3, imagem/OCR e grade de imagens.

O seletor de piercing do Playwright também entra em iframes?

Não. O >> cruza limites de shadow DOM, não de frames. Com o widget em um <iframe>, entre no frame com page.frame_locator(...) e só então percorra as shadow roots.

A busca recursiva pode deixar a suíte de testes lenta?

Pode, em páginas com milhares de nós. Limite a profundidade e comece pelos hosts conhecidos, em vez de varrer o documento inteiro.

Preciso de navegador se eu usar só a API?

Não. Enviando sitekey e pageurl direto para a API, o encapsulamento é irrelevante. A travessia só entra quando é preciso ler a sitekey da página ou devolver o token ao formulário.

Artigos relacionados

• GeeTest v3 ou Cloudflare Turnstile: qual desafio você tem
• Turnstile devolvendo 403 depois do token
• Modos de widget do Cloudflare Turnstile na prática

Próximos passos

Componentes web já não são exceção em telas de login. Pegue sua chave de API da CaptchaAI e valide a travessia em homologação.

Guias relacionados:

• Vários CAPTCHAs na mesma página: como organizar o fluxo
• Extrair CAPTCHA de iframes aninhados
• CAPTCHA em modais e pop-ups: detectar e preencher o token