Puppeteer 快速指南

---

---

Puppeteer - 简介

Puppeteer 用于自动化和简化前端开发和测试。它由 Google 引入。Puppeteer 基于 Node.js 库，并且是开源的。

Puppeteer 包含用于交互和管理 Chrome 浏览器（以无头模式或 Chromium 模式，遵循 DevTools 中的协议）的 API。但是，它也可以用于在 Chrome/Chromium/Edge/Firefox 等浏览器上进行非无头模式执行。

Puppeteer 可用于自动化大多数 UI 测试、键盘、鼠标移动等。它可用于测试用 Angular 和 Angularjs 开发的应用程序。使用 Puppeteer 可以执行网页抓取和爬取等操作。

Puppeteer 不被认为是像 Selenium、Cypress、Protractor 等自动化工具。它主要用于管理 Chromium 浏览器的内部功能。我们可以通过按 F12 或 Command+Option+C（在 MacOS 中）在 Chrome 浏览器中打开 DevTools。

Puppeteer 就像一个开发工具，因为它能够执行开发人员执行的大多数任务，例如处理请求和响应、定位元素、网络流量和性能等。

如果我们关注 Puppeteer 下载在过去几年的 npm 趋势，我们将观察到对 Puppeteer 使用的上升趋势（可从以下链接获取）−

www.npmtrends.com/puppeteer

Puppeteer 架构

Puppeteer 利用 Node 库，该库提供了一个一流的 API 用于管理 Chromium 或 Chrome 浏览器。这是通过遵循 DevTools 的协议来完成的。

Puppeteer 具有以下层次结构−

• 浏览器（带/不带无头模式）− 浏览器执行要在浏览器引擎上执行的操作。

• Chromium 开发项目或 CDP− Chromium 是所有操作实际执行的地方。Microsoft Edge 和 Chrome 浏览器都使用 Chromium 作为浏览器引擎。

• Puppeteer− 这实际上是基于节点模块的软件包。

• 自动化测试代码− 这也称为 Nodejs 层。在这里，最终用户使用 JavaScript 开发实际的自动化代码。

Puppeteer - 元素处理

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

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

Puppeteer 定位元素的方法

这些方法列在下面−

page.$(定位器值)

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

page.$$(定位器值)

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

page.$x(xpath 值)

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

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

在下图中，让我们以具有 li 标签（具有父元素 ul）和类属性值为 heading 的元素为例。要使用页面上的 ElementHandle 方法识别它，表达式应如下所示−

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

要使用元素上的 ElementHandle 方法识别它，表达式应如下所示−

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

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

定位器类型

Puppeteer 中的定位器类型列在下面−

• ID

• 类

• 类型

• XPath

• 属性

• 类型

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

这里，input 是标签名称。HTML 中的标签可能具有或不具有属性。type、class、name、id 等是元素的属性。

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

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

Puppeteer - Google 使用

Puppeteer 的用法列在下面−

• Puppeteer 可用于从网页抓取内容。抓取意味着从特定网站提取数据。

• Puppeteer 可用于捕获屏幕截图。它可用于以 PDF 格式导出网页。

• Puppeteer 不需要外部驱动程序或库。它可以在实际浏览器中以无头模式运行。

• 它可以用作 Selenium 或 Cypress 等其他浏览器自动化工具的良好替代方案。有时，puppeteer 的功能甚至优于两者。

• 它的执行速度非常快，可用于在无头和有头模式下执行测试。

• Puppeteer 拥有一个非常活跃的社区支持，在 GitHub 上拥有超过 60,000 个星标。请参考此处提供的链接：https://github.com/puppeteer/puppeteer

• Puppeteer 支持无头执行，因此它可以在 Unix、Linux、云、AWS 等平台上使用。

• 它可用于爬取 SPA（单页应用程序）并生成预渲染内容。爬取意味着保存网页的本地静态对象，并在没有从互联网获取的真实网页的情况下离线使用它。

• 它可用于自动化大多数 UI 测试、键盘、鼠标移动、表单提交等。

• Puppeteer 可用于构建最新的自动化测试环境。它可以通过利用 JavaScript 和浏览器的最新功能在最新版本的 Chrome 上运行测试。

• Puppeteer 可用于获取 Web 应用程序的时间线跟踪以确定其性能。此外，它可用于检查 Chrome 扩展程序并获取网页使用的 HTML 和 CSS 的覆盖率。

Puppeteer - NodeJS 安装

Puppeteer 代码实现使用 JavaScript 完成。为此，必须安装 NodeJS，因为它是一个 JavaScript 引擎。只有在安装后，我们才能执行 Puppeteer 测试。

配置 NodeJS 的步骤列在下面−

步骤 1− 启动具有以下链接的应用程序−

https://node.org.cn/en/download/

步骤 2− 根据我们使用的本地操作系统（Windows、Mac 或 Linux），单击链接下载安装程序。

步骤 3− 下载安装程序后，单击它。我们将导航到 Node.js 安装程序欢迎屏幕。单击“继续”。

步骤 4− 同意 Nodejs 的协议条款。

步骤 5− 单击“安装”。

步骤 6− 显示 Nodejs 安装成功消息后，单击“关闭”。

步骤 7− 要检查 Nodejs 是否已成功安装，请打开终端并运行命令：node。

机器中安装的 Nodejs 版本应显示出来。

Puppeteer - VS Code 配置

安装 Visual Studio (VS) Code 的步骤列在下面−

步骤 1− 导航到以下链接−

https://vscode.js.cn/

步骤 2− 根据我们拥有的本地操作系统，例如 macOS、Linux 或 Windows，我们需要选择下载链接。

