Puppeteer - Xpath 轴

要唯一地确定一个元素，我们可以借助 html 标记中的任何属性，也可以使用 html 标记上的属性组合。大多数情况下使用 id 属性，因为它对于页面是唯一的。

但是，如果不存在 id 属性，我们可以使用其他属性，如 class、name 等。如果不存在 id、name 和 class 等属性，我们可以使用仅适用于该标记的独特属性或属性及其值的组合来标识元素。

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

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

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

在下图中，让我们识别突出显示的编辑框并获取其类属性的值 - gsc-input。

在上面的示例中，表中有两列（用 td 标签表示），其父级为 tr 标签。输入框位于第一列。

因此 xpath 表达式应如下 −

//table/tbody/tr/child::td.

在这里，我们使用 xpath 选择器，因此我们必须使用方法：page.$x(xpath value)。此方法的详细信息在 Puppeteer 定位器一章中讨论。

首先，请按照 Puppeteer 基本测试一章中的步骤 1 到 2 进行操作，如下所示 −

步骤 1 −在创建 node_modules 文件夹的目录（安装 Puppeteer 和 Puppeteer 核心的位置）内创建一个新文件。

有关 Puppeteer 安装的详细信息，请参阅 Puppeteer 安装一章。

右键单击创建 node_modules 文件夹的文件夹，然后单击新建文件按钮。

步骤 2 − 输入文件名，例如 testcase1.js。

步骤 3 −在创建的 testcase1.js 文件中添加以下代码。

//Puppeteer 库
const pt= require('puppeteer')
async function selectorAxesXpath(){
    //以 headless 模式启动浏览器
    const browser = await pt.launch()
    //浏览器新页面
    const page = await browser.newPage()
    //启动 URL
    await page.goto('https://www.tutorialspoint.com/index.htm')
    //使用 xpath 轴识别元素
    const n = (await page.$x("//table/tbody/tr/child::td"))[0]
    //获取类属性的值
    let v = await page.$eval("input", n => n.getAttribute("class"))
    console.log(v)
}
selectorAxesXpath()

步骤 4 − 使用下面给出的命令执行代码 −

node <filename>

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

node testcase1.js

命令成功执行后，元素的类属性值 - gsc-input 将在控制台中打印。