使用 Puppeteer 时如何获取 ElementHandle 的类名？答案

【问题标题】：How do I get the ElementHandle's class name when using Puppeteer?使用 Puppeteer 时如何获取 ElementHandle 的类名？
【发布时间】：2018-10-28 23:45:51
【问题描述】：

我正在尝试使用 Puppeteer 获取 ElementHandle 的类名……这可能吗？我使用了错误的方法吗？在这个 jsBin 是我的代码的一部分，所以你可以理解我想要实现的目标。

CriticalCssPlugin.prototype.load = function( page, src ) {
  return page.goto( src, { waitUntil: 'networkidle2' } )
    .then( () => {
      return page
        .$$( '*' )
        .then( elements => {
          return Promise.all( elements.map( element => {
            return element.boundingBox()
          } ) )
            .then( positions => {
              let visible = positions.filter( ( rect, index ) => {
                if ( !rect ) {
                  return rect
                }

                rect.element = elements[ index ]

                return this.isAnyPartOfElementInViewport( rect, page.viewport() )
              } )

              this.getClasses( visible )
            } )
        } )
    } )
}

CriticalCssPlugin.prototype.getClasses = function( visibles ) {
  Promise.all( visibles.map( visible => {
    return visible.element.getProperty( '' )
  } ) )
    .then( classes => {
      console.log(classes);
    } )
}

CriticalCssPlugin.prototype.isAnyPartOfElementInViewport = function( rect, viewport ) {
  const windowHeight = viewport.height
  const windowWidth = viewport.width
  const vertInView = ( rect.y <= windowHeight ) && ( ( rect.y + rect.height ) >= 0 )
  const horInView = ( rect.x <= windowWidth ) && ( ( rect.x + rect.width ) >= 0 )

  return ( vertInView && horInView )
}

https://jsbin.com/kuzejoluji/edit?js,output

谢谢你：D

【问题讨论】：

标签： puppeteer

【解决方案1】：

这就是我所做的：

let posts = await page.$$(".postContainer .upvote");

for (let i = 0; i < posts.length; i++) {
// log class name
        console.log(await (await posts[i].getProperty('className')).jsonValue());

// click upvotes on posts
        await codes[i].click();
    }

【讨论】：

【解决方案2】：

你可以得到元素变量并像这样使用评估函数：

const element = await page.$(".some-class"); // for ids you can write "#some-id"
const className = await page.evaluate(el => el.className, element);
console.log('className', className) // here you can get the class name

【讨论】：

【解决方案3】：

jimmyjoy 的回答是对的，但这可能有助于其他人使用 elementHandle

  page.$(el) // This grabs the element (returns a elementHandle)
    .then((el) => el.getProperty("className")) // Returns a jsHandle of that property
    .then((cn) => cn.jsonValue()) // This converts the className jsHandle to a space delimitedstring       
    .then((classNameString) => classNameString.split(" ") // Splits into array
    .then((x) => console.log(x)

这将记录一个类数组

注意：当我尝试在 jsonValue() 末尾执行 .split 时，它不起作用，因为我相信此时承诺尚未解决，因此 cn.jsonValue().split(" ") 将不起作用

参考文献

List of properties on elements

Puppeteer docs for ElementHandle

【讨论】：

【解决方案4】：

将把它放在这里，因为这个页面目前是搜索“元素句柄类名”的第一个结果

从docs，您应该可以进行以下操作

const el = await page.$('.myElement')
const className = await el.getProperty('className')

// alternatively,
// page.$('.myElement')
//    .then(el => el.getProperty('className'))
//    .then(className => ... )

【讨论】：

在较新的 API 中，您还需要调用 jsonValue()，因为 getProperty() 返回一个 JSHandle（请参阅 docs）。获取课程：const className = await (await el.getProperty('className')).jsonValue()

【解决方案5】：

我找到了一个在部分方面有所帮助的解决方案，但对我来说已经足够好了。我有访问ElementHandle._remoteObject.description 的类名。希望这对某人有所帮助。

【讨论】：

阅读您的帖子后，ElementHandle._remoteObject.value 在我的 Puppeteer 脚本中对我来说是完美的工作。谢谢！