Puppeteer - 元素处理

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

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

Puppeteer 定位元素的方法

这些方法列在下面 −

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 中的定位器类型如下所示 −

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

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

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

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