Puppeteer - 定位器

我们可以使用 Puppeteer 处理页面上的元素。一旦我们导航到网页，我们必须与页面上可用的 webelements 进行交互，例如单击链接/按钮、在编辑框中输入文本等，以完成我们的自动化测试用例。

为此，我们的首要任务是识别元素。要唯一地获取元素的属性，我们需要检查它（右键单击元素，然后选择选项"检查"）。ElementHandle 对象由以下方法创建 - page.$、page.$$ 和 page.$x。这些对象引用页面中的元素或标签。

要唯一地确定元素，我们可以借助 html 标签中的任何属性，也可以使用 html 标签上的属性组合。 id 属性的使用率最高，因为它对于每个页面来说都是唯一的。

但是，如果 id 属性不存在，我们可以使用其他属性，如 class、name 等。如果 id、name 和 class 等属性不存在，我们可以使用仅对该标签可用的独特属性或属性及其值的组合来标识元素。为此，我们必须使用 xpath 表达式。

定位元素的方法

这些方法列在下面 −

page.$(locator value)

此方法产生一个带有 ElementHandle 的 Promise。ElementHandle 是已识别元素的对象。如果有多个元素具有相同的定位器值，则仅返回页面左上角第一个匹配的元素。

page.$$(定位器值)

此方法生成一个带有 ElementHandle 数组的 Promise。如果有多个元素具有相同的定位器值，则所有匹配的元素将以数组的形式返回。

page.$x(xpath 值)

此方法生成一个带有 ElementHandle 数组的 Promise。如果有多个元素具有相同的 xpath 值，则所有匹配的元素将以数组的形式返回。如果有一个匹配的元素，则返回的数组将只有一个元素。

ElementHandle 方法（如 elementHandle.$、elementHandle.$$ 和 elementHandle.$x）可应用于元素。在这种情况下，应在当前 ElementHandle 的 DOM 中搜索元素，而不是在整个 DOM 中搜索元素。

在下面给出的图像中，我们以具有 li 标签（具有父元素 ul）和 class 属性值作为标题的元素为例。

要在页面上使用 ElementHandle 方法识别它，表达式应如下 −

const n = await page.$(".heading")

要在元素上使用 ElementHandle 方法识别它，表达式应为 −

const m = await page.$("ul")
const p = await m.$(".heading")

现在，参考下面给出的具有 li 标签的元素的图像

定位器的类型

Puppeteer 中的定位器类型如下所列−

• ID

• 类

• 类型

• Xpath

• 属性

• 类型

要使用上述定位器，我们应该对 HTML 代码有基本的了解。让我们以具有以下属性的编辑框为例 −

此处，输入是标签名称。HTML 中的标签可能有也可能没有属性。类型、类、名称、id 等是元素的属性。

例如，在表达式 id = "gsc-i-id1" 中，= 左侧的文本是属性名称 (id)，= 右侧的文本是属性值 (gsc-i-id1)。

属性可能已分配值，也可能未分配值。此外，如果已分配值，则应将其括在双引号或单引号中。属性的值由开发人员根据自己的选择进行设置。

让我们以具有以下 html 代码的元素为例 −

我们可以用表达式 − 识别上图中的第一个复选框

const n = await page.$("input[type='checkbox']")

首先，请按照 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 checkBoxHandle(){
    //在 He​​aded 模式下启动浏览器
    const browser = await pt.launch()
    //浏览器新页面
    const page = await browser.newPage()
    //启动 URL
    await page.goto('https://the-internet.herokuapp.com/checkboxes')
    //使用 xpath 识别元素然后单击
    const n = await page.$("input[type='checkbox']")
    n.click()
    //等待一段时间
    await page.waitForTimeout(4000)
    //验证复选框是否被选中
   const v = await (await n.getProperty("checked")).jsonValue()
   console.log(v)
}
checkBoxHandle()

步骤 4 − 使用下面提到的命令执行代码 −

node <filename>

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

node testcase1.js

命令成功执行后，控制台中会打印布尔值 true。这是由 getProperty("checked") 返回的，当复选框被选中时，它会返回 true。