page。$$とElementHandle traversal

Question

ドキュメントとサンプルを読んだ後には、ElementHandleの応答page.$$をどのようにナビゲートすることができるか理解できています。

page.$$と暗黙的にdocument.querySelectorAll()を使用したいという使用例の大半は、配列またはNodeListを取得し、その上で動作することです。

5つのリンクがあるページがあり、スクリプトの2番目のaのhrefを印刷したいとします。これは私が試したもので、うまくいきません。

const linksArray = await page.$$('a'); 
const the2ndHref = await page.evaluate(linkList => linkList[1].href, linksArray); 
console.log('the2ndHref', the2ndHref); 
await linksArray.dispose(); 

助けてもらえますか？

Answer 1

私の推測では、あなたがElementHandleあなたがpropertieshover、focus、click等を作動させることができるDOM要素を表しているため、実際にElementHandleをたくないということです。

await page.goto('https://www.google.com/search?q=puppeteer') 

const LINKS_SELECTOR = 'a' 
const the2ndHref = await page.evaluate(selector => { 
    const allLinks = document.querySelectorAll(selector) 
    return allLinks[1].href 
}, LINKS_SELECTOR) 

console.log('the2ndHref', the2ndHref)