web-dev-qa-db-ja.com

Puppeteerを使用しているときにElementHandleのクラス名を取得するにはどうすればよいですか？

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
5
Gabriel Bueno

このページは現在「elementhandleクラス名」を検索した最初の結果であるため、ここにドロップします

docs から、次のことができるはずです。

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

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

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を実行しようとすると、その時点でPromiseが解決されていないと思われるため、機能しませんでした。そのため、cn.jsonValue().split(" ")は機能しません。

参考文献

要素のプロパティのリスト

ElementHandleのPuppeteerドキュメント

7
Daniel

部分的に役立つ解決策を見つけましたが、それで十分でした。 ElementHandle._remoteObject.descriptionにアクセスするクラス名があります。これが誰かを助けることを願っています。

3
Gabriel Bueno