WebDriverIO 教程二：Selenium WebdriverIO 教程, WebDriverIO 教程, WebDriverIO 入门

WebdriverIO 是基于 nodeJs 构建的基于 JavaScript 的测试自动化框架。它是为自动化测试社区开发的开源项目。WebdriverIO 可扩展、兼容、功能丰富且易于安装。这被认为是支持桌面浏览器和移动应用程序的下一代测试自动化框架。这使得 WebDriverIO 成为Selenium 自动化测试的有利选择。它支持 BDD 和 TDD 测试框架。WebdriverIO 的最新版本是 5.X。在这个用于 Selenium 自动化测试的 WebDriverIO 教程中，我将向您展示如何开始编写 WebdriverIO 的第一个 Selenium 脚本。在本 WebdriverIO 教程结束时，您将全面了解：

WebdriverIO 架构

您将在本 WebdriverIO 教程中学习的第一个也是最重要的主题将是 WebdriverIO 架构。这就是运行 WebDriverIO 测试脚本时发生的情况。

NodeJS： NodeJS 是一个开源项目，有助于运行 Javascript 运行时环境。
WebdriverIO： WebdriverIO 构建在 NodeJS 之上，它与 NodeJS 通信。
JavaScript：该脚本由用户在 WebdriverIO 库的帮助下编写。

当用户运行 WebdriverIO 测试脚本时，将执行此流程：

用户编写的 JavaScript 使用 JSON Wire 协议以 HTTP 命令的形式通过 nodeJS 向服务发送 WebdriverIO 的请求。现在，服务将请求转发给浏览器以执行用户操作。

为什么 WebdriverIO 是一个流行的测试框架？

WebdriverIO是一种广泛使用的Javascript 测试自动化框架。它具有各种功能，例如它支持许多报告和服务、测试框架和 WDIO CLI 测试运行程序

以下是支持的报告程序示例：

• Allure Reporter
• Concise Reporter
• Dot Reporter
• JUnit Reporter
• Spec Reporter
• Sumologic Reporter
• Report Portal Reporter
• Video Reporter
• HTML Reporter
• JSON Reporter
• Mochawesome Reporter
• Timeline Reporter
• CucumberJS JSON Reporter

以下是支持的服务的示例

• Appium Service
• Devtools Service
• Firefox Profile Service
• Selenium Standalone Service
• Shared Store Service
• Static Server Service
• ChromeDriver Service
• Report Portal Service
• Docker Service

以下是测试框架支持

• Mocha
• Jasmine
• Cucumber

此外，它在开发人员和测试人员中非常受欢迎。每日下载量约为 84,957，每周下载量约为 414,847，每年下载量约为 1,848,479。到目前为止，它已经发布了 243 个发布版本。此外，还有活跃的社区和对该问题的支持，并且在 Github 中有 5.3K 星。

本 WebDriverIO 教程的先决条件

在我们继续执行本 WebDriverIO 教程中的 Selenium 自动化测试脚本之前，请确保设置以下内容。

安装 Node 和 npm

为了进行基本设置，您需要安装 node.js。要检查 node.js 是否已安装，只需键入node -v命令并运行，您应该看到 node.js 版本。

$ node -v

如果节点安装正确，那么您将看到节点安装版本。

当您安装 nodejs 时，node 为您提供了一个 javascript 运行时环境。此外，它默认安装了 npm，它只是节点包管理器。npm 帮助用户安装第三方库。您可以通过在终端上键入以下命令来检查安装的 npm 版本。

$ npm -v

如果您看到任何错误，请按照 NodeJs 官方网站上的说明进行操作。

为 WebDriverIO 创建项目工作区

通过创建一个工作区文件夹来设置项目文件夹，我们会将所有文件保存在其中。作为Selenium 测试的WebDriverIO 教程的示例，我们将该文件夹称为“ TestProject ”。在终端中运行以下命令。

mkdir TestProject && cd TestProject

初始化 package.json

通过键入以下命令创建 package.json 文件：

npm init -y

使用此命令，我们创建了package.json文件，我们可以在其中添加运行自动化所需的依赖项。我们在 npm init 命令中添加了 -y 选项。当您添加 -y 选项时，您将跳过所有要求“是”提示并为您设置默认 package.json 设置的输入。请记住，参数“-y”是可选的。

如果您不输入“-y”选项，则以下选项应提供

安装 WebdriverIO CLI

本 WebdriverIO 教程的下一步是安装 CLI 依赖项，我们需要运行以下命令：

npm i --save-dev @wdio/cli

作为上述命令的结果，您可以看到在 package.json 文件中添加了依赖项（“@wdio/cli”：“^5.16.11”）。

{
  "name": "lambdatestproject",
  "version": "1.0.0",
  "description": "Webdriver First Script",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wdio/cli": "^5.16.11"
  }
}

注意：如果您发现任何权限错误，请尝试使用 sudo 命令运行。

sudo npm i --save-dev @wdio/cli

WebdriverIO 配置

输入以下命令以创建 WebdriverIO 配置文件：

./node_modules/.bin/wdio config -y

通过这个命令，自动配置了下面的包，当然如果你想以后可以更改。

• @wdio/local-runner
• @wdio/mocha-framework
• @wdio/spec-reporter
• @wdio-chromedriver-service
• @wdio/sync – chromedriver

这是命令的输出，说明需要运行哪个文件。

