שימוש בפותר CAPTCHA עם Playwright

1. 1.

   התקנת Node.js 22+, Playwright ו-Chromium

   התקינו את החבילה playwright ואת קובץ ההפעלה של דפדפן Chromium שלה. התקינו את ה-SDK הרשמי של solvethree ל-JavaScript באמצעות החבילה להורדה solvethree-sdk-0.1.0.tgz; הוראות השילוב עם Node.js כוללות את פקודת ההתקנה שלה בהורדה ישירה.

2. 2.

   הגדרת שם המארח ב-solvethree

   לשם המארח של דף ה-HTTPS שבבעלותכם חייב להיות פרופיל reCAPTCHA פעיל שזמין לסביבת העבודה שלכם. הגדירו זאת במסוף לפני הרצת הדוגמה. שליחת שם מארח ופעולה במשימה אינה יוצרת את הפרופיל.

3. 3.

   הגדרת שלושת משתני הסביבה

   הגדירו את TARGET_URL לכתובת המלאה של דף ה-HTTPS שבבעלותכם, את SOLVETHREE_PROXY לכתובת הפרוקסי ואת 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, ולא את מזהה המשימה. הדוגמה ממתינה לצירוף השדה ל-DOM, משום ש-textarea של טוקן אינו חייב להיות גלוי. היא מציבה את הטוקן, משגרת אירוע קלט ואז לוחצת על Submit.

• TARGET_URL שייך ליישום שלכם. משימת הפתרון מקבלת את שם המארח שלו בתור site; Playwright מנווט לכתובת המלאה.
• login היא הפעולה בדוגמה. החליפו אותה בפעולה שבה משתמש היישום שלכם.
• [name="g-recaptcha-response"] הוא הבורר של שדה הטוקן בדוגמה. החליפו אותו אם היישום שלכם מצפה לטוקן בשדה אחר או בפרמטר אחר של הבקשה.
• Submit הוא השם הנגיש של הכפתור בדוגמה. החליפו את המאתר הזה, או השתמשו בנתיב השליחה בפועל של היישום שלכם.
• אירוע הקלט הוא חלק ממנגנון ההעברה בהדגמה הזו. יישום אמיתי עשוי לדרוש גם פונקציית callback, עדכון של מצב היישום, ערך CSRF או סשן קיים. אין פונקציית callback אוניברסלית למילוי טוקן.

לפני שתשלמו על פתרון נוסף, בדקו את הבקשה היוצאת של היישום באמצעות ניטור הבקשות והתגובות של Playwright. משימה מוכנה פירושה שפתרון זמין; תגובת היישום מבהירה אם השליחה התקבלה.

הטוקן שנשלח חסר או לא השתנה.

בדקו את הפרמטר שנשלח בפועל בבקשה, ולא רק את הערך של ה-textarea.

כדאי לנסות: העבירו את solution.token דרך נתיב השליחה האמיתי של היישום. עדכון השדה של ההדגמה לא יעזור אם היישום בונה את הבקשה שלו ממצב נפרד.

הבקשה מכילה את הטוקן, אך נדחית.

השוו את הפרוקסי, סוכן המשתמש, רמזי הלקוח, שם מארח היעד והפעולה של השליחה לאלה ששימשו לפתרון. בדקו את דרישות הסשן וה-CSRF של היישום.

כדאי לנסות: השתמשו באותו פרוקסי לפתרון ולשליחה, החילו את זהות הדפדפן שהוחזרה ועמדו בדרישות הטופס של היישום לפני השליחה.

הסקריפט נכשל לפני פתיחת הדפדפן.

הבחינו בין שגיאת בקשת HTTP לבין משימה שהסתיימה בכישלון. במשימה שנכשלה, בדקו את errorCode ואת error.

כדאי לנסות: תקנו את בעיית הקלט, הפרופיל או הקישוריות שדווחה, במקום לשלוח שוב ושוב את אותם נתונים. ה-SDK זורק חריגה במקרה של כישלון; אל תמשיכו לשלב מילוי הטוקן.