我无法让 puppeteer 单击单选按钮，未找到错误单选元素或复选框未选中

Question

我要点击的项目是针对澳大利亚的收银台。为了完成结帐过程，您必须单击下图中所示的框之一：illustration of object I am trying to click 我留下的错误是该框未选中因此阻碍了我的结帐过程，即使 puppeteer 能够找到元素。

这里是元素的代码：

<label for="delivery-home-delivery" role="radio" aria-checked="false" tabindex="0" aria-label="select Home Delivery" class="DeliveryItem"><div class="CheckMark"></div><p class="Heading Heading--collapse Heading--h3 Heading--thin">Home Delivery</p><p class="Paragraph Paragraph--collapse Paragraph--tiny">$9 standard delivery.<br>Free for orders over $45</p></label> <input type="radio" class="u-visuallyHidden" id="delivery-home-delivery" name="delivery" tabindex="-1">

这是我的 JS 代码：

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://www.target.com.au/p/optus-oppo-a53-mobile-phone/65110003', {
    waitUntil: 'networkidle0',
  });
  const [button] = await page.$$("#addToCartForm > div.prod-buttons-wrapper > div > div > button");
  let buttonclick = 1;
  while(buttonclick==1)
  {
  if (button) {
      console.log("element found");
      await page.click("#addToCartForm > div.prod-buttons-wrapper > div > div > button");
      break
  }
  
      await page.reload({waitUntil: ['networkidle0']});
      console.log("element not found");
      console.log(buttonclick);
      const [overlay] = await page.$x("/html/body/div[5]");
      if (overlay) { await page.mouse.click(10, 20, {button: 'left'});}
      try{
        await page.click("#addToCartForm > div.prod-buttons-wrapper > div > div > button");
        break;}
      finally{
        buttonclick = 2;}
}
  await page.goto("https://www.target.com.au/spc/order", {waitUntil: 'networkidle0',});
  
  const [emailbox] = await page.$x('//*[@id="CustomerEmailSearch.j_username"]');
  if(emailbox){

    await emailbox.type('gamingbradda01@gmail.com');
    console.log("emailbox found");
  }
  else{
      console.log("im sorry pupeteer cant see that");

  }
await page.click('#continue');
const homedeliv = await page.waitForSelector('#delivery-home-delivery');
if (homedeliv){console.log("we found home delivery item in checkout page");}
await page.click("#delivery-home-delivery");
const frame = await page.waitForSelector("body > div.CheckoutPage > div > div.Root > div > div.Page > div > div > section > span:nth-child(1) > div > div > div > section > div.DeliveryModeSelection.is-unselected > label:nth-child(3)");
//^This is one method I tested which finds the x and y coordinate of element than later clicks on it.
const rect = await page.evaluate(el => {
    const {x, y} = el.getBoundingClientRect();
    return {x, y};
  }, frame);
  console.log(rect.x);
  console.log(rect.y);
  await page.mouse.click(rect.x, rect.y, {button:'left', clickCount:2});
  console.log("click by element location found using puppet no work");
  await page.mouse.click(500, 450, {button:'left', clickCount: 2});
  await page.mouse.move(30, 20);


  
})();

Answer 1

您非常接近参与的结果，请记住 waitForSelector 使用查询选择器返回 HtmlElement 对象。您需要将此对象用于单击方法：

await page.click('#continue');
const homedeliv = await page.waitForSelector('#delivery-home-delivery');
if (homedeliv) {
    console.log("we found home delivery item in checkout page");
}
await homedeliv.click(); // Here you use homedeliv variable

尝试为所有废代码保留此逻辑，我还建议您在脚本中添加一些延迟，例如导航延迟或单击延迟以像人一样行事。有些网站有反机器人系统，如果它检测到您身边的奇怪行为，可以禁止您的 IP。

对于您的 rect 方法，您应该能够使用查询选择器来双击所需的单选按钮，您通常不希望自己移动光标。

您始终可以通过浏览器检查器验证这一点，一些提示：

• 尝试冻结您的页面，以便捕获所需的 html 元素
• 尝试始终使用查询选择器或 xpath