WebdriverIO 快速指南

---

---

WebdriverIO - 简介

WebdriverIO 可以帮助自动化针对使用 React、Angular、Polymer、Vue.js 等现代应用程序设计的任何测试。此外，它还可以用于 Android 和 iOS 平台。

WebdriverIO 使用 Node.js 实现，自动化代码使用 JavaScript 编写。它属于 Selenium 的一部分。Selenium 的所有功能在 WebdriverIO 中都可用，此外还有一些可用于验证的辅助断言。

如今，大多数应用程序的前端都是使用 React、Angular 等 JavaScript 框架开发的。WebdriverIO 对于测试这些应用程序非常有用。

这是因为 WebdriverIO 的编码也是用 JavaScript 完成的。此工具属于 Selenium 的一部分，还有一些额外的 API。如果我们了解 Selenium，那么学习 WebdriverIO 就很简单了。

WebdriverIO 也可用于测试普通应用程序，但是如果我们使用 WebdriverIO 来验证使用 React、Angular、Polymer、Vue.js 等实现的任何应用程序，我们可以在构建强大的框架方面获得额外的优势。

如果我们正在使用 JavaScript 创建 Selenium 测试，那么 WebdriverIO 应该是最佳选择。还有其他工具，例如基于 JavaScript 框架的 Cypress，但它不属于 Selenium 的一部分。

如果我们关注过去几年的 WebdriverIO 下载的 npm 趋势，我们将观察到 WebdriverIO 使用量的上升趋势（如下链接所示）：

https://www.npmtrends.com/webdriverio

您的计算机上将显示以下屏幕：

报告

WebdriverIO 生成的一些报告如下：

• Allure

• Spec

• JUnit

• HTML

• JSON

• Cucumber JSON

服务

WebdriverIO 提供的一些服务如下：

• Appium

• Docker

• Selenium 独立服务器

• ChromeDriver

• Firefox 配置文件

• DevTools

测试框架

WebdriverIO 支持的一些测试框架如下：

• Cucumber

• Jasmine

• Mocha

WebdriverIO - 预备条件

WebdriverIO 的前提条件是需要一个编辑器来编写 JavaScript 代码。为此，我们可以使用 Visual Studio Code。我们可以从以下链接下载它：

https://vscode.js.cn

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

您的计算机上将显示以下屏幕：

步骤 2 - 单击“下载”按钮后，将下载一个 zip 文件。单击此 zip 文件，Visual Studio Code 应用程序应该可在机器上使用。

您的计算机上将显示以下屏幕：

步骤 3 - 双击 Visual Studio Code，它将启动并显示欢迎页面。您的计算机上将显示以下屏幕：

WebdriverIO - 架构

WebdriverIO 架构包含以下组件：

• NodeJS

• WebdriverIO

• JavaScript

• JSON Wire 协议

• 服务

• 浏览器

• 应用程序

Nodejs 用于执行 JavaScript 运行时环境。它实际上是一个开源项目。WebdriverIO 基于 Nodejs 开发，JavaScript 是最终用户使用 WebdriverIO 库实现的脚本。

因此，最终用户实现的 JavaScript 通过 Nodejs 使用 WebdriverIO 将请求传递给服务（以 HTTP 命令的形式）。整个过程都是遵循 JSON Wire 协议完成的。

服务将请求发送到 Chrome、Firefox 等浏览器，以对被测应用程序执行测试。因此，服务可以被称为浏览器和自动化框架之间的中间层。

WebdriverIO - NodeJS 入门

WebdriverIO 的编码使用 JavaScript 完成。为此，必须安装 NodeJS，因为它是一个 JavaScript 引擎。只有安装它之后，我们才能执行 WebdriverIO 测试。配置 NodeJS 的步骤如下：

步骤 1 - 使用以下链接启动应用程序：

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

步骤 2 - 根据我们使用的本地操作系统（Windows、Mac 或 Linux），单击链接下载安装程序。您的计算机上将显示以下屏幕：

步骤 3 - 下载安装程序后，单击它。导航到 Node.js 安装程序欢迎屏幕。单击“继续”。您的计算机上将显示以下屏幕：

步骤 4 - 同意 Nodejs 的条款协议。您的计算机上将显示以下屏幕：

步骤 5 - 单击“安装”。

步骤 6 - 显示 Nodejs 安装成功消息后，单击“关闭”。您的计算机上将显示以下屏幕：

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

node

您的计算机上将显示以下屏幕：

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

WebdriverIO - NPM 安装

安装 Nodejs 后，我们必须创建一个 NPM 文件夹。NPM 实际上是用于编写 JavaScript 测试的包管理器。NPM 的官方页面可在以下链接中找到：

https://npmjs.net.cn/search?q=webdriverio

启动此页面后，在搜索框中输入 WebdriverIO 并单击“搜索”，以获取 WebdriverIO 的 npm 包。您的计算机上将显示以下屏幕：

创建 NPM 项目

创建 NPM 项目的步骤如下：

步骤 1 - 在某个位置创建一个空文件夹，例如 webdriverIO。

步骤 2 - 打开终端并从当前目录移动到我们创建的空文件夹的目录。

步骤 3 - 运行以下命令：

npm init -y

给出 y 参数是为了设置默认值。您的计算机上将显示以下屏幕：

步骤 4 - 在步骤 3 中运行命令后获得的输出表明所有默认配置都已捕获到 package.json 文件中。它在我们步骤 1 中创建的文件夹 (名为 webdriverIO) 中生成。

您的计算机上将显示以下屏幕：

此 package.json 包含我们使用 WebdriverIO 项目所需的所有依赖项。要获取 NPM 下的任何包，我们可以参考以下链接：

https://npmjs.net.cn/

WebdriverIO - VS Code 安装

在本章中，让我们了解如何在 WebdriverIO 中安装 Visual Studio (VS) Code。

安装 Visual Studio Code 的步骤如下：

步骤 1 - 导航到以下链接：

https://vscode.js.cn/

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

您的计算机上将显示以下屏幕：

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

您的计算机上将显示以下屏幕：

步骤 4 - 双击它，Visual Studio Code 应用程序应该启动并显示欢迎页面。

您的计算机上将显示以下屏幕：

步骤 5 - 单击“打开文件夹”链接并导入包含 package.json 文件的文件夹。package.json 文件的创建细节在标题为“NPM 安装”的章节中详细讨论。

您的计算机上将显示以下屏幕：

WebdriverIO - package.json

生成 package.json 文件后，我们需要为 WebdriverIO 安装其他 npm 包。package.json 文件的创建细节在标题为“NPM 安装”的章节中详细讨论。

NPM 注册表中 WebdriverIO 的必要包可在以下链接中找到：

https://npmjs.net.cn/package/webdriverio

您的计算机上将显示以下屏幕：

要安装 WebdriverIO，我们必须从终端运行以下命令：

npm i webdriverio 

或

npm install webdriverio.

您的计算机上将显示以下屏幕：

命令成功执行后，package.json 现在显示已安装的 WebdriverIO 版本。

如果项目中创建的 node_modules 文件夹包含 webdriverio 文件夹，我们可以验证 WebdriverIO 是否已成功安装。

您的计算机上将显示以下屏幕：

WebdriverIO - Mocha 安装

Mocha 是一个基于 JavaScript 的测试框架，它构建在 Nodejs 之上。它使异步测试执行流程变得有趣且简单。Mocha 测试可以串行运行。

它能够生成准确且可自定义的报告。此外，未捕获的异常可以轻松地与正确的测试用例关联。Mocha 的详细信息可在以下链接中找到：

https://tutorialspoint.com/tesults/tesults_integrating_your_automated_tests.htm

要在 NPM 注册表中安装 Mocha 包，命令如下：

npm install mocha

您的计算机上将显示以下屏幕：

命令成功执行后，已安装的 Mocha 版本将反映在 package.json 文件中。

Selenium 独立服务器安装

WebdriverIO 在 Selenium 的框架下工作。为了与浏览器建立通信，我们需要安装 Selenium 独立服务器。

要安装 Selenium 独立服务器，我们需要运行以下命令：

npm install selenium-standalone

或者：

npm i selenium-standalone.

您的计算机上将显示以下屏幕：

成功执行命令后，已安装的 Selenium 独立服务器软件包版本将反映在 package.json 文件中。

WebdriverIO - 配置文件生成

WebdriverIO 测试由配置文件控制。它通常被认为是 WebdriverIO 的核心。它包含要执行的测试用例的详细信息、应运行测试的浏览器、全局信息——超时、报告、屏幕截图等等。

在 WebdriverIO 中，我们不会执行单个测试。我们需要借助测试运行器来触发配置文件。测试运行器扫描配置文件中提供的信息，然后相应地触发测试。

要获得测试运行器，我们必须安装 WebdriverIO CLI 依赖项。要安装它并将其保存在 package.json 文件中，我们必须运行以下命令：

npm i --save-dev @wdio/cli

成功执行此命令后，CLI 依赖项的版本将反映在 package.json 文件中。您的计算机上将出现以下屏幕：

要创建配置文件，我们必须运行以下命令：

npx wdio config -y

成功执行此命令后，名为 wdio.conf.js 的配置文件将在我们的项目中创建。此外，package.json 文件现在应该在 devDependencies 字段下包含更多依赖项。

您的计算机上将显示以下屏幕：