步骤 3− 单击“下载”按钮后，将下载一个 zip 文件。下载此文件完成后，单击它，Visual Studio Code 应用程序应该可以使用了。

步骤 4− 双击它，Visual Studio Code 应用程序应该启动以及欢迎页面。

Puppeteer - 安装

Puppeteer 的安装步骤列在下面−

步骤 1− 安装 NodeJS。

有关如何安装 NodeJs 的详细信息在 NodeJS 安装章节中有详细讨论。

步骤 2− 在某个位置创建一个空文件夹，例如 puppeteer。

步骤 3 − 启动 Visual Studio Code 应用程序，点击“打开文件夹”链接，并导入我们在步骤 2 中创建的文件夹。

有关如何安装 VS Code 的详细信息，在 VS Code 配置章节中有详细讨论。

步骤 4 − 打开终端，从当前目录切换到我们在步骤 2 中创建的空文件夹的目录。然后运行以下命令：

npm

步骤 5 − 对于 Puppeteer 的安装，运行以下命令：

npm install puppeteer

或者，

npm i puppeteer

步骤 6 − 对于 Puppeteer core 的安装，运行以下命令：

npm i puppeteer-core

步骤 7 − 安装 Puppeteer 和 Puppeteer core 后，我们将在步骤 2 中创建的空文件夹中找到生成的 node_modules 文件夹和 package.json 文件。

步骤 8 − 在进行测试时，我们必须在代码中添加以下 Puppeteer 库。

const pt = require('puppeteer')

Puppeteer - 基本测试

要开始对 Puppeteer 进行基本测试，我们必须按照以下步骤操作：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

步骤 3 − 在此文件中添加以下代码：

//adding Puppeteer library
const pt = require('puppeteer');
pt.launch().then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.com/index.htm')
   //capture screenshot
   await p.screenshot({
      path: 'tutorialspoint.png'
   });
   //browser close
   await browser.close()
})

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，将在 page 目录中创建一个名为 tutorialspoint.png 的新文件。它包含在无头模式下在浏览器中启动的页面的捕获屏幕截图。

Puppeteer - 无头模式执行

默认情况下，Puppeteer 在无头 Chromium 中执行测试。这意味着如果我们使用 Puppeteer 运行测试，则将无法在浏览器中查看执行情况。

要启用有头模式下的执行，我们必须在代码中添加参数：headless:false。

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//adding Puppeteer library
const pt = require('puppeteer');
//adding headless flag to false
pt.launch({headless:false}).then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.com/about/about_careers.htm');
})

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，我们将看到执行在有头模式下触发。

Puppeteer 与 Selenium 的比较

Puppeteer 和 Selenium 之间的主要区别如下所示：

Puppeteer 与 Protractor 的比较

Puppeteer 和 Protractor 之间的主要区别如下所示：

让我们观察一下 Puppeteer 和 Protractor 在过去两年的 npm 趋势。我们将观察到与 Protractor 相比，Puppeteer 的使用趋势呈上升趋势（可从以下链接获取）：

https://www.npmtrends.com/protractor-vs-puppeteer

Puppeteer 与 Cypress 的比较

Puppeteer 和 Cypress 之间的主要区别如下所示：

让我们观察一下 Puppeteer 和 Cypress 在过去两年的 npm 趋势。我们将观察到 Puppeteer 和 Cypress 的使用趋势都呈上升趋势（可从以下链接获取）：

https://www.npmtrends.com/cypress-vs-puppeteer

Puppeteer - 浏览器操作

Puppeteer 可以借助以下方法执行浏览器操作：

launch()

用于打开新的浏览器并连接到 Chromium 实例。它有一些可选参数，如下所示：

产品 − 此参数为字符串类型，用于指定要启动的浏览器。

语法

语法如下：

let l = await puppeteer.launch({product : "chrome" })

headless − 此参数为布尔类型（默认值为 true），必须将其设置为 false 值才能在有头模式下执行测试。

语法

语法如下：

let l = await puppeteer.launch({headless : false})

devtools − 此参数为布尔类型。如果将其设置为 true，则每个浏览器选项卡都将自动打开 DevTools。此外，如果 devtools 设置为 true，则 headless 参数也应设置为 false。

语法

语法如下：

let l = await puppeteer.launch({devtools: true})

defaultViewport − 此参数为对象类型。它为页面提供持久视口（视口默认值为 800*600）。我们可以通过在宽度和高度中指定像素的整数值来修改视口的大小。

语法

语法如下：

let l = await puppeteer.launch({defaultViewport: { width: 500, height: 459}})

slowMo − 此参数为数字类型。此参数用于将 Puppeteer 执行减慢一段时间，以毫秒为单位。

语法

语法如下：

let l = await puppeteer.launch({slowMo: 500})

goTo()

用于导航到网页。要导航到的页面的 URL 作为参数传递。

语法

语法如下：

await page.goto('https://tutorialspoint.com/index.htm')

close()

用于关闭已打开的浏览器。

语法

语法如下：

await browser.close()

browserContexts()

返回所有已打开的浏览器上下文数组。

createIncognitoBrowserContext()

以隐身模式打开一个新浏览器。

defaultBrowserContext()

返回默认浏览器上下文。

disconnect()

用于断开 Puppeteer 与浏览器实例的连接。

isConnected()

用于验证浏览器是否已连接。

newPage()

返回包含新页面对象的 Promise。

pages()

返回包含所有打开的页面对象数组的 Promise。

process()

如果实例是使用 launch 方法创建的，则返回浏览器进程。此外，如果实例是使用 connect 方法创建的，则返回 null 值。

target()

返回浏览器的目标。

targets()

返回包含所有活动目标数组的 Promise。

Puppeteer - 标签处理

我们可以使用以下方法在 Puppeteer 中处理选项卡：

