Puppeteer 简明教程

Puppeteer - Xpath Functions

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

如果某个元素存在重复的属性或没有属性，则使用 text() 函数来识别该元素。为了使用 text() 函数，该元素一定要在页面上有可见的文本。

If there are duplicate attributes or no attribute for an element, then the function text() is used to identify an element. In order to use the text() function, it is mandatory that the element should have a text visible on the page.

Syntax

text() 函数的语法如下 -

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

//tagname[text()='visible text on element']

如果某个元素的值或文本在本质上是部分动态的或非常长的，我们可以使用 contains() 函数。为了使用 contains() 函数，该元素一定要有时属性值或文本。

If the value of an element or the text is partially dynamic in nature or very lengthy, we can use the contains() function. In order to use the contains() function, it is mandatory that the element should either have an attribute value or a text.

Syntax

contains() 函数的语法如下 −

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

//tagname[contains(@attribute,'value')]
//tagname[contains(text(),'visible text on element')]

如果元素文本以特定文本开头，我们可以使用 starts-with() 函数。

If the text of an element begins with a particular text, we can use the starts-with() function to it.

Syntax

starts-with() 函数的语法如下 −

The syntax for the use of starts-with() function is as follows −

//tagname[starts-with(text(),'visible text on element')

在以上所有函数中，tagname 是可选的。我们可以使用符号 * 来代替 tagname。

In all the above functions, tagname is optional. Instead of tagname, we can use the symbol *.

在以下图片中，让我们借助显示的文本识别元素 - Library，然后单击它。

In the below image, let us identify the element - Library with the help of its displayed text and then click on it.

该元素的 xpath 为 //*[text()='Library']。

The xpath for the element shall be //*[text()='Library'].

在这里，我们使用 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 detail on this method is discussed in the Chapter - 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 selectorFunTextXpath(){
   //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 function - text() then click
   const b = (await page.$x("//*[text()='Library']"))[0]
   b.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //obtain URL after click
   console.log(await page.url())
}
selectorFunTextXpath()

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

在成功执行该命令后，单击元素 Library 导航到的页面的 URL - https://www.tutorialspoint.com/tutorialslibrary.htm 将被打印在控制台中。

After the command has been successfully executed, the URL of the page navigated on clicking the element Library - https://www.tutorialspoint.com/tutorialslibrary.htm gets printed in the console.