Playwright에서 CAPTCHA 솔버 사용하기

1. 1.

   Node.js 22+, Playwright 및 Chromium 설치

   playwright 패키지와 해당 Chromium 브라우저 바이너리를 설치하세요. 다운로드 가능한 solvethree-sdk-0.1.0.tgz 패키지를 사용해 공식 solvethree JavaScript SDK를 설치하세요. 직접 다운로드하여 설치하는 명령은 Node.js 연동 안내에 있습니다.

2. 2.

   solvethree에서 호스트 이름 설정

   소유한 HTTPS 페이지의 호스트 이름에는 워크스페이스에서 사용할 수 있는 활성 reCAPTCHA 프로필이 있어야 합니다. 예제를 실행하기 전에 콘솔에서 설정하세요. 작업에 호스트 이름과 액션을 보내도 프로필이 생성되지는 않습니다.

3. 3.

   환경 변수 3개 설정

   TARGET_URL에는 소유한 HTTPS 페이지의 전체 URL을, SOLVETHREE_PROXY에는 프록시 URL을, SOLVETHREE_API_KEY에는 워크스페이스 API 키를 설정하세요. 스크립트는 서버 측에서 실행하고, 페이지 JavaScript에 API 키를 넣지 마세요. 예제에서는 login 액션을 사용하므로, 애플리케이션에서 다른 액션을 사용한다면 변경해야 합니다.

4. 4.

   예제 폼 준비

   페이지에는 이름이 g-recaptcha-response인 textarea와 접근 가능한 이름이 정확히 Submit인 버튼이 있어야 합니다. 폼이 다르다면 실행하기 전에 아래에 설명된 전달 방식을 수정하세요.

작업의 프록시와 Playwright의 브라우저 프록시는 별도로 설정됩니다. 브라우저 컨텍스트 프록시가 SDK의 서버 측 API 요청까지 자동으로 라우팅하지는 않습니다. 이 예제는 작업에 프록시 하나를 제공하고, 브라우저의 대상 사이트 트래픽에도 같은 프록시를 사용합니다.

// 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를 사용합니다.

폼에는 작업 ID가 아닌 solution.token을 전달합니다. 토큰 textarea는 화면에 표시되지 않을 수 있으므로, 예제는 해당 필드가 DOM에 연결될 때까지 기다립니다. 토큰을 할당하고 input 이벤트를 발생시킨 다음 제출 버튼을 클릭합니다.

• TARGET_URL은 애플리케이션의 URL입니다. 해결 작업에는 이 URL의 호스트 이름을 site로 전달하고, Playwright는 전체 URL로 이동합니다.
• login은 예제의 액션입니다. 애플리케이션에서 사용하는 액션으로 바꾸세요.
• [name="g-recaptcha-response"]는 예제의 토큰 필드 선택자입니다. 애플리케이션이 다른 필드나 요청 매개변수로 토큰을 받는다면 바꾸세요.
• Submit은 예제 버튼의 접근 가능한 이름입니다. 해당 로케이터를 바꾸거나 애플리케이션의 실제 제출 경로를 사용하세요.
• input 이벤트는 이 데모의 전달 과정에 포함됩니다. 실제 애플리케이션에서는 콜백, 애플리케이션 상태 업데이트, CSRF 값 또는 기존 세션도 필요할 수 있습니다. 모든 경우에 통용되는 토큰 입력 콜백은 없습니다.

다시 비용을 지불하고 해결을 요청하기 전에, Playwright의 요청 및 응답 관찰 기능으로 애플리케이션의 발신 요청을 확인하세요. 작업이 준비되었다는 것은 솔루션을 사용할 수 있다는 뜻이며, 제출이 수락되었는지는 애플리케이션의 응답으로 확인해야 합니다.

제출된 토큰이 없거나 변경되지 않았습니다.

textarea 값뿐 아니라 실제 요청 매개변수를 확인하세요.

다음을 시도해 보세요: 애플리케이션의 실제 제출 경로를 통해 solution.token을 전달하세요. 애플리케이션이 별도의 상태를 기반으로 요청을 구성한다면 데모 필드를 업데이트해도 도움이 되지 않습니다.

요청에 토큰이 포함되어 있지만 거부됩니다.

제출에 사용한 프록시, 사용자 에이전트, 클라이언트 힌트, 대상 호스트 이름 및 액션을 해결 시 사용한 값과 비교하세요. 애플리케이션의 세션 및 CSRF 요구 사항을 확인하세요.

다음을 시도해 보세요: 해결과 제출에 동일한 프록시를 사용하고, 반환된 브라우저 식별 정보를 적용하며, 제출 전에 애플리케이션의 폼 요구 사항을 충족하세요.

브라우저를 열기 전에 스크립트가 실패합니다.

HTTP 요청 오류와 최종적으로 실패한 작업을 구분하세요. 실패한 작업은 errorCode와 error를 확인하세요.

다음을 시도해 보세요: 동일한 입력을 반복해서 제출하지 말고 보고된 입력, 프로필 또는 연결 문제를 수정하세요. SDK는 실패 시 예외를 발생시키므로 토큰 입력 단계로 진행하지 마세요.