Solve Cloudflare Turnstile in Playwright

// Fill a Cloudflare Turnstile widget in Playwright with a token from ZeroCaptcha, on a page you may automate.
// Needs Node.js 20 or later, playwright and @zerocaptcha/sdk:
//   ZEROCAPTCHA_API=https://api.zerocaptcha.io ZEROCAPTCHA_KEY=zc_live_... node fill-turnstile.mjs
import { chromium } from "playwright";
import { TaskFailedError, ZeroCaptcha } from "@zerocaptcha/sdk";

const zerocaptcha = new ZeroCaptcha({
  apiKey: process.env.ZEROCAPTCHA_KEY,
  baseUrl: process.env.ZEROCAPTCHA_API,
});

const browser = await chromium.launch();
const page = await browser.newPage();
// A widget rendered by script takes its settings from turnstile.render(container, options):
// note each call's options before the page's own scripts run.
await page.addInitScript(() => {
  let api;
  Object.defineProperty(window, "turnstile", {
    configurable: true,
    get: () => api,
    set(value) {
      const render = value.render;
      value.render = (container, options = {}) => {
        window.__turnstileRenders = [...(window.__turnstileRenders ?? []), options];
        return render.call(value, container, options);
      };
      api = value;
    },
  });
});
await page.goto("https://shop.example.com/login");
await page.waitForFunction(() => document.querySelector("[data-sitekey]") || window.__turnstileRenders);

// The widget's site key, action and cData: its data-sitekey, data-action and data-cdata
// attributes, or the sitekey, action and cData it was rendered with. Many sites check the action
// and cData when they verify the token, so send them exactly as the widget sets them.
const widget = await page.evaluate(() => {
  const element = document.querySelector("[data-sitekey]");
  const rendered = window.__turnstileRenders?.[0] ?? {};
  return {
    websiteKey: element?.dataset.sitekey ?? rendered.sitekey,
    action: element?.dataset.action ?? rendered.action,
    cdata: element?.dataset.cdata ?? rendered.cData,
    callback: element?.dataset.callback,
  };
});

let token;
try {
  // The client sends an Idempotency-Key with the create, so its own retries never make two tasks.
  token = await zerocaptcha.solve({
    websiteURL: page.url(),
    websiteKey: widget.websiteKey,
    action: widget.action, // left out of the request when the widget sets none
    cdata: widget.cdata,
    // proxy: "http://user:pass@proxy.example.net:8080", // to solve through your own proxy
  });
} catch (error) {
  // A task that fails or expires costs nothing; its code says why.
  if (error instanceof TaskFailedError) throw new Error(`Not solved: ${error.code}`);
  throw error;
}

// Put the token where the widget would: its cf-turnstile-response field, then its callback.
await page.evaluate(
  ({ value, callback }) => {
    for (const input of document.querySelectorAll('[name="cf-turnstile-response"]')) input.value = value;
    if (callback && typeof window[callback] === "function") window[callback](value);
  },
  { value: token, callback: widget.callback },
);
await page.getByRole("button", { name: "Log in" }).click();
await browser.close();