استخدام أداة حل 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 إلى عنوان URL الكامل لصفحة HTTPS التي تملكها، وSOLVETHREE_PROXY إلى عنوان URL للوكيل، وSOLVETHREE_API_KEY إلى مفتاح API لمساحة عملك. شغّل السكربت على الخادم؛ ولا تضع مفتاح API في JavaScript الخاص بالصفحة. يستخدم المثال الإجراء login، ويجب تغييره إذا كان تطبيقك يستخدم إجراءً مختلفًا.

4. 4.

   توفير نموذج المثال

   يجب أن تحتوي الصفحة على حقل نص متعدد الأسطر باسم 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، وليس معرّف المهمة. ينتظر المثال إرفاق الحقل بالصفحة لأن حقل نص الرمز لا يلزم أن يكون مرئيًا. يعيّن الرمز، ويرسل حدث إدخال، ثم ينقر على زر الإرسال.

• يشير TARGET_URL إلى عنوان في تطبيقك. تتلقى مهمة الحل اسم مضيفه في site؛ وينتقل Playwright إلى عنوان URL الكامل.
• login هو إجراء المثال. استبدله بالإجراء الذي يستخدمه تطبيقك.
• [name="g-recaptcha-response"] هو محدِّد حقل الرمز في المثال. استبدله إذا كان تطبيقك يتوقع الرمز في حقل آخر أو معلمة طلب أخرى.
• Submit هو الاسم الميسّر لزر المثال. استبدل محدِّد العنصر هذا، أو استخدم مسار الإرسال الفعلي في تطبيقك.
• حدث الإدخال جزء من آلية التمرير في هذا المثال التوضيحي. قد يتطلب التطبيق الفعلي أيضًا دالة رد نداء، أو تحديثًا لحالة التطبيق، أو قيمة CSRF، أو جلسة قائمة. لا توجد دالة رد نداء عامة لملء الرمز.

قبل الدفع مقابل حل آخر، افحص طلب التطبيق الصادر باستخدام مراقبة الطلبات والاستجابات في Playwright. تعني جاهزية المهمة أن الحل متاح؛ أما استجابة التطبيق فتوضح ما إذا كان الإرسال قد قُبل.

الرمز المُرسل مفقود أو لم يتغير.

افحص معلمة الطلب الفعلية، وليس قيمة حقل النص فقط.

جرّب هذا: مرّر solution.token عبر مسار الإرسال الفعلي في التطبيق. لن يفيد تحديث حقل المثال التوضيحي إذا كان التطبيق ينشئ طلبه من حالة منفصلة.

يحتوي الطلب على الرمز، لكنه يُرفض.

قارن الوكيل ووكيل المستخدم وتلميحات العميل واسم المضيف المستهدف والإجراء المستخدمة في الإرسال بتلك المستخدمة في الحل. تحقق من متطلبات الجلسة وCSRF في التطبيق.

جرّب هذا: استخدم الوكيل نفسه للحل والإرسال، وطبّق هوية المتصفح المُعادة، واستوفِ متطلبات نموذج التطبيق قبل الإرسال.

يفشل السكربت قبل فتح المتصفح.

ميّز بين خطأ طلب HTTP ومهمة انتهت بالفشل. إذا فشلت المهمة، فافحص errorCode وerror.

جرّب هذا: صحّح مشكلة المدخلات أو ملف التعريف أو الاتصال المُبلّغ عنها بدلًا من تكرار إرسال المدخلات دون تغيير. يطرح SDK استثناءً عند الفشل؛ فلا تتابع إلى خطوة ملء الرمز.