Puppeteer 简明教程

Puppeteer - Getting Element Attribute

我们能够使用 Puppeteer 获得元素的属性值。这些属性在 HTML 标记中添加。它们被用于描述元素的属性。一个属性及其值在键值对中定义。

We can get attribute values of an element using Puppeteer. The attributes are added within the HTML tag. They are used to describe the properties of an element. An attribute and its value are defined in a key-value pair.

我们取一个具有以下属性的编辑框示例 -

Let us take an example of an edit box having the below properties −

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

Here, input is the tagname. A tag in HTML may or may not have attributes. The type, class , name, id and so on are the attributes of this element. For example, in id = gsc-i-id1, text to the left of = is the attribute name(i.e id) and to the right of = is the attribute value(i.e gsc-i-id1).

属性可能具有或不具有分配的值。此外，如果分配了一个值，那么它应该用双引号或单引号括起来。属性的值由开发人员根据自己的选择设置。

An attribute may or may not have a value assigned. Also, if a value is assigned, then it should be enclosed in double or single quotes. The value of an attribute is set by a developer as per his choice.

Methods for Element Attribute

获取元素属性的方法如下所列 -

The ways to obtain an element attribute are listed below −

getAttribute()

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

This method is used to get the value of the attribute which is passed as a parameter to this method.

Syntax

其语法如下：

The syntax is as follows −

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

element.<attribute name>

Syntax

其语法如下：

The syntax is as follows −

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

element.getProperty()

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

This method is used to get the value of the attribute which is passed as a parameter to this method.

其语法如下：

The syntax is as follows −

Syntax

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

在下图中，我们识别高亮的编辑框，并获取其类属性的值 - gsc-input。

In the below image, let us identify the highlighted edit box and obtain the value of its class attribute - gsc-input.

首先，按照人偶基本测试章节执行步骤 1 至 2，如下所示 -

To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which are as follows −

Step 1 - 在创建 node_modules 文件夹的目录中创建一个新文件（人偶和人偶核已安装的位置）。

Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed).

人偶安装的详情在人偶安装篇章中进行了讨论。

The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation.

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

Right-click on the folder where the node_modules folder is created, then click on the New file button.

Step 2 - 输入文件名，如 testcase1.js。

Step 2 − Enter a filename, say testcase1.js.

Step 3 - 将以下代码添加到新创建的 testcase1.js 文件中。

Step 3 − Add the below code within the testcase1.js file created.

//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()

Step 4 - 使用以下命令执行代码 -

Step 4 − Execute the code with the command given below −

node <filename>

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

So in our example, we shall run the following command −

node testcase1.js

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

After the command has been successfully executed, the value of the class attribute for the element - gsc-input gets printed in the console.