Puppeteer 简明教程

Puppeteer - Locators

我们可以使用 Puppeteer 处理页面上的元素。一旦我们导航到一个网页，我们就需要与页面上的 web 元素交互，比如点击链接/按钮，在编辑框中输入文本，以此来完成我们的自动化测试用例。

We can handle elements on page with Puppeteer. 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.

为此，我们的首要任务是识别该元素。为了唯一地获取一个元素的属性，我们需要对其进行检查（右击该元素，然后选择“检查”选项）。ElementHandle 对象由方法创建，分别为：page .、page . $ $和 page . $ x。这些对象引用页面中的元素或标签。

For this, our first job is to identify the element. To get the property of an element uniquely we need to inspect it (right-click on the element then select the option Inspect). The ElementHandle objects are created by the methods - page.$, page.$$ and page.$x. These objects refer to an element or tag in a page.

为了唯一地确定一个元素，我们可以使用 html 标签内的任何属性或使用 html 标签上的多个属性的组合。通常使用 id 属性，因为它对于页面是唯一的。

To determine an element uniquely, we can either take the help of any of the attributes within the html tag or we can use a combination of attributes on the html tag. Mostly the id attribute is used since it is unique to a page.

但是，如果 id 属性不存在，我们可以使用其他属性，例如 class、name 等。如果 id、name 和 class 等属性不存在，我们可以利用仅该标签专有的不同属性或属性及其值的组合来识别元素。为此，我们必须使用 xpath 表达式。

However, if the id attribute is not present, we can use other attributes like the class, name, and so on. In case the attributes like id, name, and class are not present, we can utilise a distinct attribute available to only that tag or a combination of attributes and their values to identify an element. For this, we have to use the xpath expression.

Methods to locate elements

这些方法列在下面：

These methods are listed below −

page.$(locator value)

此方法产生带有 ElementHandle 的 Promise。ElementHandle 是已识别元素的一个对象。如果有多个元素具有相同定位值，则仅从页面的左上角返回第一个匹配的元素。

This method yields a Promise with the ElementHandle. The ElementHandle is an object of the identified element. If there are multiple elements having the same locator value, then only the first matching element from the top left corner of the page shall be returned.

page.$$(locator value)

此方法产生带有 ElementHandle 数组的 Promise。如果有多个元素具有相同定位值，则以数组形式返回所有匹配元素。

This method yields a Promise with an array of ElementHandle. If there are multiple elements having the same locator value, then all matching elements shall be returned in the form of an array.

page.$x(xpath value)

此方法产生带有 ElementHandle 数组的 Promise。如果有多个元素具有相同 xpath 值，则以数组形式返回所有匹配元素。如果有一个匹配的元素，则返回的数组将具有单个元素。

This method yields a Promise with an array of ElementHandle. If there are multiple elements having the same xpath value, then all matching elements shall be returned in the form of an array. In case, there is one matching element, then the array returned shall have a single element.

ElementHandle 方法，如 elementHandle.$、elementHandle.$$ 和 elementHandle.$x 可应用于一个元素。在这种情况下，应该在当前 ElementHandle 的 DOM 中搜索一个元素，而不在整个 DOM 中。

The ElementHandle methods like elementHandle.$, elementHandle.$$ and elementHandle.$x can be applied to an element. In that case, an element shall be searched within the DOM of the present ElementHandle and not in the entire DOM.

在下方给出的图像中，让我们举例说明一个具有 li 标记（具有 ul 父元素）和类属性值为标题的元素。

In the below given image, let us take the example of an element having the li tag(having a parent element ul) and class attribute value as heading.

要使用页面上的 ElementHandle 方法识别这个元素，表达式应如下所示：

To identify it using the ElementHandle method on the page, the expression should be as follows −

const n = await page.$(".heading")

要使用元素上的 ElementHandle 方法识别这个元素，表达式应如下所示：

To identify it using the ElementHandle method on an element, the expression should be −

const m = await page.$("ul")
const p = await m.$(".heading")

现在，参阅下面给出的一个具有 li 标签的元素的图片

Now, refer the image given below of an element having the li tag

Types of Locators

以下是 Puppeteer 中的定位符类型列表：

The types of locators in Puppeteer are listed below −

ID
Class
Type
Xpath
Attribute
Type

要使用上述定位符，我们应该基本了解 HTML 代码。让我们举例说明一个具有以下属性的编辑框：

To work with the above locators we should have the basic understanding of HTML code. Let us take an example of an edit box having the below properties −

此处，input 是标签名称。HTML 中的标签可能有或没有属性。元素的类型、类、名称、ID 等是元素的属性。

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 the element.

例如，在表达式 id = "gsc-i-id1" 中，= 左边的文本为属性名称 (id)，= 右边的文本为属性值 (gsc-i-id1)。

For example, in the expression id = "gsc-i-id1", text to the left of = is the attribute name (id) and to the right of = is the attribute value (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.

让我们举一个元素具有以下 HTML 代码的示例 -

Let us take an example of an element having the below html code −

我们可以使用表达式 - 识别上图中的第一个复选框

We can identify the first checkbox in the above image, with the expression −

const n = await page.$("input[type='checkbox']")

首先，按照人偶基本测试章节执行步骤 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 checkBoxHandle(){
   //launch browser in headed mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://the-internet.herokuapp.com/checkboxes')
   //identify element with xpath then click
   const n = await page.$("input[type='checkbox']")
   n.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //verify if checkbox is checked
   const v = await (await n.getProperty("checked")).jsonValue()
   console.log(v)
}
checkBoxHandle()

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

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

node <filename>

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

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

node testcase1.js

在命令成功执行之后，将在控制台中打印布尔值 true。这是 getProperty("checked") 返回的值，因为已选中复选框，所以它返回 true。

After the command has been executed successfully, the boolean value true is printed in the console. This is returned by getProperty("checked") which returns true as the checkbox is selected.