Puppeteer 简明教程

Puppeteer - Attribute Selector

一旦我们导航到一个网页，我们就必须与页面上可用的网络元素交互，例如单击链接/按钮、在编辑框中输入文本等等，才能完成我们的自动化测试用例。

Once we navigate to a webpage, we have to interact with the webelements available on the page like clicking a link/button, entering text within an edit box, and so on to complete our automation test case.

为此，我们的第一步是识别元素。如果某属性及其值在标签中仅使用一次，我们可以将其用作一个属性选择器。如果多个元素都具有相同的属性值，则在该页面上 shall 识出第一个匹配的元素。

For this, our first job is to identify the element. If an attribute and its value is used only one time in a tag, we can use it as an attribute selector. If there are multiple elements with the same attribute value, only the first matching element on the page shall be identified.

Syntax

属性选择器的语法如下 -

The syntax for attribute selector is as follows −

const f = await page.$("ul[name='val']")

此处，ul 为标签名，val 为 name 属性设定的值。

Here, ul is the tagname and val is the value set for the name attribute.

在下图中，让我们获得高亮显示元素的 - About Tutorialspoint 的文本 -

In the below image, let us obtain the text - About Tutorialspoint for the highlighted element −

li heading

上述元素的属性选择器表达式应为 li[class='heading']。

The attribute selector expression for the above element shall be li[class='heading'].

首先，按照人偶基本测试章节执行步骤 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.

node modules

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

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

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 selectorAttribute(){
   //launch browser in headed mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://www.tutorialspoint.com/about/about_careers.htm')
   //identify element with attribute selector
   const n = await page.$("li[class='heading']")
   //obtain text
   const t = await (await n.getProperty('textContent')).jsonValue()
   console.log("Obtained text is: " + t)
}
selectorAttribute()

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
about

命令执行成功后，元素 - About Tutorialspoint 的文本将打印在控制台中。

After the command has been successfully executed, the text of the element - About Tutorialspoint gets printed in the console.