Puppeteer 简明教程

Puppeteer - Xpath Grouping

为了唯一地确定一个元素，我们可以使用 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, 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.

通过利用索引从匹配元素的集合中获取一个元素称为组索引。如果 xpath 表达式识别出多个元素，那么我们可以使用组索引。

Obtaining one element from a collection of matching elements by utilising the index is known as the group index. If an xpath expression identifies multiple elements, then we can use the group index.

编写组索引的格式首先是 xpath 表达式，然后是括在 [] 中的索引号。它表示从 1 开始的 xpath 数组。函数 last() 用于指向 xpath 数组中的最后一个元素。

The format for writing a group index is first the xpath expression followed by the index number enclosed in []. It represents an xpath array with index starting from 1. The function last() is used to point to the last element in the xpath array.

Syntax

函数 last() 的语法如下所示 −

The syntax for the use of function last() is as follows −

(/table/tbody/tr/td[1]/input)[last()]

Syntax

函数 position() 用于获取 xpath 数组中特定位置的元素。语法如下所示 −

The function position() is used to obtain an element at a particular position in the xpath array. The syntax is as follows −

(/table/tbody/tr/td[1]/input)[position()=1]

上述 XPath 表达式应从所有匹配元素组中获取第一个元素。

The above xpath expression shall obtain the first element from the group of all the matching elements.

在下图中，我们标识高亮显示的编辑框并在其中输入一些文本。

In the below image, let us identify the highlighted edit box and input some text in it.

所以，XPath 表达式应如下所示：

So the xpath expression shall be as follows −

online education

在上述示例中，表中有两列（用 td 标记表示），其 tr 标记为父级。输入框出现在第一列。

In the above example, there are two columns (represented by td tags) in the table having the tr tag as their parent. The input box is present in the first column.

所以，XPath 表达式应如下所示：

So the xpath expression shall be as follows −

//table/tbody/tr/td[1]/input

在此，我们使用 XPath 选择器，所以我们必须使用下列方法：page.$x(xpath 值)。本章的 Puppeteer 定位符讨论了此方法的详细信息。

Here, we are working with the xpath selector, so we have to use the method: page.$x(xpath value). The details on this method are discussed in the Chapter of Puppeteer Locators.

首先，按照人偶基本测试章节执行步骤 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 selectorGroupXpath(){
   //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 group index xpath then enter text
   const f = (await page.$x("//table/tbody/tr/td[1]/input"))[0]
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //capture screenshot
   await page.screenshot({
      path: 'tutorialspoint.png'
   });
   //browser close
   await browser.close()
}
selectorGroupXpath()

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
tutorialspoint puppeteer

在成功执行命令之后，名为 tutorialspoint.png 的文件在页面目录中创建。它包含在浏览器中启动的页面截图，其文本为 Puppeteer。

After the command has been successfully executed, a new file called the tutorialspoint.png gets created within the page directory. It contains the captured screenshot of the page launched in the browser with the text Puppeteer.