通过选择器获取动态元素答案

【问题标题】：Getting a Dynamic Element by Selector通过选择器获取动态元素
【发布时间】：2018-12-29 17:29:23
【问题描述】：

我需要点击带有id:#product-6852370-Size的某个网页按钮。

我正在与 Puppeteer 合作，所以通常我会这样做：

page.click('#product-6852370-Size');

棘手的部分是数字6852370 是动态的，并且每次刷新页面时都会发生变化。

所以我需要的是一段代码：

搜索包含product- 和-size 的id。有什么可能会发生这种情况？

【问题讨论】：

标签： javascript html node.js dom puppeteer

【解决方案1】：

您可以使用以下方法匹配id 属性的开头和结尾：

await page.click('[id^="product-"][id$="-Size"]');

或者，更准确地说，您可以使用正则表达式确保id 中间存在一个数字：

await page.evaluate(() => {
  [...document.querySelectorAll('[id^="product-"][id$="-Size"]')].filter(e => e.id.match(/^product-\d+-Size$/g))[0].click();
});

【讨论】：

【解决方案2】：

您可以使用以选择器开头的属性来做到这一点：

page.click('button[id^="product-"]')

【讨论】：