WebdriverIO教程以及测试示例

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

　　WebdriverIO架构

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

NodeJS： NodeJS是一个开源项目，可帮助运行Javascript运行时环境。

WebdriverIO： WebdriverIO建立在与NodeJS进行通信的NodeJS之上。

JavaScript： 该脚本由用户在WebdriverIO库的帮助下编写。

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

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

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

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

魅力记者

简明记者

点记者

JUnit记者

规格报告者

社会学记者

　　以下是受支持服务的示例

鸦片服务

Devtools服务

Firefox个人资料服务

硒独立服务

共享商店服务

静态服务器服务

此外，它在开发人员和测试人员中非常受欢迎。每日下载量约为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教程的示例 ，我们将该文件夹称为“ LambdaTestProject ”。在终端中运行以下命令。

mkdir LambdaTestProject && cd LambdaTestProject

　　初始化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执行Selenium脚本。

　　WebdriverIO配置

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

./node_modules/.bin/wdio config -y

通过此命令，将自动配置以下软件包，当然，您以后可以更改。

@ wdio / local-runner

@ wdio / mocha-framework

@ wdio / spec-reporter

@ wdio-chromedriver-service

@ wdio / sync – chromedriver

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

同样，这里我们使用了-y选项，因此可以为您设置所有默认选项。然后在项目根文件夹下创建了文件。我们将使用此文件来配置我们的项目。

默认情况下，此自动配置将服务设置为chromedriver，框架设置为Mocha with BDD options。

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

./node_modules/.bin/wdio config

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

　　创建一个测试文件夹

在每个测试项目中，我们都需要创建一个文件夹，将所有Selenium测试用例放在一个位置。在终端中键入以下命令以为此WebDriverI0教程创建测试文件夹。

mkdir -p ./test/specs

注意： 如果您在上述命令中提供了不同的specs路径，则需要确保 在文件中提到了相同的文件夹路径 specs:

　　创建一个测试脚本文件

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

touch ./test/specs/myFirstScript.js

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

　　验证wdio测试运行程序

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

./node_modules/.bin/wdio run 

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

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

现在，我们已经为该WebDriverI0教程设置了所有先决条件。现在是时候解决问题了，并 使用WebDriverI0 运行我们的第一个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 ");

assert.strictEqual(browser.getTitle(), "Sample page - lambdatest.com");

});

});

　　WebdriverIO示例脚本演练

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

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

每个describe()可以具有多个it()。it()只是您的测试用例。您可以在describe函数下编写N个测试用例。

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

$()将Web元素返回给用户，然后用户可以执行click()操作。

语法是$（选择器）。

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

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

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

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

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

　　Mac作业系统

如果您已完成Mac操作系统上的设置和配置，则不必担心其他设置。只需从项目根目录键入以下命令。

./node_modules/.bin/wdio run 

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

　　Windows操作系统

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

打开“指定测试文件”，这是项目根文件夹下

找到“功能”部分

添加“ platformName：'Windows 10'”

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

　　内部硒设置的挑战

在当今世界，大多数企业都在采用敏捷SDLC。因此，我们见证了主要供应商针对浏览器，移动操作系统，台式机操作系统等的快速发布。无论是WebdriverIO还是任何其他测试自动化框架，如果市场以如此快的速度进行更新，那么创建和维护Selenium Grid基础设施都可能是一个挑战性的挑战。使用内部Selenium测试设置进行扩展时，有以下缺点。

测试用例覆盖范围更大，结果变慢！

从长远来看，一个项目需要更多的测试用例覆盖和更快的结果。使用不同的浏览器组合和操作系统在本地执行需要花费大量时间，因此团队必须等到执行得到结果之后才能执行。

更多的浏览器和操作系统，以及其版本范围。

如今，由于市场用户可以选择许多产品，因此产品对浏览器和操作范围的要求更高。在这种情况下，如果您在本地设置了硒网格，则需要付出巨大的努力来维护包括不同浏览器在内的硒网格，并考虑为不同的操作系统及其版本进行设置。对于更长的运行，几乎不可能在本地进行维护。

　　昂贵的通话

如您所知，当前的市场用户拥有许多浏览器选项和操作系统。要管理包括脚本升级在内的整个设置，执行和修复的成本将很高，因为您需要一个专门的团队来完成所有这些任务，而长期运行会更加昂贵。您还必须在硬件上投入大量资金。

　　维护

最后但并非最不重要的一点是，维护整个设置是一个巨大的挑战。专门的团队必须维护脚本，本地服务器并进行设置和环境升级。在这种情况下，专职团队将花费更多的时间进行维护，而不是进行实际的质量检查工作。

　　那么，您该如何克服这些挑战呢？

　　使用在线硒网格克服挑战

这是 基于云的Selenium自动化测试（例如LambdaTest）可以在少数地方进行的地方。用于自动化测试的在线Selenium Grid可以帮助您更快地扩展规模，快速交付产品以及强大的渠道。这是怎么了！

　　具有成本效益的

如果使用不同的浏览器及其版本（包括各种平台）运行脚本，则比运行本地设置环境的成本要低。如今，基于云的平台提供了按需测试环境，基于会话的并发会话，这具有成本效益。为什么？因为云上提供的基础架构由一组用户共享。因此，您不必自己动手做一个设备实验室。您可以选择使用预先构建的基于云的Selenium Grid。

　　更大的覆盖范围和更快的结果

通过最少的配置，基于云的测试自动化提供了许多选项来同时运行脚本，您可以在多个浏览器和平台上涵盖许多测试用例，并获得更快的结果。