除了上图中标明的依赖项外，我们还需要添加一个依赖项，以便 WebdriverIO 命令可以同步执行。

我们必须在 devDependencies 字段下添加依赖项 - "@wdio/sync": "<版本号>"。然后运行以下命令：

npm install 

要从测试运行器运行配置文件，我们必须运行以下命令：

npx wdio run wdio.conf.js

创建 Mocha Spec 文件

创建配置文件后，我们将在 WebdriverIO 项目中找到一个生成的测试文件夹。关于如何创建配置文件的详细信息在名为“配置文件生成”的章节中进行了描述。

您的计算机上将显示以下屏幕：

如果我们展开此文件夹，我们将找到两个子文件夹 - pageobjects 和 specs，其中包含默认创建的 JavaScript 文件。这些基本上是提供的示例测试，以指导首次用户熟悉 Mocha 框架。

Mocha 是一个基于 JavaScript 的测试框架，它构建在 Nodejs 之上。它使异步测试执行流程变得有趣且简单。Mocha 测试可以串行运行。

它能够生成准确且可自定义的报告。此外，未捕获的异常可以轻松地与正确的测试用例关联。Mocha 的详细信息可在以下链接中找到：

www.tutorialspoint.com/tesults/tesults_integrating_your_automated_tests.htm

根据 Mocha 测试框架，所有测试文件都称为 spec 文件，它们应该位于 specs 文件夹中。

测试文件中的代码块

测试文件应包含以下代码块：

• describe − 它在层次结构上高于 it 块。测试文件可以有多个 describe 块。一个 describe 块表示一个测试套件。它有两个参数：测试套件的描述和一个匿名函数。

• it − 它在层次结构上低于 describe 块。一个 describe 块可以有多个 it 块。一个 it 块表示一个测试用例，并且在 describe 块中是必须的。它有两个参数：测试用例的描述和一个匿名函数。实际的 WebdriverIO 代码在 it 块中实现。创建 Mocha 文件的步骤

要创建 Mocha 文件，让我们按照以下步骤操作：

步骤 1 − 右键单击 specs 文件夹（位于 test 文件夹中），然后选择“新建文件”。您的计算机上将出现以下屏幕：

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

您的计算机上将显示以下屏幕：

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

// test suite name 
describe('Tutorialspoint Application', function () {
   // test case name
   it('Get Page Title', function (){
   // URL launching
      browser.url("https://tutorialspoint.com/about/about_careers.htm")
      //print page title in console
      console.log(browser.getTitle())
   });    
});

在上面的代码中，浏览器是由 WebdriverIO 公开的全局对象。

请注意 − 我们不能直接运行此单个文件。我们将借助配置文件来执行它。

WebdriverIO - VS Code 智能提示

完成 Visual Studio Code 的安装后，我们应该在编辑器中添加 intellisense，以便一旦我们开始编写 WebdriverIO 命令，就会显示 WebdriverIO 方法的自动建议。

关于如何进行 VS Code 安装的详细信息在名为“VS Code 安装”的章节中进行了详细讨论。

这是一个非常重要的功能，应该添加它，以便最终用户不需要记住 WebdriverIO 的原始代码。

向 VS Code 添加 intellisense

向 VS Code 添加 WebdriverIO 的 intellisense 的步骤如下：

步骤 1 − 单击 WebdriverIO 项目右侧出现的“新建文件”按钮。

您的计算机上将显示以下屏幕：

步骤 2 − 将文件名输入为 jsconfig.json。在这里，我们必须指定实现测试的 spec 文件的路径。

如果我们想将 intellisense 功能应用于 test 文件夹中的所有 spec 文件，我们可以将相对路径指定为 test/spec/*.js。

您的计算机上将显示以下屏幕：

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

{
   "include": [
      //relative path of all spec files
      "test/specs/*.js",
      "**/*.json",
      "node_modules/@wdio/sync",
      "node_modules/@wdio/mocha-framework"
   ]
}

步骤 4 − 在 spec 文件中，开始编写 WebdriverIO 对象或方法，我们将获得完整的自动建议。

您的计算机上将显示以下屏幕：

WebdriverIO - wdio.conf.js 文件

WebdriverIO 测试由配置文件控制。它通常被认为是 WebdriverIO 的核心。它包含要执行的 spec 文件的详细信息、应运行测试的浏览器、全局信息——基本 URL、超时、报告、屏幕截图等等。

在 WebdriverIO 中，我们不会执行单个测试。我们需要借助测试运行器来触发配置文件。测试运行器扫描配置文件中提供的信息，然后相应地触发测试。

要创建配置文件，我们必须运行以下命令：

npx wdio config -y

成功执行此命令后，名为 wdio.conf.js 的配置文件将在我们的项目中创建。

您的计算机上将显示以下屏幕：

在此文件中，我们必须指定要在 specs 参数中执行的 spec 文件的路径。

默认情况下，提供的路径是： ./test/specs/**/*.js。这意味着应选择 specs 子文件夹（位于 test 文件夹下）下的任何 .js 文件进行执行。

您的计算机上将显示以下屏幕：

要使用 wdio.conf.js 文件执行测试，我们必须运行以下命令：

npx wdio run wdio.conf.js

您的计算机上将显示以下屏幕：

成功执行命令后，将在控制台中获得启动的应用程序的页面标题。

但是，许多日志都捕获在控制台中。这是因为参数 logLevel 默认在 wdio.conf.js 文件中设置为 info。

您的计算机上将显示以下屏幕：

为了摆脱一些日志并仅获得测试用例指示的那些日志，我们可以将此参数设置为 silent。

您的计算机上将显示以下屏幕：

再次使用以下命令运行配置文件：

npx wdio run wdio.conf.js

您的计算机上将显示以下屏幕：

成功执行命令后，我们发现日志减少了，并且在控制台中获得了启动的应用程序的页面标题 - 关于 Tutorials Point 的职业 - Tutorialspoint。

WebdriverIO - XPath 定位器

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

为此，我们的首要任务是识别元素。我们可以为元素创建 xpath 以进行识别。创建 xpath 表达式的规则如下：

xpath 的语法是

//tagname[@attribute='value']

此处，tagname 是可选的。

例如：

//img[@alt='tutorialspoint']

让我们看看突出显示的链接 - 首页的 html 代码。您的计算机上将出现以下屏幕：

元素 Home 的 xpath 如下：

//a[@title='TutorialsPoint - Home']. 

您的计算机上将显示以下屏幕：

在 WebdriverIO 代码中，我们可以按以下格式指定元素的 xpath 表达式：

$('value of the xpath expression')

或者，我们可以将此表达式存储在一个变量中：

const p = $('value of the xpath expression')

让我们识别下图中突出显示的文本并获取其文本：

上面突出显示的元素的 xpath 应如下所示：

//li[@class='heading']

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Xpath', function(){        
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with xpath then obtain text
      console.log($("//li[@class='heading']").getText() + " - is the text.")
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js. 

关于如何创建配置文件的详细信息在名为“wdio.conf.js 文件”和名为“配置文件生成”的章节中进行了详细讨论。

您的计算机上将显示以下屏幕：

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

带有文本的 Xpath 定位器

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

我们可以为元素创建 xpath 以进行识别。但是，在某些情况下，没有可用的 HTML 属性或 tagname 来唯一标识元素。

在这种情况下，我们可以使用 text 函数，借助页面上可见的文本为元素创建 xpath。text 函数区分大小写。

使用可见文本创建 xpath 表达式的规则如下：

xpath 的语法如下：

//tagname[text()='displayed text']. 

例如：

//li[text()='WebdriverIO']

让我们使用 xpath 中的可见文本识别下图中突出显示的元素：

使用 text() 函数，上面突出显示的元素的 xpath 应如下所示：

//li[text()='About Tutorialspoint'] 

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Xpath - text()', function(){
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with xpath - visible text then obtain text
      console.log($("//li[text()='About Tutorialspoint']").getText() + " - is the text.")
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js. 

关于如何创建配置文件的详细信息在名为“wdio.conf.js 文件”和名为“配置文件生成”的章节中进行了详细讨论。

您的计算机上将显示以下屏幕：

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

WebdriverIO - CSS 定位器

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

为此，我们的首要任务是识别元素。我们可以为元素创建 css 以进行识别。创建 css 表达式的规则如下：

CSS 的语法如下：

tagname[attribute='value']

此处，标签名是可选的。我们也可以专门使用 id 和 class 属性来创建 CSS 表达式。

使用 id，CSS 表达式的格式应为 tagname#id。例如，input#txt [此处 input 是标签名，txt 是 id 属性的值]。

使用 class，CSS 表达式的格式应为 tagname.class。

例如：

input.cls-txt 

此处，input 是标签名，cls-txt 是 class 属性的值。

在 WebdriverIO 代码中，我们可以如下格式指定元素的 CSS 表达式：

$('value of the css expression')

或者，我们可以将此表达式存储在一个变量中，如下所示：

const p = $('value of the css expression')

让我们识别下图中突出显示的文本并获取其文本：

上面突出显示的元素的 CSS 应为 li.heading。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with CSS', function(){        
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with CSS then obtain text
      console.log($("li.heading").getText() + " - is the text.")
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为“wdio.conf.js 文件”和名为“配置文件生成”的章节中进行了详细讨论。

您的计算机上将显示以下屏幕：

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

WebdriverIO - 链接文本定位器

