如何在 Javascript puppeteer 中选择自动生成类？答案

【问题标题】：How to Select Auto-Generate Classes in Javascript puppeteer?如何在 Javascript puppeteer 中选择自动生成类？
【发布时间】：2021-06-26 16:15:13
【问题描述】：

我正在尝试在http://tiktok.com/ 上使用 puppeteer 选择“使用电话/电子邮件/用户名”（您可以在那里查看 HTML）（如下所示）

起初我以为我可以做到

await page.$eval( '.channel-name-2qzLW', form => form.click() );

但问题是 puppeteer 无法找到具有该类的元素，因为我认为 puppeteer 浏览器具有不同的元素，因为通道名称是自动生成的。结果，我尝试找出如何选择带有“使用电话/电子邮件/用户名”文本的元素，因为这是特定的，但我遇到了下面列出的问题。

我尝试选择包含文本元素的 div：

await page.$eval( 'div["Use phone / email / username"]', form => form.click() );

但我收到一条错误消息

Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': 'div["Use phone or email"]' is not a valid selector.

我尝试查看 https://www.w3schools.com/cssref/css_selectors.asp 和 https://www.checklyhq.com/learn/headless/basics-selectors/ 以了解如何获取元素，但我仍然不确定。

（当前代码）：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // Goes to tiktok website
  await page.goto('https://tiktok.com');
  // Clicks on Upload text
  await page.$eval( '.upload-text', form => form.click() );
  // issue occurs here as it can't find this element
  await page.$eval( '.channel-name-2qzLW', form => form.click() );
  // screenshots the webpage so I can see what it sees
  await page.screenshot({ path: 'browserView.png' });
  await browser.close();
})();

【问题讨论】：

标签： javascript css node.js css-selectors puppeteer

【解决方案1】：

由于类是属性，所以可以使用通配符选择器。

div[class*="channel-name-"]

此选择器将定位所有类与“channel-name-”部分匹配的所有 div 元素。

然而，我想指出，依赖通配符选择器并不是最佳解决方案，因为如果定义不正确，它可能会返回不正确的结果。此外，即使今天的机器速度足够快且足够强大，可以完成这项微小的额外工作，但它仍然不是一种非常有效的解决方案，尤其是对于大而复杂的页面。

所以你可以使用它，但要多注意。

【讨论】：