Puppeteer 简明教程

Puppeteer - Absolute Xpath

为了唯一地确定一个元素，我们可以使用 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 表达式。此外，如果页面上的元素是动态的，则 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. Also, if the element on a page is dynamic, then xpath selector can be a good choice as a selector.

Xpath 可以分为两种类型，即绝对和相对。绝对 xpath 以符号 / 开头，从根节点开始到我们要识别的元素。下面给出了一个示例。

Xpath can be of two types - absolute and relative. The absolute xpath begins with / symbol and starts from the root node upto the element that we want to identify. An example is given below for the same.

/html/body/div[1]/div/div[1]/a

让我们借助绝对 xpath 识别页面上下面突出显示的徽标，然后单击它。

Let us identify the below highlighted logo on the page with the help of the absolute xpath and then click on it.

puppeteer tutorialspoint

徽标的绝对 xpath 如下 −

The absolute xpath for the logo is as follows −

html/body/header/div[4]/div[1]/div[1]/a/img.

在这里，我们正在使用 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 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 selectorAbsoluteXpath(){
   //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/about/about_careers.htm')
   //identify element with absolute xpath then click
   const b = (await page.$x("/html/body/header/div[4]/div[1]/div[1]/a/img"))[0]
   b.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //obtain URL after click
   console.log(await page.url())
}
selectorAbsoluteXpath()

Step 4 − 执行带有下面提到的命令的代码 −

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

node <filename>

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

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

node testcase1.js
puppeteer tutorialspoint1

在成功执行命令后，单击徽标图像时导航到的页面的 URL - https://www.tutorialspoint.com/index.htm 将打印在控制台中。

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