如何从 puppetier 中的 dom 元素获取值？比如如何在 puppetier 中获取 span 标签中的值？

Question

例如：

async function startInstagram(){
    const browser=await puppeter.launch({headless:false})
    const page=await browser.newPage()
    await page.goto('https://www.instagram.com/50cent/')
    const html=await page.waitForSelector('#mount_0_0_qQ > div > div > div.x9f619.x1n2onr6.x1ja2u2z > div > div > div > div.x78zum5.xdt5ytf.x10cihs4.x1t2pt76.x1n2onr6.x1ja2u2z > div.x9f619.xnz67gz.x78zum5.x168nmei.x13lgxp2.x5pf9jr.xo71vjh.x1uhb9sk.x1plvlek.xryxfnj.x1c4vz4f.x2lah0s.xdt5ytf.xqjyukv.x1qjc9v5.x1oa3qoh.x1qughib > div.xh8yej3.x1gryazu.x10o80wk.x14k21rp.x1porb0y.x17snn68.x6osk4m > section > main > div > ul > li:nth-child(2) > a > div > span > span')
    .catch(e=>console.log(e))
  console.log(`${subs.asElement()}`)
    await browser.close()
}

startInstagram()

我需要从 instagramm 中的 span 标签获取文本，但 JsHandle@node 返回给我。我如何获取值？

Answer 1

• 你不需要写每个元素和它们的类或 id 导致你想要的元素，首先尝试最接近的元素。
• 如果您的浏览器上有开发工具，请在控制台部分运行

  $$('Your_Selector_Goes_here');

  ，以检查选择器返回的内容。
• 检查Puppeteer docs使用

  page.$(), page.$$(), page.$eval(), page.$$eval()

  ,
• .waitForSelector 做它所说的，等待或给出超时错误，如果它不存在。

获取 span 标签的 text content 和 title value 将是：

async function startInstagram(){

    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();

    let url = 'https://www.instagram.com/50cent/'
    await page.goto(url,{ waitUntil: 'networkidle2', timeout:0});

    let selector = 'li:nth-child(2) > button > span > span';
    await page.waitForSelector(selector);
    let subs = await page.$eval(selector, el => el.innerText);
    let subs2 = await page.$eval(selector, el => el.getAttribute("title")); 

    console.log(subs); // text contents
    console.log(subs2); // title attribute

    await browser.close();

}

await startInstagram();