newPage()

我们可以使用此方法在浏览器对象中打开一个新选项卡。

语法

语法如下：

const p = await browser.newPage()

close()

我们可以使用此方法关闭已打开的选项卡。

语法

语法如下：

await p.close()

close()

我们可以使用此方法在浏览器对象中关闭所有已打开的选项卡。

语法

语法如下：

await browser.close()

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//adding Puppeteer library
const pt = require('puppeteer')
pt.launch().then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.com/index.htm')
   //capture screenshot
   await p.screenshot({
      path: 'tutorialspoint.png'
   });
   //browser close
   await browser.close()
})

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，将在 page 目录中创建一个名为 tutorialspoint.png 的新文件。它包含在浏览器中启动的页面的捕获屏幕截图。

Puppeteer - 基本命令

Puppeteer 的一些基本命令如下所示：

title()

此命令用于获取当前页面的标题。

语法

语法如下：

await page.title()

url()

此命令用于获取当前在浏览器中启动的应用程序的 URL。

语法

语法如下：

await page.url()

content()

此命令用于获取页面源代码。

语法

语法如下：

await page.content()

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//adding Puppeteer library
const pt = require('puppeteer');
pt.launch().then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.com/questions/index.php')
   //obtain page title
   console.log("Page title: " + await p.title())
   //obtain URL
   console.log("Url: " + await p.url())
   //browser close
   await browser.close()
})

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，页面标题 - The Best Technical Questions and Answers 将打印在控制台中。此外，URL - www.tutorialspoint.com/questions/index.php 将打印在控制台中。执行是在无头模式下发生的。

Puppeteer - Firefox

我们可以在 Firefox 中运行在 Puppeteer 中开发的测试。必须记住，在 Firefox 中执行测试时，Puppeteer 使用其内部 Firefox 浏览器，而不是本地系统中安装的 Firefox 浏览器。

步骤 1 − 我们首先需要通过执行以下命令为 Firefox 浏览器安装 Puppeteer −

npm install puppeteer-firefox

此外，我们还需要在代码中添加 Firefox-Puppeteer 库。

const f = require('puppeteer-firefox')

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//adding Puppeteer- Firefox library
const pt = require('puppeteer-firefox');
//adding headless flag to false
pt.launch().then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.com/about/about_careers.htm')
   //get browser
   const v = await p.browser().version();
   console.log("Browser: " + v)
   //browser close
   await browser.close()
})

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，将在控制台中打印执行测试的浏览器 - Firefox/65.0。

Puppeteer - Chrome

默认情况下，在 Puppeteer 中编写的测试在 Chrome 或 Chromium 浏览器中以无头模式执行。此外，我们还需要在代码中添加以下 Puppeteer 库。

const pt = require('puppeteer')

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//adding Puppeteer library
const pt = require('puppeteer');
pt.launch().then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.com/index.htm')
   //get browser
   const v = await p.browser().version();
   console.log("Browser: " + v)
   //browser close
   await browser.close()
})

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，将在控制台中打印执行测试的浏览器 - HeadlessChrome/92.0.4512.0。

Puppeteer - 处理确认警报

Puppeteer 能够处理警报。像 Selenium、WebdriverIO 等自动化工具在警报出现在页面上后接受或驳回警报。

但是，在 Puppeteer 中，用户必须在警报出现在页面上之前指示是否接受或驳回警报。为此，必须使用 Puppeteer 触发 on 事件监听器。

处理确认警报的方法

下面列出了一些用于处理警报的方法 −

• accept(): Promise<void> − 此方法用于接受警报。

• message(): string − 此方法用于获取警报中获得的消息。

• type(): DialogType − 此方法用于获取对话框类型。对话框类型可以是提示、确认或提示。

• dismiss(): Promise<void> − 此方法用于驳回警报。

在下图中，单击“点击 JS 确认”将显示确认警报。让我们获取警报上的文本。

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function confirmAlert(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage();
   //on event listener trigger
   page.on('dialog', async dialog => {
      //get alert message
      console.log(dialog.message());
      //accept alert
      await dialog.accept();
   })
   //launch URL
   await page.goto('https://the-internet.herokuapp.com/javascript_alerts')
   //identify element with xpath then click
   const b = (await page.$x("//button[text()='Click for JS Confirm']"))[0]
   b.click()
}
confirmAlert()

步骤 4 − 使用以下命令执行代码。

node <filename>

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

node testcase1.js

命令成功执行后，将在控制台中打印确认警报文本 - 我是一个 JS 确认。

Puppeteer - 处理下拉菜单

在使用 Puppeteer 自动化测试时，我们可以处理 UI 中的下拉列表。静态下拉列表在 html 代码中通过标签名称 select 识别，其选项的标签名称为 option。

处理下拉列表的方法

一些用于处理静态下拉列表的方法 −

select()

此方法用于从下拉列表中选择一个选项。要选择的选项的值作为参数传递给此方法。

语法

语法如下：

const page = await browser.newPage()
   const f = await page.$('[name="selType"]')
await f.select("subject")

我们还可以从多选下拉列表中选择多个选项。

语法

语法如下：

await f.select("subject", "name")

要从下拉列表中获取选择的值，我们必须使用 getProperty 方法并将值作为参数传递给此字段。

const v = await (await n.getProperty("value")).jsonValue()
console.log(v)

type()

此方法用于从下拉列表中选择一个选项。要选择的选项的值作为参数传递给此方法。

语法

语法如下：

const page = await browser.newPage()
   const f = await page.$('[name="selType"]')