导航到网页后，我们可能通过单击链接与网页元素交互以完成自动化测试用例。定位器链接文本用于具有锚标记的元素。

我们可以识别具有匹配文本的锚元素。在 WebdriverIO 代码中，我们可以选择以下格式指定元素的链接：

$('=value of the anchor text')

或者，我们可以将此表达式存储在一个变量中，如下所示：

const p = $('=value of the anchor text')

让我们识别下图中突出显示的链接并单击它：

上图中突出显示的链接具有标签名 - a 和锚文本 - 使用条款。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

/ test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Link Text', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with link text then click
      $("=Terms of Use").click()
      console.log('Page title after click: ' + browser.getTitle())
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js. 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，单击“使用条款”-Tutorialspoint 后的页面标题将打印在控制台中。

部分链接文本定位器

导航到网页后，我们可能通过单击链接与网页元素交互以完成自动化测试用例。定位器部分链接文本用于具有锚标记的元素。

我们可以识别具有匹配文本的锚元素。在 WebdriverIO 代码中，我们可以选择以下格式指定元素的部分链接：

$('*=value of the anchor text which is matching')

或者，我们可以将此表达式存储在一个变量中，如下所示：

const p = $('*=value of the anchor text which is matching')

部分链接文本类似于链接文本，唯一的区别在于它可以帮助处理锚元素的少量字符是固定的而其余字符是动态的情况。

让我们识别下图中突出显示的链接并单击它：

上图中突出显示的链接具有标签名 - a 和锚文本 - 使用条款。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Partial Link Text', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with partial link text then click
      $("*=Terms of").click()
      console.log('Page title after click: ' + browser.getTitle())
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，单击“使用条款”-Tutorialspoint 后的页面标题将打印在控制台中。

WebdriverIO - ID 定位器

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

为此，我们的首要任务是识别元素。我们可以使用元素的 id 属性进行识别。这是一个非常有用的定位器，与所有定位器相比，它可以加快自动化测试的执行速度。

在 WebdriverIO 代码中，我们可以选择以下格式指定元素的 id 属性值：

$('=#value of id attribute')

或者，我们可以将此表达式存储在一个变量中，如下所示：

const p = $('=#value of id attribute')

让我们识别下图中突出显示的元素并单击它：

上图中突出显示的链接具有标签名 - a 和 id 属性值 - redirect。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Id', function(){
      // launch url
      browser.url('https://the-internet.herokuapp.com/redirector')
      //identify element with id then click
      $("#redirect").click()
      //obtain page title
      console.log('Page title after click: ' + browser.getTitle())
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，单击“互联网”后的页面标题将打印在控制台中。

WebdriverIO - 标签名定位器

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

为此，我们的首要任务是识别元素。我们可以使用元素的 HTML 标签名进行识别。在 WebdriverIO 代码中，我们可以选择以下格式指定元素的标签名：

$('<element tagname>')

或者，我们可以将此表达式存储在一个变量中，如下所示：

const p = $('element tagname')

让我们识别下图中突出显示的元素并获取其文本：

上图中突出显示的元素具有标签名 - h1。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Tagname', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with tagname then obtain text
      console.log($("<h1>").getText() + " - is the text.")
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

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

WebdriverIO - 类名定位器

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

为此，我们的首要任务是识别元素。我们可以使用元素的类名属性进行识别。这是一个非常有用的定位器，与 xpath 相比，它可以加快自动化测试的执行速度。

在 WebdriverIO 代码中，我们可以选择以下格式指定元素的类名属性值：

$('=.value of class attribute')

或者，我们可以将此表达式存储在一个变量中，如下所示：

const p = $('=.value of class attribute')

让我们识别下图中突出显示的文本并获取其文本：

上图中突出显示的元素的 class 属性值为 heading。

代码实现如下：

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Class Name', function(){        
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with Class Name then obtain text
      console.log($(".heading").getText() + " - is the text.")
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。您的计算机上将出现以下屏幕：

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

WebdriverIO - 名称定位器

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

为此，我们的首要任务是识别元素。我们可以使用元素的 name 属性进行识别。此定位器现已弃用，仅与基于 JSONWireProtocol 或 Appium 的旧浏览器兼容。

在 WebdriverIO 代码中，我们可以选择以下格式指定元素的 name 属性值：

$('[name attribute=''value'']')

或者，我们可以将此表达式存储在一个变量中，如下所示：

const p = $('[name attribute=''value'']')

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

上图中突出显示的元素的 name 属性值为 search。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Name', function(){     
      // launch url
      browser.url('https://tutorialspoint.com/index.htm')
      //identify element with Name then input text
      $('[name="search"]').setValue('Selenium')
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

WebdriverIO - 断言的 Expect 语句

要将 WebdriverIO 用作自动化测试工具，我们需要设置检查点，这将帮助我们得出测试是否通过或失败的结论。WebdriverIO 提供各种断言，我们可以用它们来验证测试是否成功验证了某个步骤。

在断言中，我们可以将测试的预期结果与实际结果进行比较。如果两者相似，则测试应通过，否则应失败。WebdriverIO 中的 expect 语句可以应用于浏览器、模拟对象或元素。

我们必须添加一个名为 Chai 的 NodeJS 库。Chai 库包含用于断言的 expect 语句。

我们必须在代码中添加以下语句来实现 Chai 断言：

const e = require('chai').expect

应用于浏览器的断言

这些断言列在下面：

toHaveUrl

它检查浏览器是否打开特定页面。语法如下：

expect(browser).toHaveUrl('https://tutorialspoint.com/index.htm')

toHaveUrlContaining

它检查页面的 URL 是否具有特定值。

语法

语法如下：

expect(browser).toHaveUrlContaining('tutorialspoint')

toHaveUrl

它检查页面是否具有特定标题。

语法

语法如下：

expect(browser).toHaveTitle('Terms of Use - Tutorialspoint')

应用于元素的断言

这些断言列在下面：

toBeDisplayed

它检查元素是否显示。

语法

语法如下：

const e = $('#loc')
expect(e).toBeDisplayed()

toExist

它检查元素是否存在。

语法

语法如下：

const e = $('#loc')
expect(e).toExist()

toBePresent

它检查元素是否存在。

语法

语法如下：

const e = $('#loc')
expect(e).toBePresent()

toBeExisting

它与 toExist 相同。

toBeFocussed

它检查元素是否获得焦点。

语法

语法如下：

const e = $('#loc')
expect(e).toBeFocussed()

toHaveAttribute

它检查元素属性是否具有特定值。

语法

语法如下：

const e = $('#loc')
expect(e).toHaveAttribute('name', 'search')

toHaveAttr

它与 toExist 相同。

toHaveAttributeContaining

它检查元素属性是否包含特定值。

语法

语法如下：

const e = $('#loc')
expect(e).toHaveAttributeContaining('name', 'srch')

toHaveElementClass

它检查元素是否具有特定类名。

语法

语法如下：

const e = $('#loc')
expect(e).toHaveElementClass('name', { message: 'Not available!', })

toHaveElementClassContaining

它检查元素类名是否包含特定值。

语法

语法如下：

const e = $('#loc')
expect(e).toHaveElementClassContaining('nam')

toHaveElementProperty

它检查元素是否具有特定属性。

语法

语法如下：

const e = $('#loc')
expect(e).toHaveElementProperty('width', 15)
//verify negative scenario
expect(e).not.toHaveElementProperty('width', 20)

toHaveValue

它检查输入元素是否具有特定值。

语法

语法如下：

const e = $('#loc')
expect(e).toHaveValue('Selenium', { ignoreCase: false})

toHaveValueContaining

它检查输入元素是否包含特定值

语法

语法如下：

const e = $('#loc')
expect(e).toHaveValueContaining('srch')

toBeClickable

它检查元素是否可点击。

语法

语法如下：

const e = $('#loc')
expect(e).toBeClickable()

toBeDisabled

它检查元素是否被禁用。

语法

语法如下：

const e = $('#loc')
expect(e).toBeDisabled()
//verify negative scenario
expect(e).not.toBeEnabled()

toBeEnabled

它检查元素是否启用。

语法

语法如下：

const e = $('#loc')
expect(e).toBeEnabled()

toBeSelected

它与 toBeEnabled 相同。

toBeChecked

它与 toBeEnabled 相同。

toHaveHref

它检查链接元素是否具有特定链接目标。

语法

语法如下：

const e = $('<a>')
expect(e).toHaveHref('https://tutorialspoint.com/index.htm')

toHaveLink

它与 toHaveHref 相同。

toHaveHrefContaining

它检查链接元素是否包含特定链接目标。

语法

语法如下：

const e = $('<a>')
expect(e).toHaveHrefContaining('tutorialspoint.com')

toHaveLinkContaining

它与 HaveHrefContaining 相同。

toHaveId

它检查元素是否具有特定 id 属性值。

语法

语法如下：

const e = $('#loc')
expect(e).toHaveId('loc')

toHaveText

它检查元素是否具有特定文本。

语法

语法如下：

const e = $('#loc')
expect(e).toHaveText('Learning WebdriverIO')

toHaveTextContaining

它检查元素是否包含特定文本。

语法

语法如下：

const e = $('#loc')
expect(e).toHaveTextContaining('Learning WebdriverIO')

toBeDisplayedInViewpoint

它检查元素是否在视野内。

语法

语法如下：

