Puppeteer 简明教程

Puppeteer - Xpath Axes

为了唯一地确定一个元素，我们可以使用 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 等属性，我们可以使用仅对该标签提供的独特属性，或其值和属性的组合来标识一个元素。

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.

为此，我们必须使用 xpath 表达式。此外，如果页面上的元素是动态的，那么 xpath 选择器可能是一个很好的选择器选择。

For this, we have to use the xpath expression. Also, if the element on a page is dynamic, then xpath selector can be a good choice as a selector.

xpath 是双向的，这意味着我们可以从父元素遍历到子元素，也可以从子元素遍历到父元素。下面链接中提供了 xpath 轴的详细信息 −

The xpath is bi-directional which means we can traverse from the parent to the child element and also from the child to the parent element. The details of xpath axes shall be available in the below link −

https://www.tutorialspoint.com/xpath/xpath_axes.htm

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

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

在上述示例中，表中有两列（用 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/child::td.

在此，我们使用 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.

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 selectorAxesXpath(){
   //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 xpath axes
   const n = (await page.$x("//table/tbody/tr/child::td"))[0]
   // get value of class attribute
   let v = await page.$eval("input", n => n.getAttribute("class"))
   console.log(v)
}
selectorAxesXpath()

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.