使用 Puppeteer 获取 HTML 属性的值

Posted 2023-02-18

【中文标题】使用 Puppeteer 获取 HTML 属性的值

【英文标题】：Get the Value of HTML Attributes Using Puppeteer

【发布时间】：2022-01-04 22:58:38

【问题描述】：

使用 Puppeteer，我选择了一些 html 元素：

await page.$$( 'span.styleNumber' );

我可以使用以下方法获取元素的文本：

console.log( await ( await styleNumber.getProperty( 'innerText' ) ).jsonValue() );

如何获取元素的 data-Color 属性的值？

这是我的脚本：

HTML

<span class="styleNumber" data-Color="Blue">SG1000</span>
<span class="styleNumber" data-Color="Green">SG2000</span>
<span class="styleNumber" data-Color="Red">SG3000</span>

木偶师

const puppeteer = require( 'puppeteer' );

( async() => 
    const browser = await puppeteer.launch();

    const page = await browser.newPage();

    await page.goto( 'http://www.example.com/sample.php' );

    // Get a list of all elements.
    var styleNumbers = await page.$$( 'span.styleNumber' );

    // Print the style numbers.
    for( let styleNumber of styleNumbers ) 
        try 
            console.log( await ( await styleNumber.getProperty( 'innerText' ) ).jsonValue() );
        
        catch( e ) 
            console.log( `Could not get the style number:`, e.message );
        
    

    await browser.close();
 )();

上面的代码会打印：

SG1000
SG2000
SG3000

如何获取 data-Color 属性的值？例如：

console.log( await ( await styleNumber.getAttribute( 'data-Color' ) ) ); // Blue

【参考方案1】：

你可以通过evaluate方法获取属性值。

await page.evaluate('document.querySelector("span.styleNumber").getAttribute("data-Color")')

---

第二种方式

$$eval方法也可以使用。也称为来自变量的数组的属性

const attr = await page.$$eval("span.styleNumber", el => el.map(x => x.getAttribute("data-Color")));

输出将是

["Blue", "Green", "Red"]

---

您的解决方案

const styleNumbers = await page.$$("span.styleNumber");

for( let styleNumber of styleNumbers ) 
    const attr = await page.evaluate(el => el.getAttribute("data-Color"), styleNumber);

【讨论】：

对于那些喜欢将 page.evaluate 的参数写成 JS 的人：await page.evaluate(() => document.querySelector("span.styleNumber").getAttribute("data-Color") )