Puppeteer：单击网站上的按钮不起作用答案

【问题标题】：Puppeteer: Clicking button on a website doesn't workPuppeteer：单击网站上的按钮不起作用
【发布时间】：2021-05-04 01:47:51
【问题描述】：

我正在尝试为 puppeteer 找到相应的代码来自动按下按钮。

在用户脚本中可以通过

轻松完成

document.getElementsByClassName("details-cart-button btn btn-primary btn-block btn-lg d-flex justify-content-center tp-button ")[0].click();

但是我正在努力使用 puppeteer 复制相同的行为。

到目前为止我尝试了什么：

//Try 1:
await page.click('a[class="details-cart-button btn btn-primary btn-block btn-lg d-flex justify-content-center tp-button "]');

//Try 2:
await page.$eval('a[class^="details-cart-button"]', el => el.click());

//Try3: 
const form = await page.$('id#add-to-cart-form');
await form.evaluate( form => form.click() );

//Try4: 
await Promise.all([
await page.click('#add-to-cart-form > a.details-cart-button.btn.btn-primary.btn-block.btn-lg.d-flex.justify-content-center.tp-button')
]);

这些方法似乎都不起作用，我不知道如何完成它。

谁能给我指出正确的方向？

提前非常感谢！

【问题讨论】：

我没有测试选择器，但代码看起来是正确的。您能否添加更多关于您的测试设置的信息？您确定 puppeteer 正确访问该页面吗？该页面上有一个 Cookies/Tracking 弹出窗口需要处理。屏幕截图很有帮助（例如，await page.screenshot({path: 'test1.png'});）

标签： forms button puppeteer

【解决方案1】：

下面的代码应该可以工作。

const puppeteer = require('puppeteer');

(async ()=>{
  const browser = await puppeteer.launch({headless:false});
  const [page] = await browser.pages();
  await page.goto('https://www.alternate.de/html/product/1685585');

 
  const acceptCookiesSelector='button[class="cookie-submit-all"]';
  await page.waitForSelector(acceptCookiesSelector);
  await page.click(acceptCookiesSelector);

  const buySelector='a[class="details-cart-button btn btn-primary btn-block btn-lg d-flex justify-content-center tp-button "]';
  await page.waitForSelector(buySelector);
  await page.click(buySelector);

})();

我将尝试解释为什么您的代码不起作用。

您在页面上使用的 click 方法滚动查看要单击的元素并使用鼠标左键单击它，在您的情况下，该按钮在视图中，但被accept-cookie 横幅，所以你所要做的就是点击接受 cookie 以摆脱该横幅，然后点击购买按钮，它就会起作用。

您的第一个示例之所以有效，是因为浏览器控制台中的 click 方法与 Puppeteer 上使用的方法不同，而且它之所以有效，是因为它不依赖鼠标来生成点击。

【讨论】：