　　轻松访问

借助基于云的测试自动化平台，用户可以随时随地访问整个项目。您不必依赖于专用访问权限和实验室即可访问，只需登录到基于云的平台即可准备访问其资源和项目。

　　更多的环境和平台

对于测试覆盖范围，涵盖许多平台和浏览器非常重要。采购这些都是非常昂贵的。因此，已经建立了基于云的平台，以便您可以为项目利用多个平台和环境。

　　支持团队

许多基于云的平台都有专门的支持团队，他们将在其中帮助您解决与环境有关的问题。拥有一支专门的支持团队将真正帮助您节省环境维护的大量时间。

　　团队协作

基于云的测试平台可帮助团队从任何位置进行单个项目。因此，测试人员可以在任何地理位置和零变化的任何时间运行脚本。

　　与第三方工具的大量集成

使用LambdaTest，您可以使用WebdriverIO执行Selenium自动化测试，并享受项目管理，CI CD管道，无代码自动化，错误跟踪，即时消息传递等更多第三方集成的便利。

　　在线Selenium网格上的WebdriverIO测试执行

在用于Selenium自动化测试的WebdriverIO教程的这一部分中，我们将通过LambdaTest提供的2000多个真实浏览器的在线Selenium Grid来执行Selenium脚本执行。在LamdaTest上运行测试之前，您需要安装dev Dependency。您可以通过输入以下命令进行安装

npm install @wdio/selenium-standalone-service --save-dev

现在，假设您要运行为本地计算机编写的相同脚本，在LamdaTest上，您只需要更改指定测试文件即可。

以下配置在Windows 10操作系统上的Chrome版本79.0上运行。

注意：从LamdaTest网站添加实际的用户名和accessKey。

最重要的是服务参数。您需要设置为selenium-standalone，否则脚本将无法在LamdaTest上运行。此外，您必须更改path和baseUrl参数，如下所示。

path: "/wd/hub",

capabilities: [

{

maxInstances: 5,

name: "My First Script - Chrome-Window", // name of the test,

user: "",

accessKey: "",

build: "FirstScript-Demo",

platformName: "Windows 10",

browserName: "Chrome",

browserVersion: "79.0",

video: true,

console: true,

visual: false

}

],

coloredLogs: true,

hostname: "hub.lambdatest.com",

port: 80,

baseUrl: "",

运行 ./node_modules/.bin/wdio 之后 ，您可以在LambdaTest帐户上找到正在执行的测试用例。如果转到LambdaTest 自动化仪表板，则可以找到有关WebdriverIO和Selenium测试脚本执行的所有相关详细信息。这是本地控制台日志：

　　您将在LamdaTest仪表板上获得哪些详细信息？

仪表板： 在“仪表板”视图中，您可以检查摘要，在其中运行总测试的概述以及并发会话详细信息以及其他更多信息。

时间轴：在时间轴屏幕上，您可以看到自动化脚本构建版本。您可以在功能中提供构建版本名称。

自动化日志： 在自动化日志中，您可以详细查看每次执行，包括浏览器版本，操作系统版本，执行日期和时间，视频，屏幕截图和执行步骤。

例外： 如果在LambdaTest上执行Selenium和WebdriverIO脚本时遇到任何例外，则它们都将列在“例外”选项卡下。

命令： 在命令视图中，您可以查看每个步骤元素的状态。

日志： 您可以查看Selenium日志和控制台日志。

元数据：“ 元数据”视图为您提供了提供的元详细信息，输入配置以及您通过的浏览器配置。

分析： 在此选项卡中，用户可以按今天，每周和每月查看构建状态以及其他重要信息。

直观的仪表板并不是您可以选择LambdaTest的唯一功能。另一个非常重要的关键功能是能够使用Selenium执行并行测试。

　　用于并行硒测试的WebdriverIO示例

当您的项目测试脚本增长时，执行和产生结果将花费更多时间。您还需要找到一种解决方案，以便以更快的方式生成结果，许多不同类型的浏览器正在进入市场，我们必须对此进行应对。在这种情况下，并行执行将帮助我们找到正确的解决方案。

使用并行浏览器的优点是：

　　加快执行速度

　　浏览器和操作系统范围

在WebdriverIO中，有一个名为maxInstances 的属性 ，可帮助您运行并行浏览器。 使用多个浏览器功能更改当前的并运行相同的脚本。

以下功能将在Mac操作系统上运行Safari浏览器，在Windows操作系统上运行Chrome浏览器。

capabilities: [

{

maxInstances: 5,

name: "My First Script - Chrome-Window", // name of the test,

user: "",

accessKey: "",

build: "MyFirstScript-Demo",

platformName: "Windows 10", // macOS High Sierra & Windows 10

browserName: "Chrome",

browserVersion: "79.0",

video: true,

console: true,

visual: false

},

{

name: "My First Script - Safari-Mac", // name of the test,

user: "",

accessKey: "",

build: "MyFirstScript-Demo",

platformName: "macOS High Sierra", // macOS High Sierra & Windows 10

browserName: "Safari",

browserVersion: "11.0",

video: true,

console: true,

visual: false

}

],

您可以根据目标操作系统的CPU容量添加多个实例。 为了获得稳定的结果，建议根据需要创建 maxInstances。

让我们查看LamdaTest自动化仪表板并查看执行详细信息。您可以看到在并发会话下运行了两个测试，下面的屏幕快照中显示了详细信息。

您可以在功能部分中看到我们设置的内部版本名称。更多关于WebdriverIO的信息，请继续关注中培教育。