同样，这里我们使用了“-y”选项，以便为您设置所有默认选项。并wdio.conf.js在您的项目根文件夹下创建文件。我们将使用此文件来配置我们的项目。

默认情况下，此自动配置将服务设置为 chromedriver，将框架设置为带有 BDD 选项的 Mocha。

最后两行告诉您如何执行编写的自动化脚本。如果您想避免使用“-y”选项，请键入以下命令，您必须提供如下所示的输入：

./node_modules/.bin/wdio config

您可以根据需要选择显示的选项。并且，这是输入上述选项后的最终输出。

创建测试文件夹

在每个测试项目中，我们都需要创建一个文件夹，将所有 Selenium 测试用例保存在一个地方。在终端中输入以下命令，为这个 WebDriverIO 教程创建一个测试文件夹。

mkdir -p ./test/specs

注意：如果你在上面的命令中给出了不同的规格路径，那么你需要确保在 wdio.config.js 文件中提到了相同的文件夹路径specs:

创建测试脚本文件

WebdriverIO 教程的下一个先决条件是测试脚本，这是一个 JavaScript 文件，我们将在其中编写 Selenium 自动化测试脚本。

touch ./test/specs/myFirstScript.js

在任何您喜欢的编辑器中打开这个myFirstScript.js并开始编写您的第一个 Selenium 测试脚本。

验证 wdio 测试运行程序

WebdriverIO 提供了一个名为的测试wdio运行程序，您可以在其中运行您的脚本。直接放在/node_modules/.bin下。

./node_modules/.bin/wdio run wdio.conf.js

它会扫描您的wdio.conf.js文件并根据文件中提到的配置准备 Selenium 测试套件。然后它选择 wdio.conf.js 中提到的规范文件并开始执行脚本。在我们的例子中，我们设置了specs: [ ‘./test/specs/**/*.js’]因此，它将启动‘./test/specs folder’下的所有 js 文件。

在本地 Selenium WebDriver 上执行第一个 WebdriverIO 脚本

现在，我们已经为这个 WebDriverIO 教程设置了所有先决条件。现在是时候进入问题的关键并使用 WebDriverIO运行我们的第一个 Selenium自动化测试脚本。因为您已经设置了本地环境以使用 chrome 运行您的第一个脚本。您可以使用以下脚本开始。复制以下代码并粘贴到myFirstScript.js文件中。

WebdriverIO 示例脚本

const assert = require("assert");
 
describe("Lambdatest Demo Test", function() {
    it("Lambdatest Demo TestCase", function() {
        browser.url("https://lambdatest.github.io/sample-todo-app/");
        $("*[name='li1']").click();
        $("*[name='li2']").click();
       $("#sampletodotext").setValue("Lambdatest\n");
        
        assert.strictEqual(browser.getTitle(), "Sample page - lambdatest.com");
        
    });
});

WebdriverIO 示例脚本演练

让我们理解给定的代码。在第一行中，您已经导入了断言库，以便我们可以在我们的程序中使用断言。

describe() 块允许您将所有测试保留在一个 describe 函数下。在这种情况下，您定义了描述，“ Lambdatest Demo Test ”。换句话说，你可以想到一个套件块。

每个 describe() 可以有多个 it()。it() 只不过是您的测试用例。您可以在描述功能下编写 N 个测试用例。

现在，让我们了解我们编写的 Selenium 测试步骤。首先，browser是一个全局定义的对象。您也可以使用driver对象而不是“浏览器”。browser.url() 方法打开作为参数提供的 URL。

$() 将网页元素返回给用户，然后用户可以执行 click() 操作。
语法是 $(selector)。

在此示例中，我将选择器作为 XPath 和 ID 下面是带有 Name 参数的 XPath 示例。

另一个选择器示例是 ID。如果你想在 ID 的帮助下选择一个元素，那么只需在 ID 名称前添加 #。所以，#sampletodotext是 ID 选择器。此外，您可以看到 click() 方法用于在元素上单击()，而 setValue() 用于在文本框中输入值。

最后，我们已经使用 Assert.strictEqual() 方法来验证浏览器标题。有许多断言方法可以帮助您在脚本中进行更多断言。

在本地机器上使用 Selenium Webdriver 执行测试

现在，我们将快速了解这些 WebdriverIO 教程测试脚本是如何跨不同操作系统执行的。

Mac 操作系统

如果您在 Mac 操作系统上完成了设置和配置，那么您不必担心额外的设置。只需从您的项目根目录键入以下命令。

./node_modules/.bin/wdio run wdio.conf.js

这里是完整的执行结果控制台日志。在wdio.conf.js 中，默认日志级别为“信息”，因此您可以查看信息级别详细信息。

 

windows操作系统

为了在 Windows 10 操作系统上运行相同的脚本，请执行以下步骤

1. 在项目根文件夹下打开Specify Test Files wdio.conf.js
2. 找到“capabilities”部分
3. 添加“platformName: ‘Windows 10’”

荣誉！您已经通过此 WebdriverIO 教程成功运行了您的第一个Selenium 测试脚本。我们现在将围绕使用 Selenium 和 WebdriverIO 进行自动化测试来研究更多实际问题。当您的项目需要更广泛的自动化浏览器测试覆盖范围和快速执行结果时。在这种情况下，本地 selenium 设置并不是真正的理想方法。让我们明白为什么？

 

本文：WebDriverIO 教程二：Selenium WebdriverIO 教程, WebDriverIO 教程, WebDriverIO 入门