Используйте сервис решения CAPTCHA с Playwright

1. 1.

   Установите Node.js 22+, Playwright и Chromium

   Установите пакет playwright и его браузерный бинарный файл Chromium. Установите официальный JavaScript SDK solvethree из скачиваемого пакета solvethree-sdk-0.1.0.tgz; команда установки по прямой ссылке приведена в инструкциях по интеграции с Node.js.

2. 2.

   Настройте имя хоста в solvethree

   Для имени хоста вашей HTTPS-страницы под вашим управлением должен быть доступен активный профиль reCAPTCHA в вашем рабочем пространстве. Настройте его в консоли перед запуском примера. Передача имени хоста и действия в задаче не создаёт профиль.

3. 3.

   Задайте три переменные окружения

   Задайте для TARGET_URL полный URL вашей HTTPS-страницы под вашим управлением, для SOLVETHREE_PROXY — URL прокси, а для SOLVETHREE_API_KEY — API-ключ рабочего пространства. Запускайте скрипт на сервере; не помещайте API-ключ в JavaScript страницы. В примере используется действие login; измените его, если ваше приложение использует другое действие.

4. 4.

   Подготовьте форму для примера

   Страница должна содержать textarea с именем g-recaptcha-response и кнопку, доступное имя которой в точности равно Submit. Если ваша форма отличается, перед запуском адаптируйте описанную ниже передачу данных.

Прокси задачи и прокси браузера Playwright настраиваются отдельно. Прокси контекста браузера не направляет автоматически серверные API-запросы SDK через себя. В этом примере один прокси передаётся в задачу и повторно используется для трафика браузера к целевому сайту.

// Install playwright and the official solvethree SDK first.
import { chromium } from 'playwright';
import { Solvethree } from '@solvethree/sdk';

const target = new URL(process.env.TARGET_URL); // Your configured HTTPS page.
const proxy = new URL(process.env.SOLVETHREE_PROXY);
const client = new Solvethree({ apiKey: process.env.SOLVETHREE_API_KEY });
const result = await client.solve({
  site: target.hostname, action: 'login', proxy: process.env.SOLVETHREE_PROXY,
});
const browser = await chromium.launch();
try {
  const context = await browser.newContext({
    proxy: {
      server: `${proxy.protocol}//${proxy.host}`,
      username: decodeURIComponent(proxy.username),
      password: decodeURIComponent(proxy.password),
    },
    userAgent: result.solution.userAgent,
    extraHTTPHeaders: { 'sec-ch-ua': result.solution.secChUa },
  });
  const page = await context.newPage();
  await page.goto(target.href);
  // This example form has this field and a button named Submit.
  // Adapt the selectors/callback to your own application's form contract.
  await page.locator('[name="g-recaptcha-response"]').waitFor({ state: 'attached' });
  await page.locator('[name="g-recaptcha-response"]').evaluate((field, token) => {
    field.value = token;
    field.dispatchEvent(new Event('input', { bubbles: true }));
  }, result.solution.token);
  await Promise.all([
    page.waitForResponse(response =>
      response.request().method() === 'POST' &&
      new URL(response.url()).origin === target.origin),
    page.getByRole('button', { name: 'Submit', exact: true }).click(),
  ]);
  // Check your application's success response here.
} finally {
  await browser.close();
}

solve создаёт задачу один раз и опрашивает её состояние до готовности либо выбрасывает исключение. Браузер запускается только после успешного завершения этого вызова. Его контекст использует исходный прокси, включая учётные данные в URL-кодировке, а также полученные solution.userAgent и solution.secChUa.

Форма получает solution.token, а не ID задачи. Пример ожидает появления поля в DOM, поскольку textarea для токена не обязательно должна быть видимой. Он присваивает токен, отправляет событие ввода, затем нажимает кнопку отправки.

• TARGET_URL относится к вашему приложению. Задача сервиса решения получает его имя хоста в поле site; Playwright переходит по полному URL.
• login — действие в примере. Замените его действием, которое использует ваше приложение.
• [name="g-recaptcha-response"] — селектор поля токена в примере. Замените его, если ваше приложение ожидает токен в другом поле или параметре запроса.
• Submit — доступное имя кнопки в примере. Замените этот локатор или используйте фактический способ отправки данных в вашем приложении.
• Событие ввода — часть передачи данных в этом демонстрационном примере. В реальном приложении также могут потребоваться обратный вызов, обновление состояния приложения, значение CSRF или существующая сессия. Универсального обратного вызова для заполнения токена нет.

Прежде чем оплачивать ещё одно решение, изучите исходящий запрос приложения с помощью наблюдения за запросами и ответами в Playwright. Готовая задача означает, что решение доступно; ответ приложения показывает, была ли принята отправка.

Отправляемый токен отсутствует или не изменился.

Проверьте фактический параметр запроса, а не только значение textarea.

Попробуйте: Передавайте solution.token через фактический механизм отправки данных приложения. Обновление демонстрационного поля не поможет, если приложение формирует запрос из отдельного состояния.

Запрос содержит токен, но отклоняется.

Сравните прокси, user agent, client hints, целевое имя хоста и действие при отправке с параметрами решения. Проверьте требования приложения к сессии и CSRF.

Попробуйте: Используйте один и тот же прокси для решения и отправки, применяйте полученные параметры идентификации браузера и выполняйте требования формы приложения перед отправкой.

Скрипт завершается с ошибкой до открытия браузера.

Отличайте ошибку HTTP-запроса от окончательного сбоя задачи. Для неудачной задачи проверьте errorCode и error.

Попробуйте: Исправьте указанную проблему с входными данными, профилем или подключением вместо повторной отправки неизменённых данных. При сбое SDK выбрасывает исключение; не переходите к заполнению токена.