const e = $('#loc')
expect(e).toBeDisplayedInViewpoint()

应用于模拟对象的断言

断言列在下面：

toBeRequested

它检查模拟是否被调用。

语法

语法如下：

const m = browser.mock('**/api/list*')
expect(m).toBeRequested()

toBeRequestedTimes

它检查模拟是否被调用了预期次数。

语法

语法如下：

const m = browser.mock('**/api/list*')
expect(m).toBeRequestedTimes(2)

首先，按照名为使用 webdriverIO 的成功路径流程的章节中的步骤 1 到 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Assertion with expect', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with link text then click
      $("=Terms of Use").click()
      browser.pause(1000)
      //verify page title with assertion
      expect(browser).toHaveTitleContaining('Terms of Use - Tuter')
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，我们发现结果为 1 个失败。因为预期：是使用条款 - Tuter，而接收到的：输出是使用条款 - Tutorialspoint。

此外，WebdriverIO expect 语句突出显示了预期：和接收到的：文本不匹配的文本部分。

WebdriverIO - 成功路径流程

让我们创建一个简单的成功流程来演示如何创建基本的 WebdriverIO 测试：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 - 创建规范文件。关于如何执行此安装的详细信息在名为 Mocha 安装的章节中给出。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Happy Flow', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with link text then click
      $("=Team").click()
      //verify URL of next page with assertion
      expect(browser).toHaveUrlContaining('team')
   });
});

步骤 7 - 使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

步骤 8 - 通过进一步调查输出，我们将看到规范文件 testcase1.js 中的测试被标记为 PASSED。

测试执行的浏览器版本和操作系统、会话 ID、规范文件名、测试套件名称 - Tutorialspoint 应用程序、测试用例名称 - 成功流程、测试执行持续时间等等，也已捕获在控制台中。

WebdriverIO - 常用浏览器命令

下面列出了一些 WebdriverIO 中使用的常用浏览器命令：

browser.url(URL)

此命令用于启动一个应用程序，其 URL 作为参数传递。

语法

语法如下：

browser.url('https://the-internet.herokuapp.com/redirector')

首先，按照名为使用 webdriverIO 的成功路径流程的章节中的步骤 1 到 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Identify element with Id', function(){
      // launch url
      browser.url('https://the-internet.herokuapp.com/redirector')
      //identify element with id then click
      $("#redirect").click()
      //obtain page title
      console.log('Page title after click: ' + browser.getTitle())
   });
});

browser.getTitle()

此命令用于获取当前在浏览器中启动的页面的标题。值为字符串形式返回。此命令不接受任何参数。如果页面没有标题，则返回空字符串。

语法

语法如下：

browser.getTitle()

首先，按照名为使用 WebdriverIO 的成功路径流程的章节中的步骤 1 到 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint Application', function () {
   // test case name
   it('Get Page Title', function (){
      // URL launching
      browser.url("https://tutorialspoint.com/about/about_careers.htm")
      //print page title in console
      console.log(browser.getTitle())
   });    
});

browser.getUrl()

此命令用于获取当前在浏览器中启动的页面的 URL。值为字符串形式返回。此命令不接受任何参数。

语法

语法如下：

browser.getUrl()

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint Application', function () {
   // test case name
   it('Get Url', function (){
      // URL launching
      browser.url("https://tutorialspoint.com/index.htm")
      //print URL in console
      console.log(browser.getUrl())
   });    
});

browser.getPageSource()

此命令用于获取当前在浏览器中启动的页面的页面源代码。值为字符串形式返回。此命令不接受任何参数。

语法

语法如下：

browser.getPageSource()

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint Application', function () {
   // test case name
   it('Get Page Source', function (){
      // URL launching
      browser.url("https://tutorialspoint.com/index.htm")
      //print URL in console
      console.log(browser.getPageSource())
   });    
});

browser.maximizeWindow()

此命令用于最大化当前浏览器窗口。

语法

语法如下：

browser.maximizeWindow()

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint Application', function () {
   // test case name
   it('Maximise Browser', function (){
      // URL launching
      browser.url("https://tutorialspoint.com/questions/index.php")
      //maximize browser
      browser.maximizeWindow()
   });    
});

WebdriverIO - 处理浏览器大小

在 WebdriverIO 中处理自动化测试时，我们可能需要设置窗口大小并获取窗口大小。窗口大小指窗口高度和宽度。

browser.setWindowSize(250, 450)

此命令用于设置窗口大小。此处，窗口大小将设置为宽度 - 250 和高度 - 450。

语法

语法如下：

browser.setWindowSize(250, 450)

browser.getWindowSize()

此命令用于获取窗口尺寸。

语法

语法如下：

browser.getWindowSize()

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Dimension', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/index.htm')
      //set window size
      browser.setWindowSize(500, 450)
      //get window size
      console.log(browser.getWindowSize())
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，浏览器窗口的尺寸 - {width: 500, height: 450} 将打印在控制台中。

WebdriverIO - 浏览器导航命令

下面列出了一些 WebdriverIO 中使用的浏览器导航命令：

browser.navigateTo(URL)

此命令用于导航到一个应用程序，其 URL 作为参数传递。

语法

语法如下：

browser.navigateTo('https://the-internet.herokuapp.com/redirector')

browser.back()

此命令用于在浏览器历史记录中后退。

语法

语法如下：

browser.back()

browser.forward()

此命令用于在浏览器历史记录中前进。

语法

语法如下：

browser.forward()

browser.refresh()

此命令用于刷新当前网页。

语法

语法如下：

browser.refresh()

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Navigation', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      // navigate to another url
      browser.navigateTo("https://tutorialspoint.com/codingground.htm")
      //navigate back in history  
      browser.back()
      //get title back in browser history
      console.log('Back in Browser history: ' + browser.getTitle())
      //navigate forward in history  
      browser.forward()
      //get title forward in browser history
      console.log('Forward in Browser history: ' + browser.getTitle())
      //refresh browser
      browser.refresh()
      //get title after refresh
      console.log('Page Title after refresh: ' + browser.getTitle())
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，打印在浏览器历史记录中后退时获得的页面标题 - 关于 Tutorials Point 的职业 - Tutorialspoint。

然后，打印在浏览器历史记录中前进时获得的页面标题 - 免费在线 IDE 和终端。

最后，打印页面刷新后获得的页面标题 - 免费在线 IDE 和终端。

处理复选框和下拉列表

在使用 WebdriverIO 自动化测试时，我们可以处理 UI 中的复选框。复选框在 html 代码中被标识为标签名为 input，类型为 checkbox。

您的计算机上将显示以下屏幕：

操作复选框的方法

操作复选框的一些方法如下：

click()

用于选中一个复选框。

语法

语法如下：

let p = $('#loc')
p.click()

isSelected()

用于检查 checkbox 类型元素是否被选中。它返回一个布尔值（如果选中则为 true，否则为 false）。

语法如下：

let p = $('#loc')
p.isSelected()

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Checkbox', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/checkboxes')
      //identify checkbox with CSS then click
      const p = $("input[type='checkbox']") 
      p.click()
      //verify if checked with assertion
      expect(p).toBeSelected()
      //uncheck checkbox
      p.click()
      //verify if not checked with assertion
      expect(p).not.toBeSelected()
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，所有断言都按预期执行，并且我们获得了通过的测试。

处理下拉列表

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

您的计算机上将显示以下屏幕：

静态下拉列表的方法

操作静态下拉列表的一些方法如下：

selectByVisibleText

此方法用于选择与作为参数传递给此方法的选项的可视文本匹配的选项。

语法如下：

let p = $('#loc')
p.selectByVisibleText('By Subject')

selectByAttribute

此方法用于选择与作为参数传递给此方法的任何属性的值匹配的选项。

语法如下：

let p = $('#loc')
p.selectByAttribute('value', 'subject')

这里，选项的属性值为 subject。

selectByIndex

此方法用于选择与作为参数传递给此方法的选项的索引/位置匹配的选项。索引从 0 开始。

语法如下：

let p = $('#loc')
p.selectByIndex(1)

getValue()

此方法用于获取下拉列表中所选选项的属性值。

语法如下：

let p = $('#loc')
p.getValue()

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
    //test case
    it('Drodowns', function(){    
        // launch url
        browser.url('https://tutorialspoint.com/tutor_connect/index.php')  
        //identify dropdown 
        const p = $("select[name='selType']") 
        //select by index
        p.selectByIndex(1)
        //get option selected
        console.log(p.getValue() + ' - option selected by index')
        //select by visible text
        p.selectByVisibleText('By Subject')
        //get option selected
        console.log(p.getValue() + ' - option selected by visible text')
         //select by value attribute
         p.selectByAttribute('value', 'name')
         //get option selected
         console.log(p.getValue() + ' - option selected by attribute value')
    });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，首先在控制台中打印使用选项索引选择的选项的值 - name。

然后，在控制台中打印使用选项可见文本选择的选项的值 - subject。

最后，在控制台中打印使用选项属性值选择的选项的值 - name。

WebdriverIO - 鼠标操作

WebdriverIO 可以通过使用 moveTo 方法执行诸如将鼠标悬停在元素上的操作。此方法会将鼠标移动到元素的中间。

语法

语法如下：

let p = $('#loc')
p.moveTo()

在下图中，将鼠标悬停在“鼠标悬停”按钮上时，将显示“顶部”和“重新加载”按钮。

