Puppeteer - 获取元素属性

我们可以使用 Puppeteer 获取元素的属性值。属性添加在 HTML 标记内。它们用于描述元素的属性。属性及其值在键值对中定义。

让我们以具有以下属性的编辑框为例 −

此处，输入是标记名。HTML 中的标记可能有也可能没有属性。类型、类、名称、id 等是此元素的属性。例如，在 id = gsc-i-id1 中，= 左侧的文本是属性名称（即 id），= 右侧的文本是属性值（即 gsc-i-id1）。

属性可能已分配值，也可能未分配值。此外，如果已分配值，则应将其括在双引号或单引号中。属性的值由开发人员根据自己的选择进行设置。

元素属性的方法

获取元素属性的方法如下 −

getAttribute()

此方法用于获取作为参数传递给此方法的属性的值。

语法

语法如下 −

let v = await page.$eval("input", element=> element.getAttribute("class"))

element.<attribute name>

语法

语法如下 −

let v = await page.$eval("input", element=> element.class)

element.getProperty()

此方法用于获取作为参数传递给此方法的属性的值。

语法如下 −

语法

const n = await page.$("#txt")
const t = await (await n.getProperty('textContent')).jsonValue()

在下图中，让我们识别突出显示的编辑框并获取其类属性 - gsc-input 的值。

首先，按照 Puppeteer 基本测试章节中的步骤 1 到 2 进行操作，如下所示 −

步骤 1 −在创建 node_modules 文件夹的目录（安装 Puppeteer 和 Puppeteer 核心的位置）内创建一个新文件。

有关 Puppeteer 安装的详细信息，请参阅 Puppeteer 安装一章。

右键单击创建 node_modules 文件夹的文件夹，然后单击新建文件按钮。

步骤 2 − 输入文件名，例如 testcase1.js。

步骤 3 −在创建的 testcase1.js 文件中添加以下代码。

//Puppeteer 库
const pt= require('puppeteer')
async function getElementAttribute(){
    //以 headless 模式启动浏览器
    const browser = await pt.launch()
    //浏览器新页面
    const page = await browser.newPage()
    //启动 URL
    await page.goto('https://www.tutorialspoint.com/index.htm')
    //通过 id 识别元素
    const n = await page.$("#gsc-i-id1")
    //获取类属性
   let v = await page.$eval("input", n => n.getAttribute("class"))
   console.log(v)
}
getElementAttribute()

步骤 4 − 使用下面给出的命令执行代码 −