await f.type("subject")

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function dropDownHandle(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/tutor_connect/index.php')
   //identify dropdown then select an option by value
   const f = await page.$('[name="selType"]')
   await f.select("subject")
   //wait for sometime
   await page.waitForTimeout(4000)
   //get value selected
   const v = await (await f.getProperty("value")).jsonValue()
   console.log(v)
}
dropDownHandle()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.j

命令成功执行后，将在控制台中打印下拉列表中所选选项的值 - 主题。

Puppeteer - 定位器

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

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

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

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

查找元素的方法

这些方法列在下面−

page.$(定位器值)

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

page.$$(定位器值)

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

page.$x(xpath 值)

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

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

在下图中，让我们以一个具有 li 标签（具有父元素 ul）和 class 属性值为 heading 的元素为例。

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

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

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

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

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

定位器类型

Puppeteer 中的定位器类型列在下面−

• ID

• 类

• 类型

• XPath

• 属性

• 类型

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

这里，input 是标签名称。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 core 安装的位置）中创建一个新文件。

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

步骤 2 − 输入文件名，例如 testcase1.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，因为复选框已选中。

Puppeteer - XPath 函数

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

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

如果元素存在重复属性或没有属性，则使用函数 text() 来识别元素。为了使用 text() 函数，该元素必须在页面上显示可见文本。

语法

text() 函数的使用语法如下 −

//tagname[text()='visible text on element']

如果元素的值或文本部分动态或非常长，我们可以使用 contains() 函数。为了使用 contains() 函数，该元素必须具有属性值或文本。

语法

contains() 函数的使用语法如下 −

//tagname[contains(@attribute,'value')]
//tagname[contains(text(),'visible text on element')]

如果元素的文本以特定文本开头，我们可以使用 starts-with() 函数。

语法

starts-with() 函数的使用语法如下 −

//tagname[starts-with(text(),'visible text on element')

在所有上述函数中，标签名是可选的。我们可以使用符号 * 代替标签名。

在下图中，让我们使用其显示文本识别元素 - 库，然后单击它。

元素的 xpath 将为 //*[text()='Library']。

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

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function selectorFunTextXpath(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/index.htm')
   //identify element with xpath function - text() then click
   const b = (await page.$x("//*[text()='Library']"))[0]
   b.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //obtain URL after click
   console.log(await page.url())
}
selectorFunTextXpath()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，将在控制台中打印单击元素库后导航到的页面的 URL - https://tutorialspoint.com/tutorialslibrary.htm。

Puppeteer - XPath 属性

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

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

如果使用单个属性的 xpath 表达式识别多个元素，我们可以在 xpath 表达式中使用多个属性来定位单个元素。

仅使用一个属性编写 xpath 的格式如下 −

//tagname[@attribute='value']

对于多个属性，我们可以应用 AND 和 OR 条件。使用 AND 条件编写 xpath 的格式 −

//tagName[@attribute1='value1'] [@attribute2='value2']

或者，

//tagName[@attribute1='value1' and @attribute2='value2']

使用 OR 条件编写 xpath 的格式如下 −

//tagName[@attribute1='value1' or @attribute2='value2']

我们还可以通过对属性应用 NOT 条件来识别元素。使用 NOT 条件编写 xpath 的格式 −

//tagname[not(@attribute='value')]

让我们使用 alt 属性识别页面上突出显示的徽标，然后单击它。

元素的 xpath 将如下所示 −

//img[@alt='tutorialspoint'].

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

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function selectorAttributeXpath(){
   //launch browser in headed mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/questions/index.php')
   //identify element with relative xpath then click
   const b = (await page.$x("//img[@alt='tutorialspoint']"))[0]
   b.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //obtain URL after click
   console.log(await page.url())
}
selectorAttributeXpath()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，将在控制台中打印单击徽标图像后导航到的页面的 URL - https://tutorialspoint.com/index.htm。

Puppeteer - XPath 分组

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

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

通过利用索引从匹配元素的集合中获取一个元素称为组索引。如果 xpath 表达式识别多个元素，则可以使用组索引。

编写组索引的格式是首先使用 xpath 表达式，然后是括在 [] 中的索引号。它表示一个 xpath 数组，索引从 1 开始。函数 last() 用于指向 xpath 数组中的最后一个元素。

语法

函数 last() 的使用语法如下 −

(/table/tbody/tr/td[1]/input)[last()]

语法

函数 position() 用于获取 xpath 数组中特定位置的元素。语法如下 −

(/table/tbody/tr/td[1]/input)[position()=1]

上述 xpath 表达式将获取所有匹配元素组中的第一个元素。

在下图中，让我们识别突出显示的编辑框并在其中输入一些文本。

因此，xpath 表达式将如下所示 −

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

因此，xpath 表达式将如下所示 −

//table/tbody/tr/td[1]/input

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

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function selectorGroupXpath(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/index.htm')
   //identify element with group index xpath then enter text
   const f = (await page.$x("//table/tbody/tr/td[1]/input"))[0]
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //capture screenshot
   await page.screenshot({
      path: 'tutorialspoint.png'
   });
   //browser close
   await browser.close()
}
selectorGroupXpath()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，将在页面目录中创建一个名为 tutorialspoint.png 的新文件。它包含在浏览器中启动的页面截图，其中包含文本 Puppeteer。

Puppeteer - 绝对 XPath

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

但是，如果不存在 id 属性，我们可以使用其他属性，如 class、name 等。如果不存在 id、name 和 class 等属性，我们可以利用仅对该标签可用的唯一属性或属性及其值的组合来识别元素。为此，我们必须使用 xpath 表达式。此外，如果页面上的元素是动态的，则 xpath 选择器可以作为选择器的一个不错的选择。

Xpath 可以分为两种类型 - 绝对路径和相对路径。绝对 xpath 以 / 符号开头，从根节点开始到我们要识别的元素。下面给出了一个相同示例。