将鼠标移出“鼠标悬停”按钮后，“顶部”和“重新加载”按钮将隐藏。

首先，请按照题为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到 5 操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Mouse Operatio', function(){    
      // launch url
      browser.url('https://courses.letskodeit.com/practice')  
      //identify element then hover mouse
      const e = $(".dropbtn")
      //scroll to element then mouse hover
      e.scrollIntoView()
      e.moveTo()
      browser.pause(2000)
      //verify if sub-element display on hovering
      console.log($('=Top').isDisplayed())
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，布尔值将打印在控制台中。这是 isDisplayed() 函数返回的值，如果页面上显示元素，则返回 true。

WebdriverIO - 处理子窗口/弹出窗口

单击链接或按钮可以打开新的子窗口。WebdriverIO 默认情况下控制主浏览器窗口，为了访问子窗口上的元素，必须将 WebdriverIO 控制从主页切换到子窗口。

子窗口的方法

操作子窗口的一些方法如下：

browser.getWindowHandles()

此方法以列表的形式生成所有当前打开的浏览器窗口的窗口句柄 ID。如果有两个打开的窗口，则列表的零索引具有父窗口的句柄 ID，第一个索引将指向子窗口的窗口句柄。

语法

语法如下：

var x = browser.getWindowHandles()

browser.getWindowHandle()

此方法生成处于焦点的浏览器的窗口句柄 ID。

语法

语法如下：

let l = browser.getWindowHandle()

browser.switchToWindow('<window handle id>')

此方法用于将焦点从一个浏览器窗口切换到另一个已打开的窗口，其窗口句柄 ID 作为参数传递给此方法。

语法

语法如下：

browser.switchToWindow(x)

在下图中，单击“使用 Apple 帐户登录”按钮时，将打开一个子窗口，其浏览器标题为“使用 Apple ID 登录”。让我们尝试切换到子窗口并访问那里的元素。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Child Window', function(){    
      // launch url
      browser.url('https://secure.indeed.com/account/login')  
      //identify element then click
      $('#apple-signin-button').click()
      //get all window handle ids in list
      var l = browser.getWindowHandles()
      //switch to child window
      browser.switchToWindow(l[1])
      //get page title of child window
      console.log(browser.getTitle() + ' - Page title of child window')
      //close child window
      browser.closeWindow()
      //switch to parent window
      browser.switchToWindow(l[0])
      //get page title of parent window
      console.log(browser.getTitle() + ' - Page title of parent window')      
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，首先在控制台中打印子窗口的页面标题 - 使用 Apple ID 登录。然后，在控制台中打印父窗口的页面标题 - 登录 | Indeed 帐户。

WebdriverIO - 隐藏元素

WebdriverIO 可以处理隐藏元素。有时，子菜单只有在将鼠标悬停在主菜单上时才会显示。这些子菜单最初使用 CSS 属性 - display:none 隐藏。

在下图中，将鼠标悬停在“登录”菜单上时，将显示“登录”按钮。

将鼠标移出“登录”菜单后，“登录”按钮将隐藏。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Invisible Element', function(){    
      // launch url
      browser.url('https://www.amazon.com/')  
      //identify element then hover mouse
      const e = $("#nav-link-accountList")
      e.moveTo()
      browser.pause(2000)
      //click on hidden element
      $('=Sign in').click()
      //get page title
      console.log(browser.getTitle() + ' - Page title after click')
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，单击隐藏的“登录”按钮获得的页面标题 - Amazon 登录将在控制台中打印。

WebdriverIO - Frame

html 代码中的框架由 frames/iframe 标签表示。WebdriverIO 可以通过从主页切换到框架来处理框架。

框架的方法

操作框架的一些方法如下：

browser.switchToFrame('<frame id/index/locator>')

此方法用于将焦点从主页切换到框架。框架 ID、索引或定位器作为参数传递给此方法。

语法

语法如下：

browser.switchToWindow(x)

要将焦点从框架切换到主页，我们必须将 null 作为参数传递给 browser.switchToFrame 方法。

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

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

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Frames', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/nested_frames')  
      //switch to frame
      browser.switchToFrame($("frame[name='frame-bottom']"))
      //identify element with tagname
      const p = $('<body>')
      //get text inside frame
      console.log(p.getText() + ' - Text inside frame')   
      //switch to main page
      browser.switchToFrame(null)           
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为“wdio.conf.js 文件”和名为“配置文件生成”的章节中进行了详细讨论。

您的计算机上将显示以下屏幕：

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

WebdriverIO - 拖放

WebdriverIO 可以使用 dragAndDrop 方法执行诸如拖放之类的鼠标操作。通过此方法，我们对当前对象（源）执行单击和按住事件，然后将对象传递给目标元素。最后，释放鼠标。

语法

语法如下：

let p = $('#loc')
let t = $('#target')
p.dragAndDrop(t)

这里，p 是源定位器，t 是目标定位器。

让我们对以下元素执行拖放功能：

在上图中，名为“将我拖到我的目标”的元素必须拖放到名为“已放下！”的元素上。

首先，请按照题为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到 5 操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Drag and Drop', function(){    
      // launch url
      browser.url('https://jqueryui.jqueryjs.cn/droppable/')  
      //maximize browser
      browser.maximizeWindow()
      //switch to frame
      browser.switchToFrame($(".demo-frame"))
      //identify source element
      const src = $('#draggable')   
      //identify target element
      const trg = $('#droppable')  
      //drag and drop
      src.dragAndDrop(trg)
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

执行后，名为“将我拖到我的目标”的元素已拖放到名为“已放下！”的元素上。

WebdriverIO - 双击

WebdriverIO 可以使用 doubleClick 方法执行诸如双击之类的鼠标操作。通过此方法，我们可以对网页上的给定元素执行双击操作。

语法

语法如下：

let p = $('#loc')
p.doubleClick()

让我们对以下元素执行双击操作：

在这里，可以看到双击“双击我以查看警报”按钮时，会生成一个警报框。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Double Click', function(){    
      // launch url
      browser.url('http://only-testing-blog.blogspot.com/2014/09/selectable.html')  
      //identify element then double click
      $("button").doubleClick()
      //get Alert Text
      console.log(browser.getAlertText() + ' - Alert Text') 
      //accept Alert
      browser.acceptAlert()
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为“wdio.conf.js 文件”和名为“配置文件生成”的章节中进行了详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，双击时生成的警报文本 - 您双击了我.. 谢谢.. 将打印在控制台中。

WebdriverIO - Cookie

我们可以使用 WebdriverIO 处理 Cookie。Cookie 有助于识别用户。它是一种有效的技术，可以将信息从一个站点会话传递到另一个站点会话，或者在两个连接的网站的会话之间传递。

Cookie 的方法

我们可以使用以下方法使用 WebdriverIO 添加、删除和获取 Cookie：

browser.setCookies

这用于为当前页面设置单个 Cookie 或多个 Cookie。要为页面设置 Cookie，我们必须首先启动并停留在该页面上。

语法

语法如下：

browser.setCookies(
   {
      cookie, cookie.name, cookie.value, cookie.path, cookie.domain, 
      cookie.secure, cookie.httpOnly, cookie.expiry
   }
)

这里，cookie 是 cookie 对象或对象数组，可以包含以下值：

• cookie.name − 这是一个可选参数，指的是 Cookie 名称。

• cookie.value − 这是一个可选参数，指的是 Cookie 值。

• cookie.path − 这是一个可选参数，指的是 Cookie 路径。默认值为 /(如果在添加 Cookie 时未添加)。

• cookie.domain − 这是一个可选参数，指的是 Cookie 域名。默认值为当前浏览上下文活动文档的 URL 域名（如果在添加 Cookie 时未添加）。

• cookie.secure − 这是一个可选参数，用于检查 Cookie 是否安全。默认值为 false（如果在添加 Cookie 时未添加）。

• cookie.httpOnly − 这是一个可选参数，用于检查 Cookie 是否为 HTTP 类型。默认值为 false（如果在添加 Cookie 时未添加）。

• cookie.expiry.

browser.getCookies

这用于从现有页面获取 Cookie。如果将 Cookie 名称作为参数提供给此方法，则将获取该特定 Cookie。否则，将获取当前页面上的所有 Cookie。

语法

语法如下：

//to get a specific cookie
browser.getCookies(['Topic'])

或者：

//to get all cookies
browser.getCookies()

browser.deleteCookies

这用于从现有页面删除 Cookie。如果将 Cookie 名称作为参数提供给此方法，则将删除该特定 Cookie。否则，将删除当前页面上的所有 Cookie。

语法

语法如下：

//to delete a specific cookie
browser.deleteCookies(['Topic'])

或者：

//to delete all cookies
browser.deleteCookies()

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Cookies', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/index.htm')
      //set cookies
      browser.setCookies([
         {name: 'topic1', value: 'WebdriverIO'},
         {name: 'topic2', value: 'Selenium'}
      ])
      //get a particular cookie
	   const t = browser.getCookies(['topic1'])
      console.log(t);
      //get all cookies
      const a = browser.getCookies()
      console.log(a);
      //delete a cookie with name topic2
      browser.deleteCookies(['topic2'])
      d = browser.getCookies()
      console.log(d)
      //delete all cookies
      browser.deleteCookies()
      m = browser.getCookies()
      console.log(m) 
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，首先在控制台中打印名称为 topic1 的 Cookie 详情。然后，将显示名称为 topic1 和 topic2 的 Cookie 详情。

