时间戳

首页 > 解决方案 > 如何在 Javascript puppeteer 中选择自动生成类？

javascript - 如何在 Javascript puppeteer 中选择自动生成类？

问题描述

我正在尝试在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();
})();

标签： javascriptcssnode.jscss-selectorspuppeteer

解决方案

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

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

此选择器将针对所有类与“通道名称-”部分匹配的 div 元素。

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

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

推荐阅读