使用Puppeteer点击加入购物车按钮无效，寻求技术帮助

问题描述 #

我编写了以下Puppeteer代码，尝试实现商品加入购物车的功能，但点击操作无效。我本想等页面完全加载后再执行点击，但目前的逻辑没起作用，有人能帮我解决吗？

const puppeteer = require('puppeteer'); 
(async () => { 
  const browser = await puppeteer.launch({ headless : false}); 
  const page = await browser.newPage(); 
  await page.goto('https://www.thegoodlifespace.com/adidas-by-pharrell-williams-superstar-primeknit-s42928.html'); 
  await page.waitForNavigation(); 
  await page.click("#product-addtocart-button"); 
})(); 

问题分析与解决办法 #

首先得指出：你现在用的page.waitForNavigation()逻辑有问题——page.goto()本身默认就会等待页面load事件完成，之后再调用waitForNavigation()会让代码卡住（因为没有新的导航动作触发），这就是点击操作根本没执行的核心原因之一。

下面给你几个实用的调整方案，按需选择：

方案1：等待元素可见且可点击后操作 #

这是最稳妥的方式，直接确保目标按钮已经完全加载好、可以交互：

const puppeteer = require('puppeteer'); 
(async () => { 
  const browser = await puppeteer.launch({ headless: false }); 
  const page = await browser.newPage(); 
  // 优化加载等待逻辑，用networkidle2可以更快确认页面资源加载完成
  await page.goto('https://www.thegoodlifespace.com/adidas-by-pharrell-williams-superstar-primeknit-s42928.html', {
    waitUntil: 'networkidle2'
  }); 
  // 等待按钮可见且可点击，超时时间设为10秒防止无限等待
  await page.waitForSelector("#product-addtocart-button", { visible: true, timeout: 10000 });
  await page.click("#product-addtocart-button"); 

  // 要是点击按钮后会触发页面跳转，可以用Promise.all同时等待点击和导航：
  // await Promise.all([
  //   page.click("#product-addtocart-button"),
  //   page.waitForNavigation()
  // ]);
})(); 

方案2：先处理可能的遮挡弹窗 #

很多电商网站会有Cookie授权弹窗、促销弹窗挡住加入购物车按钮，这时候得先关掉这些弹窗：

const puppeteer = require('puppeteer'); 
(async () => { 
  const browser = await puppeteer.launch({ headless: false }); 
  const page = await browser.newPage(); 
  await page.goto('https://www.thegoodlifespace.com/adidas-by-pharrell-williams-superstar-primeknit-s42928.html', { waitUntil: 'networkidle2' }); 

  // 尝试关闭Cookie弹窗（如果网站有这个弹窗，替换成实际的关闭按钮选择器）
  try {
    await page.waitForSelector("#accept-cookies", { visible: true, timeout: 5000 });
    await page.click("#accept-cookies");
  } catch (e) {
    console.log("没有检测到需要处理的弹窗");
  }

  // 再等待并点击加入购物车按钮
  await page.waitForSelector("#product-addtocart-button", { visible: true, timeout: 10000 });
  await page.click("#product-addtocart-button"); 
})(); 

方案3：直接在页面上下文触发点击 #

如果元素已经存在但点击没反应，可能是事件绑定的问题，可以尝试直接调用元素原生的click()方法：

const puppeteer = require('puppeteer'); 
(async () => { 
  const browser = await puppeteer.launch({ headless: false }); 
  const page = await browser.newPage(); 
  await page.goto('https://www.thegoodlifespace.com/adidas-by-pharrell-williams-superstar-primeknit-s42928.html', { waitUntil: 'networkidle2' }); 

  await page.waitForSelector("#product-addtocart-button", { visible: true, timeout: 10000 });
  // 在页面的JS上下文里直接触发点击
  await page.evaluate(() => {
    document.querySelector("#product-addtocart-button").click();
  });
})(); 

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