Node JS Puppeteer 单击没有名称或 ID 的 li 元素

Question

我试图点击一个 li 元素，由于某种原因，它在某个网站上用作尺寸选择器。看起来像这样

它的 html 看起来像这样

每个 <li> 代表一个尺码选项，我尝试了一些方法，但 none 有效。

我的第一次尝试是使用 xpath:

const [size_button] = await page.$x(`//*[contains(., '${data[ii][1]}')]`); // doesn't work
await size_button.click();

我也试过常规的点击动作：

await page.click(`li[data-original-title="Größe in EU: ${data[ii][1]}"]`); // the array contains a specific size, eg. 40.5 like in the li data-original-title field

None 这行得通，我想知道是否有可能用 puppeteer 单击这样的元素...

如果有人想检查该页面，link 是 here

Answer 1

在这种情况下，您可以使用 class="btn btn-sm"

获取所有我认为使用 Vainilla Javascript 在浏览器的控制台中获得预期结果是个好主意，当成功时尝试使用 Puppeteer 达到相同的结果

维尼拉Javascript

 const sizeLinks = document.querySelectorAll('a.btn.btn-sm')
 sizeLinks[1].click()

Puppeteer（完整示例）

  'use strict'

   const puppeteer = require('puppeteer');

  (async () => {
     const baseUrl = 'https://en.afew-store.com/products/air-jordan-4-retro-tour-yellow-dark-blue-grey-white'

     const browser = await puppeteer.launch({ headless: false }); // default is true

     const page = await browser.newPage();
     await page.goto(baseUrl, {
          waitUntil: 'networkidle2',
     });

      await page.waitForTimeout(5000) // Leave extra time for complete the page load (Just to be cautious)

      const sizeLinks = await page.$$('a.btn.btn-sm')
      await sizeLinks[1].click() 

      console.log('Debugging')

      //await browser.close();
      //console.log(`Browser has been closed`);

      //process.exit(0);
})();

参考：

JavaScript querySelector() and querySelectorAll()

Answer 2

这有点棘手。您的选择器工作正常，点击事件也是如此，但我怀疑该事件除了调用 e.preventDefault() 以防止导航到锚点的 href 外什么都不做。

显示尺寸被选中的突出显示实际上是由 <a> 的父 <li> 中的 mousedown 事件应用的，而且子事件似乎尚未应用或者不使用您的 .click 方法冒泡：

您可以按如下方式触发：

const puppeteer = require("puppeteer"); // ^13.5.1

let browser;
(async () => {
  browser = await puppeteer.launch({headless: false});
  const [page] = await browser.pages();
  await page.setRequestInterception(true);
  page.on("request", req => {
    req.resourceType() === "image" ? req.abort() : req.continue();
  });
  const url = "https://en.afew-store.com/products/air-jordan-4-retro-tour-yellow-dark-blue-grey-white";
  await page.goto(url, {waitUntil: "domcontentloaded"});
  const size = "8.5";
  const xp = `//a[contains(@class, "btn-sm") and text()="${size}"]`;
  const sizeButton = await page.waitForXPath(xp);
  await sizeButton.evaluate(btn => {
    btn.closest("li").dispatchEvent(new Event("mousedown"));
    //  ^--- .parentNode is also possible instead of .closest("li")
  });
  await page.waitForTimeout(10000);
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

最后的超时让您有机会查看页面并看到 8.5 尺寸被突出显示。

请注意，我已使您的 xpath 选择器更加精确以避免误报。

Node JS Puppeteer 单击没有名称或 ID 的 li 元素

Node JS Puppeteer click on a li element without name or id

javascript

node.js

puppeteer