您的计算机上将显示以下屏幕：

然后，我们删除了名称为 topic2 的 Cookie，因此其他 Cookie 将打印在控制台中。最后，删除所有 Cookie 后，将在控制台中打印一个空数组。

WebdriverIO - 处理单选按钮

在使用 WebdriverIO 自动化测试时，我们可以处理 UI 中的单选按钮。单选按钮在 html 代码中被标识为标签名为 input，类型为 radio。

您的计算机上将显示以下屏幕：

单选按钮的方法

操作单选按钮的一些方法如下：

click()

用于选择一个单选按钮。

语法

语法如下：

const l = $('.rad')
l.click()

isSelected()

用于检查 radio 类型元素是否被选中。它返回一个布尔值（如果选中则为 true，否则为 false）。

语法

语法如下：

const l = $('.rad')
l.isSelected()

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Radio Button', function(){    
   // launch url
   browser.url('https://tutorialspoint.com/selenium/selenium_automation_practice.htm')
      //identify radio button with CSS then click
      const p = $("input[value='1']") 
      p.click()
      //verify if selected 
      console.log(p.isSelected())
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，布尔值将打印在控制台中。这是 isSelected() 函数返回的值，因为它在之前的步骤中选中了单选按钮，所以返回 true。

WebdriverIO - webelements 的 Chai 断言

Chai 是一个 Node.js 的断言库，主要用于 BDD 和 TDD 框架。它可以轻松地与任何 JavaScript 测试框架集成。Chai 的官方文档可在以下链接中找到：

www.npmjs.com/package/chai

要安装 Chai 并将其添加到 package.json 文件中，请运行以下命令：

npm install --save-dev chai

package.json 文件的详细信息将在名为“package.json”的章节中详细讨论。

您的计算机上将显示以下屏幕：

安装后，我们需要在代码中添加以下语句来添加期望风格的 Chai。

require('chai').expect

语法

Chai 断言的语法如下：

const c = require('chai').expect
c(p.getValue()).to.equal('subject')

让我们实现一个 Chai 断言，并验证下面下拉菜单中选择的选项是否符合预期结果。

如何处理下拉菜单的详细信息将在“处理下拉菜单”章节中详细讨论。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

require('chai').expect
//import chai library
const c = require('chai').expect
describe('Tutorialspoint application', function(){
   //test case
   it('Drodowns with Chai Assertion', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/tutor_connect/index.php')  
      //identify dropdown 
      const p = $("select[name='selType']") 
      //select by index
      p.selectByIndex(1)
      //get option selected
      console.log(p.getValue() + ' - option selected by index')
      //verify option selected with chai assertion
      c(p.getValue()).to.equal('name')
      //select by visible text
      p.selectByVisibleText('By Subject')
      //get option selected
      console.log(p.getValue() + ' - option selected by visible text')
      //verify option selected with chai assertion
      c(p.getValue()).to.equal('subject')
      //select by value attribute
      p.selectByAttribute('value', 'name')
      //get option selected
      console.log(p.getValue() + ' - option selected by attribute value')
      //verify option selected with chai assertion
      c(p.getValue()).to.equal('name')
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，首先会在控制台中打印使用选项索引 - name 选择的选项的值。然后，会在控制台中打印使用选项可见文本 - subject 选择的选项的值。最后，会在控制台中打印使用选项属性值 - name 选择的选项的值。

此外，我们还会得到一个 PASSED 结果，表明应用于下拉菜单的所有 Chai 断言都已通过。

让我们实现另一个 Chai 断言，并验证获得的警报文本是否符合预期结果。

如何处理警报的详细信息将在名为“警报”的章节中详细讨论。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

//import chai library
const c = require('chai').expect
// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Alerts with Chai Assertion', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/javascript_alerts')  
      //identify element with xpath then click
      $("//*[text()='Click for JS Prompt']").click()
      //check if Alert is open
      console.log(browser.isAlertOpen())   
      //get Alert Text
      console.log(browser.getAlertText() + ' - Alert Text') 
      //verify Alert text with Chai assertion
      c(browser.getAlertText()).to.equal("I am a JS prompt")
      //accept Alert
      browser.acceptAlert()
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，首先会在控制台中打印 true，因为它是由 browser.isAlertOpen() 方法返回的。然后，会在控制台中打印警报文本 - I am a JS prompt。

此外，我们还会得到一个 PASSED 结果，表明应用于警报文本的 Chai 断言已通过。

WebdriverIO - 多个窗口/标签页

单击链接或按钮可能会打开多个窗口/标签页。WebdriverIO 默认情况下控制主浏览器，为了访问其他标签页上的元素，必须将 WebdriverIO 的控制从主浏览器窗口切换到打开的标签页。

多窗口方法

一些处理多个窗口或标签页的方法如下：

browser.getWindowHandles()

此方法以列表的形式返回所有当前打开的浏览器窗口的窗口句柄 ID。如果有两个打开的窗口，列表的零索引具有父窗口的句柄 ID，而第一个索引将指向标签页的窗口句柄。

语法

语法如下：

var x = browser.getWindowHandles()

browser.getWindowHandle()

此方法生成处于焦点的浏览器的窗口句柄 ID。

语法如下：

let l = browser.getWindowHandle()

browser.switchToWindow('window handle id')

此方法用于将焦点从当前焦点浏览器窗口切换到另一个打开的浏览器窗口，其窗口句柄 ID 作为参数传递给此方法。

语法

语法如下：

browser.switchToWindow(x)

在下图中，单击“Click Here”链接后，将打开一个新标签页，其浏览器标题为“New Window”。让我们切换到新标签页并访问其中的元素。

首先，请按照题为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到 5 操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Tab windows', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/windows')  
      //identify element then click
      $('=Click Here').click()
      //get all window handle ids in list
      let w = browser.getWindowHandles()
      //switch to tab
      browser.switchToWindow(w[1])
      //get page title of tab
      console.log(browser.getTitle() + ' - Page title of tab')
      //close child window
      browser.closeWindow()
      //switch to parent window
      browser.switchToWindow(w[0])
      //get page title of parent
      console.log(browser.getTitle() + ' - Page title of parent window')      
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，标签页窗口的页面标题 - New Window 将打印到控制台。然后，父窗口的页面标题 - The Internet 将打印到控制台。

WebdriverIO - 滚动操作

我们可以使用 scrollIntoView 方法通过 WebdriverIO 执行滚动操作。此方法不接受任何参数，可以应用于浏览器对象或特定元素。

语法

语法如下：

const p = $('#loc')
p.scrollIntoView()

或者：

browser.scrollIntoView()

在下图中，让我们滚动到页脚元素链接 - Helping 并单击它。

首先，请按照“使用 WebdriverIO 的最佳实践流程”章节中的步骤 1 到步骤 5 进行操作。

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Scroll', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/index.htm')  
      //identify element 
      const e = $("=Helping")
      //scroll to element
      e.scrollIntoView()
      e.click()
      //get page title
      console.log(browser.getTitle() + ' - Page time after click')
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，单击滚动后链接 - Helping Tutorials Point - Tutorialspoint 获得的页面的页面标题将打印到控制台。

WebdriverIO - 警报

WebdriverIO 能够处理警报。

警报方法

一些处理警报的方法如下：

browser.isAlertopen()

此方法用于验证页面中是否存在警报。如果存在警报，则返回 true，否则返回 false。

语法

语法如下：

browser.isAlertopen()

browser.getAlertText()

此方法用于获取警报中显示的文本。

语法

语法如下：

browser.getAlertText()

browser.acceptAlert()

此方法用于接受警报。

语法

语法如下：

browser.acceptAlert()

browser.dismissAlert()

此方法用于关闭警报。

语法

语法如下：

browser.dismissAlert()

在下图中，单击“Click for JS Alert”后，将显示一个警报。让我们获取警报中的文本。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Alerts', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/javascript_alerts')  
      //identify element with xpath then click
      $("//*[text()='Click for JS Prompt']").click()
      //check if Alert is open
      console.log(browser.isAlertOpen())   
      //get Alert Text
      console.log(browser.getAlertText() + ' - Alert Text') 
      //accept Alert
      browser.acceptAlert()
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，首先会在控制台中打印 true，因为它是由 browser.isAlertOpen() 方法返回的。然后，会在控制台中打印警报文本 - I am a JS prompt。

WebdriverIO - 调试代码

要在 Visual Studio Code 编辑器中调试 WebdriverIO 代码，我们必须启用 JavaScript 调试器的夜间版本。调试是识别代码中错误根本原因的最重要步骤之一。

它还有助于理解程序流程。

启用调试

启用调试的步骤如下：

**步骤 1** - 如果您使用的是 Windows 或 Linux 操作系统，请导航到以下链接：

https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly

**步骤 2** - 单击“安装”。您的计算机上将出现以下屏幕：

如果使用的是 Mac 操作系统，可以跳过步骤 1 和 2。

**步骤 3** - 在项目中创建一个名为 .vscode 的文件夹。然后在此文件夹中创建一个名为 launch.json 的文件。您的计算机上将出现以下屏幕：

**步骤 4** - 在 launch.json 文件中添加以下代码。

