Puppeteer - 元素处理

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

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

定位元素的 Puppeteer 方法

下面列出了这些方法 -

页.$(定位器值)

此方法使用 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 中的定位器类型如下所示 -

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

这里，输入是标记名。HTML 中的标签可能有属性，也可能没有。type、class、name、id等都是元素的属性。

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

属性可以分配也可以不分配值。另外，如果分配了值，则应将其括在双引号或单引号中。属性的值由开发人员根据他的选择设置。