/html/body/div[1]/div/div[1]/a

让我们使用绝对 xpath 识别页面上突出显示的徽标，然后单击它。

徽标的绝对 xpath 如下 −

html/body/header/div[4]/div[1]/div[1]/a/img.

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

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function selectorAbsoluteXpath(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/about/about_careers.htm')
   //identify element with absolute xpath then click
   const b = (await page.$x("/html/body/header/div[4]/div[1]/div[1]/a/img"))[0]
   b.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //obtain URL after click
   console.log(await page.url())
}
selectorAbsoluteXpath()

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

node <filename>

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

node testcase1.js

命令成功执行后，将在控制台中打印单击徽标图像后导航到的页面的 URL - https://tutorialspoint.com/index.htm。

Puppeteer - 相对 XPath

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

但是，如果不存在 id 属性，我们可以使用其他属性，如 class、name 等。如果不存在 id、name 和 class 等属性，我们可以利用仅对该标签可用的唯一属性或属性及其值的组合来识别元素。

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

相对 xpath

Xpath 可以分为两种类型 - 绝对路径和相对路径。相对 xpath 从要定位的元素开始，而不是从根开始。

它以 // 符号开头，表示任何后代。它的优点是，即使 DOM 中删除或添加了元素，特定元素的相对 xpath 也不会受到影响。

要通过属性获取相对路径，xpath 表达式如下 −

//tagname[@attribute='value'].

让我们使用 alt 属性识别页面上突出显示的徽标，然后单击它。

元素的相对 xpath 如下所示

//img[@alt='tutorialspoint'].

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

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function selectorRelativeXpath(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   a wait page.goto('https://tutorialspoint.com/questions/index.php')
   //identify element with relative xpath then click
   const b = (await page.$x("//img[@alt='tutorialspoint']"))[0]
   b.click()
   //wait for sometime
   //wait for sometime
   await page.waitForTimeout(4000)
   //obtain URL after click
   console.log(await page.url())
}
selectorRelativeXpath()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，将在控制台中打印单击徽标图像后导航到的页面的 URL - https://tutorialspoint.com/index.htm。

Puppeteer - XPath 轴

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

但是，如果不存在 id 属性，我们可以使用其他属性，如 class、name 等。如果不存在 id、name 和 class 等属性，我们可以利用仅对该标签可用的唯一属性或属性及其值的组合来识别元素。

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

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

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

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

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

因此，xpath 表达式将如下所示 −

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

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

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function selectorAxesXpath(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/index.htm')
   //identify element with xpath axes
   const n = (await page.$x("//table/tbody/tr/child::td"))[0]
   // get value of class attribute
   let v = await page.$eval("input", n => n.getAttribute("class"))
   console.log(v)
}
selectorAxesXpath()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

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

Puppeteer - 类型选择器

一旦我们导航到一个网页，我们就需要与页面上可用的网页元素进行交互，例如点击链接/按钮、在编辑框中输入文本等等，以完成我们的自动化测试用例。

为此，我们的第一步是识别元素。如果一个标签在页面中只使用一次，我们可以将其用作类型选择器。如果有多个元素具有相同的标签，则只识别页面上第一个匹配的元素。

语法

类型选择器的语法如下所示：

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

在下面的示例中，让我们识别具有标签名 h4 的突出显示的元素并获取其文本 - 您正在浏览最佳的在线教育资源。

首先，请按照 Puppeteer 的“基础测试”章节中的步骤 1 到 2 操作，步骤如下所示

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function selectorType(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/index.htm')
   //identify element with type selector
   const n = await page.$("h4")
   //obtain text
   const text = await (await n.getProperty('textContent')).jsonValue()
   console.log("Text is: " + text)
}
selectorType()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，元素上的文本 - 您正在浏览最佳的在线教育资源将在控制台中打印。

名称选择器和类名选择器

让我们从学习名称选择器开始。

名称选择器

一旦我们导航到一个网页，我们就需要与页面上可用的网页元素进行交互，例如点击链接/按钮、在编辑框中输入文本等等，以完成我们的自动化测试用例。

为此，我们的第一步是识别元素。如果 name 属性的值在页面中只使用一次，我们可以将其用作名称选择器。如果有多个元素具有相同的名称，则只识别页面上第一个匹配的元素。

语法

名称选择器的语法如下所示：

const f = await page.$('[name="search"]')

让我们识别下面图像中突出显示的编辑框并输入文本：

上面图像中突出显示的元素的 name 属性值为 search。上述元素的名称选择器表达式应为 [name="search"]。

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function selectorName(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage();
   //launch URL
   await page.goto('https://tutorialspoint.com/index.htm')
   //identify edit box with name
   const f = await page.$('[name="search"]')
   //enter text
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //browser close
   await browser.close()
}
selectorName()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

类名选择器

一旦我们导航到一个网页，我们就需要与页面上可用的网页元素进行交互，例如点击链接/按钮、在编辑框中输入文本等等，以完成我们的自动化测试用例。

为此，我们的第一步是识别元素。如果一个类名在页面中只使用一次，我们可以将其用作类名选择器。如果有多个元素具有相同的类名，则只识别页面上第一个匹配的元素。

语法

类名选择器的语法如下所示：

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

在下面的示例中，让我们识别具有类名 heading 的突出显示的元素并获取其文本 - 关于 Tutorialspoint。

上述元素的 id 选择器表达式应为 .heading。

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function getText(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/about/about_careers.htm')
   //identify element with class name
   const f = await page.$(".heading")
   //obtain text
   const text = await (await f.getProperty('textContent')).jsonValue()
   console.log("Text is: " + text)
}
getText()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，元素的文本 - 关于 Tutorialspoint 将在控制台中打印。