{
   "configurations": [
      {
         "name": "Webdriver IO",
         "type": "node",
         "request": "launch",
         "args": ["wdio.conf.js", "--spec", "${file}"],
         "cwd": "${workspaceFolder}",
         "autoAttachChildProcesses": true,
         "program": "${workspaceRoot}/node_modules/@wdio/cli/bin/wdio.js",
         "console": "integratedTerminal",
         "skipFiles": [
            "${workspaceFolder}/node_modules/**/*.js",
            "${workspaceFolder}/lib/**/*.js",
            "<node_internals>/**/*.js"
         ]
      },
   ]
}

**步骤 5** - 在规范文件中添加断点。您的计算机上将出现以下屏幕：

**步骤 6** - 转到“运行”菜单，然后选择“启动调试”选项。您的计算机上将出现以下屏幕：

**步骤 7** - 执行将在调试模式下触发，底部会有一个橙色条带。调试器已附加消息应反映在终端控制台中。此外，执行将在断点处暂停。我们必须手动再次恢复它。

您的计算机上将显示以下屏幕：

WebdriverIO - 捕获屏幕截图

使用 saveScreenshot 方法，我们可以在使用 WebdriverIO 开发的自动化测试中捕获屏幕截图。如果遇到应用程序错误，通常会捕获屏幕截图。断言失败等等。

语法

捕获屏幕截图的语法如下：

browser.saveScreenshot("name along with path to store screenshot")

这里，将名称以及要保存屏幕截图的路径作为参数传递给方法。在 WebdriverIO 中，我们没有为特定元素捕获屏幕截图的选项。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Screenshot', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/index.htm')  
      //identify element then enter text
      const e = $("#gsc-i-id1")
      e.setValue('WebdriverIO')
      //capture screenshot of page
      browser.saveScreenshot("screenshot.png")
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。您的计算机上将出现以下屏幕：

命令成功执行后，将在项目文件夹中生成一个名为 screenshot.png 的文件。它包含页面捕获的屏幕截图。

WebdriverIO - JavaScript 执行器

在 WebdriverIO 内部，JavaScript 执行器被捆绑并称为 executeScript。当普通的 WebdriverIO 方法无法按预期工作时，JavaScript 执行器能够执行页面上的所有任务。

语法

JavaScript 执行器的语法如下：

browser.executeScript("JavaScript command")

使用 JavaScript 执行器执行的操作

使用 JavaScript 执行器执行的一些操作如下：

要在 ID 为 txt 的编辑框中输入文本 - AB，请使用以下命令：

browser.executeScript("document.getElementById('txt').value='AB'")

要单击链接，请使用以下命令：

browser.executeScript("document.querySelector('.lnk').click()") 

以下命令用于刷新窗口：

browser.executeScript("history.go(0)")
var t = js.executeScript("return document.getElementById('bln').innerHTML").toString()

向下滚动页面 350 像素的命令如下：

browser.executeScript("window.scrollBy(0,350)")
browser.executeScript("window.scrollTo(0, document.body.scrollHeight)")

以下命令用于向下滚动到类为 tcl 的元素。

browser.executeScript("document.querySelector('.tcl').scrollIntoView()")
browser.executeScript("window.history.back()")

以下命令用于在浏览器历史记录中前进：

browser.executeScript("window.history.forward()")
browser.executeScript("return document.title")

WebdriverIO - 等待

WebdriverIO 中的 waitUnit 方法是等待页面上的操作/元素的标准方法。它等待满足条件（真值）。

例如，我们经常等待文本出现在页面上。

语法

waitUnit 方法的语法如下：

browser.waitUntil(condition, { timeout, timeoutMsg, interval })

这里，

• condition = 等待的条件。

• 超时以毫秒为单位。默认值为 5000，是一个可选参数。

• timeoutMsg 是超时时抛出的错误消息，它是一个可选参数。

• interval 是验证之间的间隔。默认值为 500，它也是一个可选参数。

在下图中，让我们单击链接 - Team 并等待文本 - Team @ Tutorials Point 出现在页面上。

单击链接 Team 后，页面上会显示突出显示的消息。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

// test suite name
describe('Tutorialspoint Application', function(){
   //test case
   it('Waits', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')  
      //identify then click link - Team
      const p = $('=Team')
      p.click()
      //wait for text
      browser.waitUntil(
         () => $('<h1>').getText() === 'Team @ Tutorials Point', {
            timeout: 6000,
            timeoutMsg: 'expected text did not match'
         }
      );
      //identify required text
      const m = $('<h1>')
      console.log(m.getText())   
   });
});

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

如何创建配置文件的详细信息将在名为 wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。您的计算机上将出现以下屏幕：

命令成功执行后，单击 Team 链接生成的文本 - Team @ Tutorials Point 将打印到控制台。

WebdriverIO - 并行运行测试

我们可以并行模式运行 WebdriverIO 测试。为此，我们必须在测试文件夹中创建多个规范文件。并行测试可以运行的线程数量由配置文件 - wdio.conf.js 文件中的参数定义。

如何创建配置文件的详细信息将在“wdio.conf.js 文件”和“配置文件生成”章节中详细讨论，以存储 WebdriverIO 设置。

让我们以一个在测试文件夹中具有三个规范文件的项目为例。您的计算机上将出现以下屏幕：

要在并行模式下执行所有这些文件，我们首先必须在 wdio.conf.js 文件的 specs 字段下指定**'./test/specs/**/*.js'**。这意味着在运行以下命令时，测试文件夹中的所有规范文件都将被触发：

npx wdio run wdio.conf.js.

您的计算机上将显示以下屏幕：

命令成功执行后，我们将看到所有三个规范文件 - testcase1.js、testcase2.js 和 testcase3.js 同时被触发执行。

您的计算机上将显示以下屏幕：

此外，wdio.conf.js 中的 maxInstances 字段决定了触发并行执行的最大线程数。默认情况下，该值设置为 10。这里，我们有三个规范文件，因此 maxInstances = 10 成立。

您的计算机上将显示以下屏幕：

还有一个名为 capabilities 的字段位于 wdio.conf.js 文件中。在此字段中，我们有一个名为 maxInstances 的参数。它决定了在并行运行期间 Chrome 浏览器可以同时打开的实例数。

让我们将 capabilities 字段外部的 maxInstances 参数值设置为 3，然后将 capabilities 字段内部的 maxInstances 字段值设置为 2。为 capabilities 内部 maxInstances 设置的值将覆盖为 capabilities 外部 maxInstances 设置的值。

运行以下命令：

npx wdio run wdio.conf.js

命令成功执行后，我们将看到两个规范文件 - testcase1.js 和 testcase2.js 在 Chrome 中同时被触发执行。它们最初处于 RUNNING 状态。

一旦 testcase2.js 的状态变为 PASSED，第三个规范文件 testcase3.js 将变为 RUNNING 状态。您的计算机上将出现以下屏幕：

WebdriverIO - 数据驱动测试

我们可以使用 WebdriverIO 实现数据驱动测试。当我们需要使用不同的数据组合多次执行相同的测试用例时，需要数据驱动测试。这里，我们将看到如何使用外部 JSON 文件来保存数据。

在 WebdriverIO 项目中，所有测试文件都在 specs 文件夹中创建。specs 文件夹位于 test 文件夹中。我们将在 test 文件夹中创建另一个文件夹，例如 testData。

testData 文件夹将包含以键值对形式保存不同数据集的 JSON 文件。此外，如果我们在 spec 文件夹中有三个测试文件，并且想要对所有这些文件进行数据驱动测试，我们需要创建三个 JSON 文件。

这些 JSON 文件中的每一个都应专门用于 spec 文件夹中的每个测试文件。我们将在 testData 文件夹中创建一个 JSON 文件，例如 test1.json。

现在，在此文件中添加以下数据：

[
   {
      "email":"test@gmail.com",
      "password":"12"
   },
   {
      "email":"test12@gmail.com",
      "password":"34"
   }
]

您的计算机上将显示以下屏幕：

我们将解析此 JSON 文件并将其转换为字符串格式。这是通过添加以下库来完成的：

const s =require('fs')

然后要解析 JSON 文件，我们将使用 readFileSync 方法并将 JSON 文件文件的相对路径作为参数传递给此方法。最后，将其存储在一个对象中，例如 c。此对象将包含所有数据。

let c = JSON.parse(s.readFileSync('test/testData/test1.json'))

然后，我们将借助循环迭代这两个数据集上的同一个测试用例。此循环必须在代码块之前实现，并且应该传递 JSON 文件中声明的数据键。

使用上述数据集，我们将验证 LinkedIn 应用程序的登录页面。在输入少于 6 个字符的电子邮件和密码后，点击“登录”按钮，应该会抛出一个错误消息 - 您提供的密码必须至少包含 6 个字符。

您的计算机上将显示以下屏幕：

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

//import chai library
const c = require('chai').expect
//library for parsing JSON file
const s =require('fs')
let h = JSON.parse(s.readFileSync('test/testData/test1.json'))
// test suite name
describe('Tutorialspoint application', function(){
   //iterate the test case
   h.forEach(  ({email,password})  =>{
      //test case
      it('Data Driven testing', function(){    
         // launch url
         browser.url('https://www.linkedin.com/login')  
         //identify the email field then enter key - email
         $("#username").setValue(email)
         //identify password field then enter key - password
         $("#password").setValue(password)
         //identify Sign in button then click
         $("button[type='submit']").click() 
         //verify error message
         const e = $('#error-for-password')
         console.log(e.getText() + ' - Error Text') 
         //verify Alert text with Chai assertion
         c(e.getText()).to.equal("The password you provided must have at least 6     characters.")
      });
   });
});  

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js 

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，错误文本 - 您提供的密码必须至少包含 6 个字符 - 将在控制台中打印两次。

