傀儡师 - 定位器

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

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

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

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

定位元素的方法

下面列出了这些方法 -

页.$(定位器值)

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

页。$$（定位器值）

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

页.$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

  • 班级

  • 类型

  • X路径

  • 属性

  • 类型

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

定位器的类型

这里，输入是标记名。HTML 中的标签可能有属性，也可能没有。type、class、name、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。

测试用例1.JS

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

//Puppeteer library
const pt= require('puppeteer')
async function checkBoxHandle(){
   //launch browser in headed mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://the-internet.herokuapp.com/checkboxes')
   //identify element with xpath then click
   const n = await page.$("input[type='checkbox']")
   n.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //verify if checkbox is checked
   const v = await (await n.getProperty("checked")).jsonValue()
   console.log(v)
}
checkBoxHandle()

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

node <filename>

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

node testcase1.js
傀儡师终端

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