Puppeteer - ID 选择器

一旦我们导航到一个网页，我们就需要与页面上可用的网页元素进行交互，例如点击链接/按钮、在编辑框中输入文本等等，以完成我们的自动化测试用例。

为此，我们的第一步是识别元素。id 属性通常在一个页面中是唯一的，可以用作 id 选择器。它是一个非常有用的定位器，与所有其他选择器相比，可以加快自动化测试的执行速度。

语法

Id 选择器的语法如下所示：

const n = await page.$("#loc")

在下面的示例中，让我们识别具有 id txtSearchText 的突出显示的元素并在其中输入文本。

上述元素的 id 选择器表达式应为 #txtSearchText。

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function selectorId(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage();
   //launch URL
   await page.goto('https://tutorialspoint.com/tutor_connect/index.php')
   //identify element with id
   const f = await page.$("#txtSearchText")
   //enter text
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //browser close
   await browser.close()
}
selectorId()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

Puppeteer - 属性选择器

一旦我们导航到一个网页，我们就需要与页面上可用的网页元素进行交互，例如点击链接/按钮、在编辑框中输入文本等等，以完成我们的自动化测试用例。

为此，我们的第一步是识别元素。如果一个属性及其值在一个标签中只使用一次，我们可以将其用作属性选择器。如果有多个元素具有相同的属性值，则只识别页面上第一个匹配的元素。

语法

属性选择器的语法如下所示：

const f = await page.$("ul[name='val']")

这里，ul 是标签名，val 是为 name 属性设置的值。

在下图中，让我们获取突出显示元素的文本 - 关于 Tutorialspoint：

上述元素的属性选择器表达式应为 li[class='heading']。

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function selectorAttribute(){
   //launch browser in headed mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/about/about_careers.htm')
   //identify element with attribute selector
   const n = await page.$("li[class='heading']")
   //obtain text
   const t = await (await n.getProperty('textContent')).jsonValue()
   console.log("Obtained text is: " + t)
}
selectorAttribute()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，元素的文本 - 关于 Tutorialspoint 将在控制台中打印。

Puppeteer - 处理链接/按钮

Puppeteer 能够处理页面上的链接/按钮。在点击元素之前，我们必须能够使用任何定位器唯一地识别它。在 Puppeteer 中，只有当元素的尺寸大于零像素时，我们才能点击它。

在下图中，我们将点击下面突出显示的链接 - 订阅高级计划，其标签名为 h1：

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function clickElement(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/index.htm')
   //identify element then click
   await page.click('h1');
   //get page title after click
   console.log(await page.title())
}
clickElement()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，点击链接 - 订阅高级计划后获得的标题 - Tutorials Point 付费订阅套餐 - Tutorialspoint 将在控制台中打印。

处理编辑框 & 复选框

让我们了解 Puppeteer 如何处理编辑框。

处理编辑框

Puppeteer 能够处理编辑框。编辑框的 HTML 标签为 input，其 type 属性设置为 text 值。

下面列出了一些处理编辑框的方法：

type()

此方法用于在编辑框和文本区域中输入文本，而不会替换已存在的內容。

语法

type() 的语法如下所示：

const n = await page.$("#txt")
await n.type("Puppeteer")

我们可以在编辑框中输入文本并设置一定的延迟。这是通过添加参数 {delay: 时间间隔} 来实现的。时间间隔以毫秒表示。

语法

其语法如下所示：

await page.type("[class='loc']", "Tutorialspoint", {delay:700})

要删除在编辑框中输入的文本，我们必须在该字段上执行三次点击事件（使用参数 clickCount），然后按退格键。这类似于选择编辑框中的所有值，然后按退格键。

语法

语法如下所示：

const n = await page.$("#txt")
await n.type("Puppeteer")
await n.click({clickCount: 3});
await page.keyboard.press('Backspace')

要获取在编辑框中输入的值，我们必须使用 getProperty 方法并将 value 作为参数传递给该字段。

const v = await (await n.getProperty("value")).jsonValue()
console.log(v)

在下图中，让我们输入文本 Puppeteer，然后将其清除。

首先，请按照 Puppeteer 的“基础测试”章节中的步骤 1 到 2 操作，步骤如下所示：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function enterText(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage();
   //launch URL
   await page.goto('https://tutorialspoint.com/index.htm')
   //identify edit box
   const f = await page.$("#gsc-i-id1")
   //enter text
   f.type("Puppeteer")
   //clear text entered
   await f.click({clickCount: 3})
   //wait for sometime
   await page.waitForTimeout(4000)
   await page.keyboard.press('Backspace')
   //browser close
   await browser.close()
}
enterText()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

处理复选框

在使用 Puppeteer 自动化测试时，我们可以处理 UI 中的复选框。复选框在 html 代码中用 input 作为标签名，checkbox 作为 type 进行识别。

下面给出了一些处理复选框的方法：

click()

它用于选中和取消选中复选框。此方法是 ElementHandle 类的一部分。

语法

click() 的语法如下所示：

const n = await page.$("#txt")
n.click()

要验证复选框是否已选中，我们必须使用 getProperty 方法并将 value 作为参数传递给该字段。它返回一个布尔值（如果选中则为 true，否则为 false）。