此外，它还显示消息“2 通过”，因为在一个代码块中定义的同一个测试用例已使用两个不同的数据集执行了两次。

从命令行参数运行测试

我们可以使用命令行参数控制测试运行。让我们来看一个场景，在这个场景中，WebdriverIO 项目的 spec 文件夹中包含四个测试文件。

您的计算机上将显示以下屏幕：

假设我们想仅使用命令行参数触发 testcase1.js 和 testcase2.js 文件。为此，我们必须在配置文件 wdio.conf.js 文件中添加一个名为 suites 的参数。

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

让我们假设文件 testcase1.js 和 testcase2.js 属于名为 group1 的套件，文件 testcase3.js 和 testcase4.js 属于名为 group2 的套件。我们需要将此信息添加到 wdio.conf.js 文件的 suite 参数下，如下所示。

suites: {
   group1: ['test/specs/testcase1.js', 'test/specs/testcase2.js'],
   group2: ['test/specs/testcase3.js', 'test/specs/testcase4.js']
},

您的计算机上将显示以下屏幕：

要触发属于 group1 的测试文件 testcase1.js 和 testcase2.js，我们必须运行以下命令：

npx wdio run wdio.conf.js --suite group1

您的计算机上将显示以下屏幕：

命令成功执行后，我们看到 specs 文件夹下只有两个测试文件 testcase1.js 和 testcase2.js 被触发执行。

假设我们想只使用命令行参数触发文件 testcase3.js。要只触发测试文件 testcase3.js，我们必须运行以下命令：

npx wdio run wdio.conf.js --spec test/specs/testcase3.js

您的计算机上将显示以下屏幕：

命令成功执行后，我们看到 specs 文件夹下只有测试文件 testcase3.js 被触发执行。

此外，如果我们想触发多个测试文件 testcase3.js 和 testcase4.js，则命令应如下所示：

npx wdio run wdio.conf.js --spec test/specs/testcase3.js, test/specs/testcase4.js

假设我们想排除文件 testcase4.js 不执行。为此，我们必须在配置文件 wdio.conf.js 文件的 exclude 参数下添加要排除的文件的相对路径，如下所示。

exclude: [
   // 'path/to/excluded/files'
   'test/specs/testcase4.js'
],

您的计算机上将显示以下屏幕：

然后，我们必须运行以下命令：

npx wdio run wdio.conf.js 

您的计算机上将显示以下屏幕：

命令成功执行后，我们看到 specs 文件夹下的测试文件 testcase4.js 已被排除在执行之外。

使用 Mocha 选项执行测试

specs 文件夹中的测试文件包含 describe 和 it 代码块。describe 代码块指的是测试套件，it 代码块指的是测试用例。一个 describe 代码块可以包含多个 it 代码块。

关于如何创建 describe 和 it 代码块的详细信息，将在标题为“使用 Webdriverio 的快乐路径流程”的章节中详细讨论。

为了验证从开发团队获得的新版本是否健康，我们不需要执行套件中的所有测试用例。一些测试用例被确定用于冒烟/健全性测试，一旦我们有了新版本，就会执行这些测试用例。

我们可以使用名为 Grep 的 Mocha 选项来分组测试用例并一起运行它们。为此，我们必须在 it 描述中添加一个关键字，例如 Smoke。然后在运行时，我们可以指示 WebdriverIO 测试只触发描述中包含 Smoke 的 it 代码块。

让我们来看一个包含四个 it 代码块的测试文件。在这四个 it 代码块中，有两个 it 代码块的描述中包含关键字 Smoke。

首先，请按照名为“使用 WebdriverIO 的快乐路径流程”一章中的步骤 1 到步骤 5 进行操作，步骤如下：

步骤 1 − 安装 NodeJS。关于如何执行此安装的详细信息在名为“NodeJS 入门”的章节中进行了详细介绍。

步骤 2 − 安装 NPM。关于如何执行此安装的详细信息在名为“NPM 安装”的章节中进行了详细介绍。

步骤 3 − 安装 VS Code。关于如何执行此安装的详细信息在名为“VS Code 安装”的章节中进行了详细介绍。

步骤 4 − 创建配置文件。关于如何执行此安装的详细信息在名为“配置文件生成”的章节中进行了详细介绍。

步骤 5 − 创建一个 spec 文件。关于如何执行此安装的详细信息在名为“Mocha 安装”的章节中进行了详细介绍。

步骤 6 − 在创建的 Mocha spec 文件中添加以下代码。

//import chai library
const c = require('chai').expect
//library for parsing JSON file
const s =require('fs')
let h = JSON.parse(s.readFileSync('test/testData/test1.json'))
// test suite name
describe('Tutorialspoint application', function(){
   //iterate the test case
   h.forEach(  ({email,password})  =>{
      //test case
      it('Data Driven testing', function(){   
         // launch url
         browser.url('https://www.linkedin.com/login')  
         //identify the email field then enter key - email
         $("#username").setValue(email)
         //identify password field then enter key - password
         $("#password").setValue(password)
         //identify SSign in button then click
         $("button[type='submit']").click() 
         //verify error message
         const e = $('#error-for-password')
         console.log(e.getText() + ' - Error Text') 
         //verify Alert text with Chai assertion
         c(e.getText()).to.equal("The password must be provided.")
      });
   });
   // it is blocked with Smoke keyword
   it('Identify element with Id - Smoke', function(){
      // launch url
      browser.url('https://the-internet.herokuapp.com/redirector')
      //identify element with id then click
      $("#redirect").click()
      //obtain page title
      console.log('Page title after click: ' + browser.getTitle())
   });
   // it block with Smoke keyword
   it('Identify element with Tagname - Smoke', function(){    
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with tagname then obtain text
      console.log($("<h1>").getText() + " - is the text.")
   });
   //test case
   it('Identify element with Class Name', function(){        
      // launch url
      browser.url('https://tutorialspoint.com/about/about_careers.htm')
      //identify element with Class Name then obtain text
      console.log($(".heading").getText() + " - is the text.")
   });
});

要只触发与 Smoke 相关的 it 代码块，请使用以下命令运行配置文件 wdio.conf.js 文件：

npx wdio run wdio.conf.js --mochaOpts.grep Smoke

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，我们发现四个 it 代码块中，只有两个 it 代码块（描述中带有 Smoke 标签）被执行。

从 Allure 生成 HTML 报告

在 WebdriverIO 中，我们有一个 reporter 插件来生成 Allure 测试报告。Allure 是一款轻量级的测试报告工具，它根据自动化运行的测试结果创建一个简短且有良好文档记录的报告。

要安装 Allure 并创建其在 package.json 文件中的条目，我们必须运行以下命令：

npm install @wdio/allure-reporter --save-dev

有关 package.json 的详细信息，请参阅标题为“package.json 文件”的章节。

您的计算机上将显示以下屏幕：

安装 Allure 后，我们必须通过添加以下代码在配置文件 wdio.conf.js 的 reporter 选项中配置输出目录。

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

reporters: [['allure', {
   outputDir: 'allure-results',
   disableWebdriverScreenshotsReporting: false,
}]],

您的计算机上将显示以下屏幕：

这里，outputDir 具有默认目录 /allure-results。自动化完成后，我们将发现此目录已生成。它将包含运行中包含的 specs 文件夹中每个测试文件的 .xml 文件以及 .txt、.png 和其他文件。

此外，为了附加失败测试的屏幕截图，我们将参数 disableWebdriverScreenshotsReporting 设置为 false。

但是，我们还需要在 wdio.conf.js 文件中添加一个 afterStep hook，代码如下所示：

afterStep: function (test, scenario, { error, duration, passed }) {
   if (error) {
      browser.takeScreenshot();
   }
}

您的计算机上将显示以下屏幕：

使用以下命令运行配置文件 - wdio.conf.js 文件：

npx wdio run wdio.conf.js

关于如何创建配置文件的详细信息在名为 Wdio.conf.js 文件和名为配置文件生成的章节中详细讨论。

您的计算机上将显示以下屏幕：

命令成功执行后，将在 WebdriverIO 项目中生成一个名为 allure-results（在 wdio.conf.js 中指定）的文件夹。它包含 xml 格式的报告。

接下来，我们必须将这些报告转换为 HTML 格式。为此，我们将首先安装 Allure 命令行工具，以根据测试结果生成 Allure 报告。

这是通过运行以下命令完成的：

npm install -g allure-commandline --save-dev

安装后，我们可以使用以下命令生成 HTML 格式的结果：

allure generate [allure_output_dir] && allure open

要覆盖现有结果，我们必须运行以下命令：

allure generate [allure_output_dir] --clean && allure open

您的计算机上将显示以下屏幕：

命令成功执行后，将打开一个包含测试结果的浏览器。您的计算机上将出现以下屏幕：

点击失败的测试（标记为红色），我们将获得测试的详细信息，包括预期输出、实际输出和失败的屏幕截图（展开响应后获得）。

您的计算机上将显示以下屏幕：