Puppeteer - 获取元素属性

---

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

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

这里，输入是标记名。HTML 中的标签可能有属性，也可能没有。type、class、name、id 等是该元素的属性。例如，在 id = gsc-i-id1 中，= 左侧的文本是属性名称（即 id），= 右侧的文本是属性值（即 gsc-i-id1）。

属性可以分配也可以不分配值。另外，如果分配了值，则应将其括在双引号或单引号中。属性的值由开发人员根据他的选择设置。

元素属性的方法

下面列出了获取元素属性的方法 -

获取属性()

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

句法

语法如下 -

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

元素.<属性名称>

句法

语法如下 -

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

元素.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 library
const pt= require('puppeteer')
async function getElementAttribute(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://www.tutorialspoint.com/index.htm')
   //identify element with id
   const n = await page.$("#gsc-i-id1")
   //get class attribute
   let v = await page.$eval("input", n => n.getAttribute("class"))
   console.log(v)
}
getElementAttribute()

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

node <filename>

因此，在我们的示例中，我们将运行以下命令 -

node testcase1.js

成功执行命令后，元素 gsc-input 的类属性值将打印在控制台中。