使用Puppeteer自动化HackerRank时无法选中指定复选框求助

我尝试用Puppeteer实现HackerRank挑战的自动化提交，点击“解决挑战”按钮进入下一页后，无法选中名为“Text against custom input”的复选框元素。

问题代码 #

const puppeteer = require("puppeteer");
const url = "https://www.hackerrank.com/auth/login";

(async function () {
  try {
    const browserInstance = await puppeteer.launch({
      headless: false,
      slowMo: true,
      args: ["--start-fullscreen"],
      defaultViewport: null,
    });
    let newTab = await browserInstance.newPage();
    await newTab.goto(url);
    await newTab.waitForSelector("#input-1");
    await newTab.click("#input-1");
    let email = "some-email.com";
    await newTab.type("#input-1", email, {
      delay: 50,
    });
    let password = "some-password";
    await newTab.waitForSelector("#input-2");
    await newTab.click("#input-2");
    await newTab.type("#input-2", password, {
      delay: 50,
    });
    await newTab.click('button[data-analytics="LoginPassword"]', { delay: 50 });
    await waitAndClick('a[data-attr1="algorithms"]', newTab);
    await waitAndClick('input[value="warmup', newTab);
    let allChallenges = await newTab.$$(
      ".ui-btn.ui-btn-normal.primary-cta.ui-btn-line-primary.ui-btn-styled",
      { delay: 50 }
    );
    await questionSolver(allChallenges[0], newTab);
    console.log("Total Questions", allChallenges.length);
  } catch (error) {
    console.log(error);
  }
})();
async function questionSolver(challenge, page) {
  await challenge.click();
  let inputIsClicked = await waitAndClick(".checkbox-input", page);
  return inputIsClicked;
}

async function waitAndClick(selector, cpage) {
  await cpage.waitForSelector(selector);
  let selectorClicked = cpage.click(selector);
  return selectorClicked;
}

问题截图 #

解决方法 #

1. 处理iframe嵌套 #

HackerRank的挑战页面常把代码输入相关区域放在iframe内，复选框可能也在其中，需要先切换到对应iframe再操作：
修改questionSolver函数：

async function questionSolver(challenge, page) {
  await challenge.click();
  // 等待iframe加载并切换到目标iframe
  await page.waitForSelector('iframe');
  const targetFrame = await page.frames().find(frame => frame.url().includes("hackerrank"));
  await targetFrame.waitForSelector('.checkbox-input');
  await targetFrame.click('.checkbox-input');
}

2. 使用更精确的选择器或强制点击 #

如果复选框不在iframe，尝试用更精准的选择器定位，或者强制点击元素：

async function waitAndClick(selector, cpage) {
  await cpage.waitForSelector(selector, { visible: true });
  // 强制点击，忽略元素是否处于可交互状态
  await cpage.click(selector, { force: true });
}

也可以通过XPath定位包含目标文本的复选框：

const checkboxXPath = '//label[contains(text(), "Text against custom input")]/input[@type="checkbox"]';
await page.waitForXPath(checkboxXPath);
const [checkbox] = await page.$x(checkboxXPath);
await checkbox.click();

3. 等待页面完全加载 #

点击挑战后页面可能有异步资源加载，增加页面等待逻辑确保元素加载完成：

async function questionSolver(challenge, page) {
  await challenge.click();
  // 等待页面导航完成，网络进入空闲状态
  await page.waitForNavigation({ waitUntil: 'networkidle2' });
  let inputIsClicked = await waitAndClick(".checkbox-input", page);
  return inputIsClicked;
}

内容的提问来源于stack exchange，提问作者Zainab Shaikh