如何使用 puppeteer 在 Javascript 中选择一个只有一个类的 div答案

【问题标题】：How can I select a div in Javascript with only a class using puppeteer如何使用 puppeteer 在 Javascript 中选择一个只有一个类的 div
【发布时间】：2022-01-03 13:11:47
【问题描述】：

我正在尝试设置一个机器人，该机器人将单击项目网页上的按钮。现在这可以在其他网页上正常工作，但是，在我想使用它的页面上，开发人员显然认为几乎没有 id 将是一个绝妙的主意。因此，我一直在试图弄清楚如何按类选择 div（它拥有的唯一可用选择器）。是的，我尝试过使用 Xpath：两次都返回 null 或错误。如果它在另一个网页上，这是工作代码：

const puppeteer = require('puppeteer');

async function scrapeProduct(url) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  await page.click('#someid');

  await page.screenshot({ 
    path: "success.png", 
    fullPage: true
  });
  await browser.close();
}

scrapeProduct('someurl');

这是我测试 Xpath 的工作，但这又不适合我想做的事情（不确定这是否是正确的方式 - 似乎有点迂回，我不知道你会如何点击它）：


async function scrapeProduct(url) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  const [el] = await page.$x('//*[@id="btt-btn"]');
  const classID = await el.getProperty('textContent');
  const classIDText = await classID.jsonValue();
  console.log(classIDText);

  await page.screenshot({ 
    path: "success.png", 
    fullPage: true
  });
  await browser.close();
}

scrapeProduct('someurl');

我得到的错误是关于没有找到该选择器的节点，在这种情况下是 '.DropdownSelectInput__SelectBoxText-sc-1ssquc7-0 bnoarO'

有人有什么想法吗？我尝试了多种不同的选择器和方法，但不知道该怎么做。

【问题讨论】：

我会尝试在 Chrome 中使用 CSS Selector 选项：stackoverflow.com/questions/4500572/…
您能分享您正在使用的页面/DOM/HTML 标记吗？否则很难提出建议。您正在尝试制作什么样的应用程序来为问题添加上下文？按钮点击器是否需要在任何网页、网页的某些子集或特定网页上工作？

标签： javascript click puppeteer google-chrome-headless

【解决方案1】：

我之前也遇到过类似的问题。选择 div 的最佳方法如下：

在同一个 HTML 树中，选择一个具有特定属性的元素。它可以是属性名称，例如 data-at 或 id 或任何在每次加载时都不会改变的名称。一旦您设法选择了该元素，您就可以使用 element.parentNode 或 node.lastChild 或 node.firstChild 等在树中上下移动。这是唯一的方法。您尝试操作的网站可能使用了生成类的东西。所以，没有人给那个类名。

【讨论】：