Puppeteer 获取数据属性包含选择器

Question

本地主机上的标记

<ul>
 <li>
  <button data-action-trigger="btn1">Button text</button>
 </li>
</ul>

我需要btn1通过选择它及其data-attribute值来单击btn ，我在console.log

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.setViewport({width: 1440, height: 1200})
  await page.goto('http://localhost:3000/index.html')

  const data = await page.content();

  const btnAction = await page.evaluate(
      () => document.querySelector('[data-action-trigger*="btn1"]'))

  console.log(btnAction) //{}

  await browser.close();
})();

我可以选择 Chrome devTools 元素作为

document.querySelector(`[data-action-trigger*="btn1"]`)
<button data-action-trigger="btn1">Button text</button>

Answer 1

来自文档：

page.evaluate 和 page.evaluateHandle 之间的唯一区别是 page.evaluateHandle 返回页内对象 (JSHandle)。

由于它返回页内对象，因此您需要使用evaluateHandle而不是evaluate.

await page.waitForSelector('[data-action-trigger*="btn1"]');
const btnAction = await page.evaluateHandle(() => document.querySelector('[data-action-trigger*="btn1"]'))

或者，您可以使用page.$：

await page.waitForSelector('[data-action-trigger*="btn1"]');
const btnAction = await page.$('[data-action-trigger*="btn1"]');