const v = await (await n.getProperty("checked")).jsonValue()
console.log(v)

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function checkBoxHandle(){
   //launch browser in headless 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 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。

Puppeteer - 处理框架

html 代码中的框架由 frames/iframe 标签表示。Puppeteer 可以通过从主页面切换到框架来处理框架。要操作框架内的元素，我们首先必须借助定位器识别框架。contentFrame 方法用于访问框架内的元素。

语法

处理框架的语法如下所示：

const f = await page.$("frame[name='frame-bottom']")
const m = await f.contentFrame()

让我们看看框架内元素的 html 代码，并获取其中的文本 - BOTTOM。

上图中突出显示的标签名为 frame，其 name 属性的值为 frame-bottom。

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function frameHandle(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://the-internet.herokuapp.com/nested_frames')
   //identify frame
   const f = await page.$("frame[name='frame-bottom']")
   //move to frame
   const x = await f.contentFrame();
   //identify element inside frame
   const n = await x.$("body")
   //get text
   const v = await (await n.getProperty("textContent")).jsonValue()
   console.log(v)
}
frameHandle()

步骤 4 - 使用以下命令执行代码：

node <filename>

所以在我们的示例中，我们将运行以下命令：

node testcase1.js

命令成功执行后，框架内的文本 - BOTTOM 将在控制台中打印。

Puppeteer - 键盘模拟

Puppeteer 可以执行键盘模拟操作，例如按键盘上的某个键、按向上键、向下键等。所有这些都是使用 keyboard 方法完成的。

键盘方法

一些键盘方法如下所示：

keyboard.press()

此方法用于模拟按键。要按下的键作为参数传递给此方法。

语法如下：

语法

keyboard.press('Enter')

keyboard.type()

此方法用于模拟从键盘输入文本。要输入的文本作为参数传递给此方法。

语法如下：

语法

keyboard.type('Puppeteer')

keyboard.sendCharacter()

它与 keyboard.type() 相同。

语法如下：

语法

keyboard.sendCharacter('Puppeteer')

keyboard.up()

此方法用于模拟按下键盘上的向上箭头。

语法如下：

语法

keyboard.up()

keyboard.down()

此方法用于模拟按下键盘上的向下箭头。

语法如下：

语法

keyboard.down()

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function keyboradSimulation(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/index.htm')
   //identify edit box with id
   const f = await page.$("#gsc-i-id1")
   //enter text
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //press Enter
   await page.keyboard.press('Enter')
   //wait for sometime
   await page.waitForTimeout(4000)
   //identify element
   const t = await page.$(".gsc-result-info")
   //obtain text
   const text = await (await t.getProperty('textContent')).jsonValue()
   console.log("Text is: " + text)
}
keyboradSimulation()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，在输入 Puppeteer 后按 Enter 获取的文本 - 关于 39 个结果（0.15 秒）将在控制台中打印。

Puppeteer - 获取元素文本

我们可以在 Puppeteer 中获取元素文本。这是借助 textContent 属性实现的。元素的此属性作为参数传递给 getProperty 方法。

语法

获取元素文本的语法如下所示：

const n = await page.$("#txt")
const t = await (await n.getProperty('textContent')).jsonValue()

在下图中，让我们获取突出显示元素的文本 - 关于 Tutorialspoint：

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function getText(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/about/about_careers.htm')
   //identify element
   const f = await page.$("[class='heading']")
   //obtain text
   const text = await (await f.getProperty('textContent')).jsonValue()
   console.log("Text is: " + text)
}
getText()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，元素的文本 - 关于 Tutorialspoint 将在控制台中打印。

Puppeteer - 获取元素属性

我们可以使用 Puppeteer 获取元素的属性值。属性添加到 HTML 标签中。它们用于描述元素的属性。属性及其值以键值对的形式定义。

让我们以一个具有以下属性的编辑框为例：

这里，input 是标签名。HTML 中的标签可能具有也可能不具有属性。type、class、name、id 等是此元素的属性。例如，在 id = gsc-i-id1 中，= 左侧的文本是属性名称（即 id），= 右侧的文本是属性值（即 gsc-i-id1）。

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

元素属性的方法

获取元素属性的方法如下所示：

getAttribute()

此方法用于获取作为参数传递给此方法的属性的值。

语法

语法如下：

let v = await page.$eval("input", element=> element.getAttribute("class"))

element.<attribute name>

语法

语法如下：

let v = await page.$eval("input", element=> element.class)

element.getProperty()

此方法用于获取作为参数传递给此方法的属性的值。

语法如下：

语法

const n = await page.$("#txt")
const t = await (await n.getProperty('textContent')).jsonValue()

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

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function getElementAttribute(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/index.htm')
   //identify element with id
   const n = await page.$("#gsc-i-id1")
   //get class attribute
   let v = await page.$eval("input", n => n.getAttribute("class"))
   console.log(v)
}
getElementAttribute()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

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

Puppeteer - 设备模拟

我们可以在 Puppeteer 中使用移动配置运行测试，并检查网页的响应式属性。Puppeteer 支持的设备列表可以从 Chrome DevTools 中获取。右键单击在 Chrome 浏览器中打开的页面，然后选择“检查”。

然后，点击“切换设备工具栏”。

点击下拉菜单 - 响应式以获取设备列表。

要模拟设备，我们必须使用 emulate() 方法，并将要模拟的设备作为参数传递给此方法。此方法的语法如下所示：

const m = puppeteer.devices['iPhone X']
//emulate iPhoneX
await page.emulate(m)

让我们使用 Puppeteer 中的 emulate 函数模拟 iPhone X 设备。

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const puppeteer = require('puppeteer')
//launch browser in headed mode
puppeteer.launch({headless:false}).then(async browser => {
   //browser new page
   const page = await browser.newPage()
   //set device to iPhone X
   const m = puppeteer.devices['iPhone X']
   //emulate iPhoneX
   await page.emulate(m)
   //launch URL
   await page.goto('https://tutorialspoint.com/index.htm')
   //capture screenshot of emulated device
   await page.screenshot({ path: 'iPhoneDevice.png'})
   //browser close
   await browser.close()
})

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，将在页面目录中创建一个名为 iPhoneDevice.png 的新文件。它包含为 iPhone X 设备模拟的网页的捕获屏幕截图。

Puppeteer - 禁用 JavaScript

我们可以使用 Puppeteer 禁用 JavaScript。为此，我们必须根据其类型阻止请求/响应。让我们尝试通过禁用 JavaScript 来启动页面。

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt = require('puppeteer')
pt.launch().then(async browser => {
//browser new page
   const page = await browser.newPage()
   //monitor requests
   await page.setRequestInterception(true)
   //check resourceType is script
   page.on('request', request => {
      if (request.resourceType() === 'script')
         request.abort();
      else
         request.continue();
   })
   //launch application
   await page.goto('https://tutorialspoint.com/index.htm')
   //browser close
   await browser.close()
})

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

Puppeteer - 同步

Puppeteer Page 类包含用于实现同步的方法。这些方法用于等待页面上的操作/元素。它等待满足条件（真值）。例如，我们经常等待文本出现在页面上。

同步方法

Puppeteer 中的同步方法如下所示：

waitFor

此方法用于在解析 Promise 之前等待特定时间。

语法

语法如下：

await page.waitFor(4000)

waitForSelector

此方法用于等待元素在网页上显示或消失。

语法

语法如下：

page.waitForSelector(
   selector,
   {options : value}
)

waitForSelector 方法接受两个参数。第一个参数是元素的选择器值。第二个参数是选项数组。选项如下所示：

• Visible - Puppeteer 将等待页面上的元素定位器可见。默认值为 false。

• Hidden - Puppeteer 将等待页面上的元素定位器隐藏。默认值为 false。

• Timeout - 元素的最大等待时间（毫秒）。默认值为 30000。如果将超时设置为零，则此选项将被丢弃。

可以使用以下方法修改默认等待时间：

page.setDefaultTimeout(6000)

例如：

let l = await page.waitForSelector( "#ltxt", { visible: true } )

waitForXpath

此方法用于等待由 xpath 标识的元素/元素在网页上显示或消失。

语法

语法如下：

page.waitXpath(
   Xpath value,
   {options : value}
)

waitForXpath 方法接受两个参数。第一个参数是元素的 xpath 选择器值。第二个参数是选项数组。选项如下所示：

• Visible - Puppeteer 将等待页面上的元素定位器可见。默认值为 false。

• Hidden - Puppeteer 将等待页面上的元素定位器隐藏。默认值为 false。

• Timeout - 元素的最大等待时间（毫秒）。默认值为 30000。如果将超时设置为零，则此选项将被丢弃。

可以使用以下方法修改默认等待时间：

page.setDefaultTimeout(6000)

例如：

let x= await page.waitForXPath( "//*[@name='search']", { visible: true } )

waitForFunction

此方法用于等待提供的函数返回 true 值。

语法

语法如下：

page.waitForFunction(
   pagefunction,
   {options : value},
   pagefunction args
)

waitForFunction 方法具有以下参数：

pagefunction 是要执行的函数。例如：

page.waitForFunction("document.getElementById('txt').value === 'text'", {})

此函数将等待 id 为 的元素的值等于 text。

option 是一个等待参数数组。它们是 - polling（以毫秒为单位执行 pagefunction 的间隔）和 timeout（Puppeteer 将等待 pagefunction 返回 true 值的最大时间）。

pagefunction args 是传递给 pagefunction 函数的参数。

在下图中，让我们输入文本 - Puppeteer，然后按 Enter。

按 Enter 后，将打开一个新窗口，其中包含搜索结果，文本为 - 关于 39 个结果。

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//Puppeteer library
const pt= require('puppeteer')
async function waitImplementation(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://tutorialspoint.com/index.htm')
   //identify edit box
   const f = await page.$("#gsc-i-id1")
   //enter text
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //press Enter
   await page.keyboard.press('Enter')
   //wait for an element xpath
   await page.waitForXPath("//div[@class='gsc-result-info']")
   //identify element
   const t = await page.$(".gsc-result-info")
   //obtain text
   const text = await (await t.getProperty('textContent')).jsonValue()
   console.log("Text is: " + text)
}
waitImplementation()

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

Puppeteer - 截取屏幕截图

在使用 Puppeteer 开发的自动化测试中工作时，我们可以使用截图方法捕获截图。如果遇到应用程序错误、测试用例失败等，通常会捕获截图。

语法

在 Puppeteer 中捕获截图的语法如下：

await page.screenshot({
   path: 'tutorialspoint.png'
})

这里，将截图保存到的路径作为参数传递给方法。这样，只会捕获网页的可视部分。要捕获全页截图，我们必须传递另一个名为 fullPage 的参数，并将其值设置为 true。

语法

语法如下：

await page.screenshot({
   path: 'tutorialspoint.png', fullPage: true
})

让我们捕获以下页面的截图：

首先，请按照 Puppeteer 基本测试章节中的步骤 1 到 2 操作，步骤如下：

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

Puppeteer 安装的详细信息在 Puppeteer 安装章节中有讨论。

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

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

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

//adding Puppeteer library
const pt = require('puppeteer');
pt.launch().then(async browser => {
   //browser new page
   const p = await browser.newPage();
   //set viewpoint of browser page
   await p.setViewport({ width: 1000, height: 500 })
   //launch URL
   await p.goto('https://tutorialspoint.com/index.htm')
   //capture screenshot
   await p.screenshot({
      path: 'tutorialspoint.png'
   });
   //browser close
   await browser.close()
})

步骤 4 − 使用以下命令执行代码：

node <filename>

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

node testcase1.js

命令成功执行后，将在 page 目录中创建一个名为 tutorialspoint.png 的新文件。它包含在浏览器中启动的页面的捕获屏幕截图。