Puppeteer Get data 属性包含选择器

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();
})();

我能够选择元素 铬开发工具 作为

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"]');