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

来自docs：

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

木偶获取数据属性包含选择器

1 个答案: