给定一个 ElementHandle，如何找到与之关联的 HTML ID答案

【问题标题】：Given an ElementHandle, how to find the HTML ID associated with it给定一个 ElementHandle，如何找到与之关联的 HTML ID
【发布时间】：2021-10-10 21:22:41
【问题描述】：

在 Playwright 中，给定一个有效的 ElementHandle 对象，我如何找到与该元素关联的 HTML ID？

【问题讨论】：

我不确定我是否理解正确：你想要元素句柄的 id 属性吗？
是的，这正是我的意思。给定我从page.$$(...) 获得的句柄，我如何获得句柄的“id”属性？

标签： node.js playwright

【解决方案1】：

您可以像这样使用page.evaluate 检索它：

const elemHandle = await page.$('h1')

const idAttr = await page.evaluate(el => el.id, elemHandle)
console.log(idAttr)

当然，不能保证任何元素都会有id。

（注意：我不知道以下方法是否也适用于 Playwright，但它肯定适用于 puppeteer。）

如果您不限于 id 属性，您可以检索页面内元素的唯一选择器，例如：

console.log(elemHandle._remoteObject)

{
  type: 'object',
  subtype: 'node',
  className: 'HTMLHeadingElement',
  description: 'h1.fs-headline1.ow-break-word.mb8.flex--item.fl1',
  objectId: '5611379091209172520.3.2'
}

description 的值是一个有效的选择器。

【讨论】：

await page.evaluate(el => el.id, elemHandle) 非常适合获得id。 _remoteObject 在 Playwright 中似乎不起作用。
evaluate 效果很好，但还有另一种方法。您可以改用getProperty 方法。使用const elementPropId = await element.getProperty("id") 获取属性id。然后，使用const elementId = await elementPropId.jsonValue() 访问它的值。 elementId 将包含 id。对于class，您可以使用await element.getProperty("className")。 [目前使用 Puppeteer v10.4.0]