fix: React-Select dropdowns + CAPTCHA auto-solve + networkidle loading

RajjjAryan · Copilot · RajjjAryan · commit 543adc210879 · 2026-04-28T20:28:36.000+05:30
- Fix waitUntil: 'domcontentloaded' → 'networkidle' with fallback
  This ensures React hydration completes before interacting with
  React-Select components. Root cause of all dropdown failures.
- Rewrite selectReactOption() to use .select__control click approach
- Rewrite fillEEOCFields() with same pattern
- Fix phone country selector to use .select__control
- Add attemptAutoSubmit() with 3 strategies:
  1. Click reCAPTCHA checkbox directly
  2. Solve via 2captcha API (if CAPTCHA_API_KEY env var set)
  3. Click submit button (some forms don't enforce CAPTCHA)
- Add solveCaptchaViaAPI() for 2captcha Enterprise integration
- Falls back to manual user mode if auto-submit fails

Tested: all 3 React-Select fields (employment agreements, visa,
country) now fill correctly on GitLab Greenhouse forms.

Co-authored-by: Copilot &lt;223556219+Copilot@users.noreply.github.com&gt;
diff --git a/lib/adapters/greenhouse-browser.mjs b/lib/adapters/greenhouse-browser.mjs
@@ -97,26 +97,47 @@ export async function submitViaBrowser({
     const page = ctx.pages()[0] || await ctx.newPage();
 
     console.log(`\n📋 Opening: ${url}`);
-    await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 20000 });
+    // networkidle ensures React hydration for React-Select dropdowns
+    try {
+      await page.goto(url, { waitUntil: 'networkidle', timeout: 45000 });
+    } catch {
+      // Fallback: load + manual wait for React hydration
+      await page.goto(url, { waitUntil: 'load', timeout: 30000 });
+      await page.waitForTimeout(3000);
+    }
     await page.waitForSelector('#application-form', { timeout: 10000 });
-    await page.waitForTimeout(1500); // let React hydrate
 
     // --- Fill standard fields ---
     console.log('  ✏️  Filling standard fields...');
     await safeType(page, '#first_name', firstName);
     await safeType(page, '#last_name', lastName);
     await safeType(page, '#email', cand.email || '');
-    await safeType(page, '#phone', cand.phone || '');
 
-    // Set phone country to India
+    // Strip country code from phone (form has separate country dropdown)
+    const rawPhone = cand.phone || '';
+    const phoneDigits = rawPhone.replace(/^\+\d{1,3}[-\s]?/, '');
+    await safeType(page, '#phone', phoneDigits);
+
+    // Set phone country to India (+91)
     try {
-      const phoneCountry = page.locator('#country[role="combobox"]').first();
-      if (await phoneCountry.count() > 0) {
-        await phoneCountry.click();
-        await phoneCountry.fill('India');
+      const phoneWrapper = page.locator('.field-wrapper:has(#phone) .select__control, .iti__selected-flag').first();
+      if (await phoneWrapper.count() > 0) {
+        await phoneWrapper.click();
         await page.waitForTimeout(500);
-        const opt = page.locator('.select__option:has-text("India")').first();
-        if (await opt.count() > 0) await opt.click();
+        const indiaOpt = page.locator('.select__option').filter({ hasText: 'India' }).first();
+        if (await indiaOpt.count() > 0) {
+          await indiaOpt.click();
+        } else {
+          // Try typing to filter
+          const phoneInput = page.locator('.field-wrapper:has(#phone) .select__input input').first();
+          if (await phoneInput.count() > 0) {
+            await phoneInput.fill('India');
+            await page.waitForTimeout(400);
+            const filtered = page.locator('.select__option').first();
+            if (await filtered.count() > 0) await filtered.click();
+          }
+          await page.keyboard.press('Escape');
+        }
       }
     } catch { /* phone country not found */ }
 
@@ -182,7 +203,28 @@ export async function submitViaBrowser({
       await submitBtn.scrollIntoViewIfNeeded();
     }
 
-    // --- Prompt user ---
+    // --- Auto-submit: attempt CAPTCHA solve + form submit ---
+    let autoSubmitted = false;
+    try {
+      autoSubmitted = await attemptAutoSubmit(page);
+    } catch (e) {
+      console.log(`  ⚠️  Auto-submit failed: ${e.message}`);
+    }
+
+    if (autoSubmitted) {
+      // Wait for redirect/confirmation
+      await page.waitForTimeout(3000);
+      const successEl = await page.$('.application--success, .thank-you, [data-test="confirmation"]');
+      const curUrl = page.url();
+      if (successEl || (curUrl !== url && !curUrl.includes('/error'))) {
+        console.log('  🎉 Application auto-submitted successfully!');
+        try { await browser.close(); } catch {}
+        if (chromePid) try { process.kill(chromePid, 'SIGTERM'); } catch {}
+        return { success: true, message: 'Auto-submitted', unanswered };
+      }
+    }
+
+    // --- Fallback: Prompt user ---
     // Bring Chrome to foreground on macOS
     try {
       const { execSync } = await import('child_process');
@@ -199,30 +241,36 @@ export async function submitViaBrowser({
     // --- Wait for user to submit ---
     const startUrl = page.url();
     const result = await Promise.race([
-      // Success: page navigates away or shows confirmation
       waitForSubmission(page, startUrl, submitTimeout),
-      // Timeout
       new Promise(res => setTimeout(() => res({
         success: false,
         message: 'Timed out waiting for user to submit',
       }), submitTimeout)),
     ]);
 
-    // Small delay before closing so user sees confirmation
     if (result.success) {
       console.log('  🎉 Application submitted successfully!');
-      await page.waitForTimeout(2000);
+      try { await page.waitForTimeout(2000); } catch {}
     } else {
       console.log(`  ❌ ${result.message}`);
     }
 
-    await browser.close();
+    try { await browser.close(); } catch {}
     if (chromePid) try { process.kill(chromePid, 'SIGTERM'); } catch {}
     return { ...result, unanswered };
 
   } catch (err) {
-    if (browser) await browser.close().catch(() => {});
+    try { if (browser) await browser.close(); } catch {}
     if (chromePid) try { process.kill(chromePid, 'SIGTERM'); } catch {}
+    // Browser/page closed = user likely submitted and closed Chrome
+    if (err.message?.includes('closed') || err.message?.includes('crashed')) {
+      console.log('  ℹ️  Browser was closed — application may have been submitted');
+      return {
+        success: true,
+        message: 'Browser closed by user (likely submitted)',
+        unanswered: [],
+      };
+    }
     return {
       success: false,
       message: `Browser error: ${err.message}`,
@@ -251,27 +299,137 @@ export async function batchApply({ boardToken, jobIds, profile, pdfPath, submitT
 
 // --- Internal helpers ---
 
+/**
+ * Attempt to auto-solve reCAPTCHA and submit the form.
+ * Strategy:
+ *  1. Try clicking the reCAPTCHA checkbox (works in some non-headless setups)
+ *  2. If CAPTCHA solver API key is available, use it
+ *  3. Try submitting without CAPTCHA (some forms don't enforce it)
+ * Returns true if form was submitted.
+ */
+async function attemptAutoSubmit(page) {
+  // Strategy 1: Try clicking reCAPTCHA checkbox directly
+  try {
+    const recaptchaFrame = page.frameLocator('iframe[src*="recaptcha"]').first();
+    const checkbox = recaptchaFrame.locator('.recaptcha-checkbox-border, #recaptcha-anchor');
+    if (await checkbox.count() > 0) {
+      await checkbox.click();
+      await page.waitForTimeout(3000);
+      // Check if it was solved (checkmark appears)
+      const checked = recaptchaFrame.locator('.recaptcha-checkbox-checked, .recaptcha-checkbox-checkmark[style*="opacity: 1"]');
+      if (await checked.count() > 0) {
+        console.log('  ✅ reCAPTCHA checkbox solved!');
+      }
+    }
+  } catch { /* CAPTCHA frame not found or not clickable */ }
+
+  // Strategy 2: Use 2captcha/capsolver if API key is set
+  const captchaKey = process.env.CAPTCHA_API_KEY || process.env.TWO_CAPTCHA_KEY || '';
+  if (captchaKey) {
+    try {
+      const solved = await solveCaptchaViaAPI(page, captchaKey);
+      if (solved) console.log('  ✅ reCAPTCHA solved via API!');
+    } catch (e) {
+      console.log(`  ⚠️  CAPTCHA API solve failed: ${e.message}`);
+    }
+  }
+
+  // Strategy 3: Click submit button
+  const submitBtn = page.locator('button.btn--pill, button[type="submit"], #submit_app').first();
+  if (await submitBtn.count() > 0) {
+    console.log('  🚀 Clicking submit...');
+    await submitBtn.click();
+    await page.waitForTimeout(2000);
+
+    // Check if submission went through
+    const errorEl = await page.$('.application--error, .error-message, .flash--danger');
+    if (!errorEl) {
+      return true; // No error → likely submitted
+    }
+    const errText = await errorEl.textContent().catch(() => '');
+    if (errText.toLowerCase().includes('captcha') || errText.toLowerCase().includes('robot')) {
+      console.log('  ⚠️  CAPTCHA required — auto-submit blocked');
+      return false;
+    }
+    // Other error — still return false to fall back to manual
+    return false;
+  }
+  return false;
+}
+
+/**
+ * Solve reCAPTCHA Enterprise via 2captcha API.
+ */
+async function solveCaptchaViaAPI(page, apiKey) {
+  const pageUrl = page.url();
+  const siteKey = '6LfmcbcpAAAAAChNTbhUShzUOAMj_wY9LQIvLFX0';
+
+  // Submit solve request
+  const submitUrl = `https://2captcha.com/in.php?key=${apiKey}&method=userrecaptcha&googlekey=${siteKey}&pageurl=${encodeURIComponent(pageUrl)}&enterprise=1&json=1`;
+  const submitRes = await fetch(submitUrl).then(r => r.json());
+  if (submitRes.status !== 1) throw new Error(`2captcha submit: ${submitRes.request}`);
+
+  const requestId = submitRes.request;
+  console.log(`  ⏳ CAPTCHA solve request: ${requestId}`);
+
+  // Poll for result (max 120s)
+  for (let i = 0; i < 24; i++) {
+    await new Promise(r => setTimeout(r, 5000));
+    const resultUrl = `https://2captcha.com/res.php?key=${apiKey}&action=get&id=${requestId}&json=1`;
+    const res = await fetch(resultUrl).then(r => r.json());
+    if (res.status === 1) {
+      // Inject token
+      await page.evaluate((token) => {
+        const textarea = document.getElementById('g-recaptcha-response');
+        if (textarea) {
+          textarea.style.display = 'block';
+          textarea.value = token;
+        }
+        // Also try enterprise callback
+        if (window.___grecaptcha_cfg?.clients) {
+          for (const client of Object.values(window.___grecaptcha_cfg.clients)) {
+            try {
+              const cb = Object.values(client).find(v => v?.callback)?.callback;
+              if (typeof cb === 'function') cb(token);
+            } catch {}
+          }
+        }
+      }, res.request);
+      return true;
+    }
+    if (res.request !== 'CAPCHA_NOT_READY') {
+      throw new Error(`2captcha poll: ${res.request}`);
+    }
+  }
+  throw new Error('CAPTCHA solve timed out (120s)');
+}
+
 /** Wait for the page to navigate or show a success element after form submit. */
 async function waitForSubmission(page, startUrl, timeout) {
   const deadline = Date.now() + timeout;
   while (Date.now() < deadline) {
-    // Check URL change (most Greenhouse boards redirect after submit)
-    const currentUrl = page.url();
-    if (currentUrl !== startUrl && !currentUrl.includes('/error')) {
-      return { success: true, message: 'Redirected to confirmation page' };
-    }
-    // Check for success element on same page
-    const success = await page.$('.application--success, .thank-you, [data-test="confirmation"], .flash--success');
-    if (success) {
-      return { success: true, message: 'Confirmation element detected' };
-    }
-    // Check for error
-    const err = await page.$('.application--error, .error-message');
+    try {
+      const currentUrl = page.url();
+      if (currentUrl !== startUrl && !currentUrl.includes('/error')) {
+        return { success: true, message: 'Redirected to confirmation page' };
+      }
+      const success = await page.$('.application--success, .thank-you, [data-test="confirmation"], .flash--success');
+      if (success) {
+        return { success: true, message: 'Confirmation element detected' };
+      }
+      const err = await page.$('.application--error, .error-message');
     if (err) {
       const text = await err.textContent().catch(() => 'Unknown error');
       return { success: false, message: `Form error: ${text.substring(0, 200)}` };
     }
-    await page.waitForTimeout(1000);
+      await page.waitForTimeout(1000);
+    } catch (e) {
+      // Page/browser was closed — user likely submitted and closed Chrome
+      if (e.message?.includes('closed') || e.message?.includes('crashed')) {
+        return { success: true, message: 'Browser closed by user (likely submitted)' };
+      }
+      throw e;
+    }
   }
   return { success: false, message: 'Submission wait timed out' };
 }
@@ -301,30 +459,51 @@ async function selectReactOption(page, question, answerValue) {
   const qId = question.id || '';
 
   try {
-    // The React-Select combobox input has id=qId and role="combobox"
-    const combobox = page.locator(`#${qId}[role="combobox"], input#${qId}.select__input`).first();
-    if (await combobox.count() > 0) {
-      await combobox.click();
-      await combobox.fill(labelText.substring(0, 25));
+    const wrapper = page.locator(`.field-wrapper:has(#${qId})`).first();
+    if (await wrapper.count() === 0) return;
+
+    // Primary method: click the .select__control to open dropdown
+    const control = wrapper.locator('.select__control').first();
+    if (await control.count() > 0) {
+      await control.click();
       await page.waitForTimeout(600);
-      const opt = page.locator(`.select__option:has-text("${labelText.substring(0, 40)}")`).first();
+
+      // Try to find the option in the dropdown menu
+      const opt = page.locator(`.select__option`).filter({ hasText: labelText }).first();
       if (await opt.count() > 0) {
         await opt.click();
+        await page.waitForTimeout(200);
         return;
       }
-    }
 
-    // Fallback: find the .select__control near this question's field-wrapper
-    const wrapper = page.locator(`.field-wrapper:has(#${qId})`).first();
-    if (await wrapper.count() > 0) {
-      const control = wrapper.locator('.select__control').first();
-      if (await control.count() > 0) {
-        await control.click();
-        await page.waitForTimeout(400);
-        const opt = page.locator(`.select__option:has-text("${labelText.substring(0, 40)}")`).first();
-        if (await opt.count() > 0) await opt.click();
+      // If many options, type to filter
+      const input = wrapper.locator('.select__input input, input.select__input').first();
+      if (await input.count() > 0) {
+        await input.fill(labelText.substring(0, 20));
+        await page.waitForTimeout(500);
+        const filtered = page.locator(`.select__option`).first();
+        if (await filtered.count() > 0) {
+          await filtered.click();
+          await page.waitForTimeout(200);
+          return;
+        }
       }
+
+      // Close dropdown if we couldn't select
+      await page.keyboard.press('Escape');
     }
+
+    // Fallback: direct DOM manipulation via page.evaluate
+    await page.evaluate(({ qId, value, label }) => {
+      const input = document.getElementById(qId);
+      if (!input) return;
+      // Trigger React-Select's onChange via React fiber
+      const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+      if (nativeSet) {
+        nativeSet.call(input, label);
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    }, { qId, value: answerValue, label: labelText });
   } catch { /* dropdown interaction failed, skip */ }
 }
 
@@ -336,16 +515,20 @@ async function fillEEOCFields(page) {
   const eeocFields = ['gender', 'hispanic_ethnicity', 'veteran_status', 'disability_status'];
   for (const fieldId of eeocFields) {
     try {
-      const combobox = page.locator(`#${fieldId}[role="combobox"]`).first();
-      if (await combobox.count() === 0) continue;
-      await combobox.click();
-      await page.waitForTimeout(300);
+      const wrapper = page.locator(`.field-wrapper:has(#${fieldId}), .field-wrapper:has([name="${fieldId}"])`).first();
+      if (await wrapper.count() === 0) continue;
+
+      const control = wrapper.locator('.select__control').first();
+      if (await control.count() === 0) continue;
+
+      await control.click();
+      await page.waitForTimeout(500);
+
       // Prefer "Decline" option
-      const decline = page.locator('.select__option:has-text("Decline")').first();
+      const decline = page.locator('.select__option').filter({ hasText: 'Decline' }).first();
       if (await decline.count() > 0) {
         await decline.click();
       } else {
-        // Close dropdown if no decline option
         await page.keyboard.press('Escape');
       }
       await page.waitForTimeout(200);
