使用 WebDriver API 进行自动浏览器测试

已发表: 2022-03-10
快速总结↬本文概述了在 Windows 10 和 Microsoft Edge 上使用 WebDriverJS 自动针对浏览器运行测试脚本所涉及的概念、技术和编码技术。

在本地或远程运行开发代码时手动单击不同的浏览器是验证该代码的快速方法。 它允许您从布局和功能的角度直观地检查事物是否符合您的预期。 但是，它不是根据客户可用的浏览器和设备类型来测试站点代码库的全部范围的解决方案。 这就是自动化测试真正发挥作用的地方。

由 Selenium 项目牵头的自动化 Web 测试是一套工具，用于跨平台编写、管理和运行针对浏览器的测试。

WebDriverJS API

WebDriver API 是一种标准，它从开发人员那里抽象出特定于设备/浏览器的绑定，以便用您选择的语言编写的测试脚本可以编写一次，并通过 WebDriver 在许多不同的浏览器上运行。 一些浏览器具有内置的 WebDriver 功能，另一些则需要您为浏览器/操作系统组合下载二进制文件。

webdriverjs api

通过 WebDriver API 驱动浏览器

W3C 的 WebDriver 规范记录了可供开发人员以编程方式控制浏览器的 API。 此图显示了一个示例页面，其中包含一些可用于获取和设置浏览器属性的通用 WebDriver 集合和 API。

webdriverjs api

编写测试

您可以根据 WebDriver 支持的语言绑定选择语言。 Selenium/WebDriverJS 主项目支持的核心语言包括：

  • C＃
  • 爪哇
  • JavaScript（通过节点）
  • Python
  • 红宝石
跳跃后更多！ 继续往下看↓

测试可以从检查页面布局、从服务器端调用返回的值、用户交互的预期行为到工作流验证（例如确保购物车工作流按预期工作）而有所不同。

出于说明目的，假设我们正在测试 TODOMVC 应用程序，这是一个在几个不同的模型-视图-控制 JavaScript 框架中实现的演示应用程序。 这个简单的应用程序提供 UI 来输入待办事项、编辑、删除和将项目标记为完成。 我们将在 https://todomvc.com/examples/react/ 使用基于 React 的示例。

然后，我们将能够通过简单地更改 URL 来演示针对 Backbone.js 和 Vue.js 示例运行 React 示例的测试。

  • 完整 JS 示例文件的要点

对于这个演示，我们将使用在 node 中运行的 JavaScript 编写测试，以：

  1. 添加三个待办事项并验证我们输入的内容是否已创建到待办事项中。
  2. 通过双击、发送退格键盘命令和添加更多文本来修改该项目。
  3. 使用鼠标 API 删除该项目。
  4. 将列表中的一项检查为已完成。

设置您的基本自动化测试环境

让我们首先让我们的 Windows 10 机器设置为使用 JavaScript 运行 WebDriver。 从节点调用 WebDriver 几乎总是异步的。 为了使代码更容易阅读，我们使用了 ES2016 的 async/await over Promises 或 callbacks。

您需要安装比 v7.6 更新的 node.js 或使用 Babel 交叉编译以支持 async/await 功能。 此外，我们使用 Visual Studio Code 来编辑和调试节点。

适用于 Microsoft Edge 的 WebDriverJS

每个浏览器都有一个二进制文件，您需要在本地与浏览器本身进行交互。 该二进制文件由您的代码通过 Selenium WebDriver API 调用。 您可以在此处找到 Microsoft Edge WebDriver 的最新下载和文档。

请注意，您要对其运行测试的 Edge 版本必须使用MicrosoftWebDriver.exe的匹配版本进行测试。 我们将使用 Edge 的稳定版本 (16.16299) 和相应的 MicrosoftWebDriver.exe 版本 5.16299。

将MicrosoftWebDriver.exe放在您的路径中或您的测试脚本将运行的同一文件夹中。 运行此可执行文件将启动一个控制台窗口，向您显示 WebDriverJS 将期望处理要发送的请求的 URL 和端口号。

其他浏览器的 WebDriverJS

通过设置配置变量并为相应的浏览器安装适当的二进制驱动程序，您可以轻松地告诉 WebDriverJS 在不同的浏览器中运行测试。 你可以在这里找到它们：

  • Apple Safari：与 Safari 10+ 捆绑在一起
  • 谷歌浏览器：ChromeDriver
  • Microsoft Internet Explorer：来自 Selenium 项目的 IEDriver
  • Mozilla Firefox：壁虎驱动程序
  • Opera：OperaChromiumDriver

用于 JavaScript 的 Selenium WebDriverJS

要与您刚刚通过 JavaScript 下载的二进制驱动程序进行交互，您需要安装用于 JavaScript 的 Selenium WebDriver 自动化库。 这可以使用以下命令轻松安装为节点包：

npm install selenium-webdriver

编写自动化代码

一旦您的浏览器特定驱动程序二进制文件位于系统的路径或本地文件夹中，并且您已经通过 npm 安装了 Selenium WebDriver，您就可以开始通过代码自动化浏览器。

让我们将示例代码分解为您需要的各个步骤。

  1. 创建一个局部变量来加载库并与之交互。
     var webdriver = require('selenium-webdriver');
  2. 默认情况下，WebDriverJS 将假定您在本地运行并且驱动程序文件存在。 稍后我们将展示如何在第一次实例化浏览器时将配置信息传递到库中。 WebDriverJS 使用名为“capabilities”的配置变量进行实例化，以定义您要使用的浏览器驱动程序。
     var capabilities = { 'browserName': 'MicrosoftEdge' }; var entrytoEdit = "Browser Stack";
  3. 然后创建一个变量并使用功能配置变量调用 build() 以让 WebDriverJS 实例化浏览器：
     var browser = new webdriver.Builder().withCapabilities(capabilities).build();
  4. 现在我们可以与浏览器交互了，我们告诉它使用 `get` 方法导航到一个 URL。 这个方法是异步的，所以我们使用 `await` 来等待它完成。
     // Have the browser navigate to the TODO MVC example for React await browser.get('https://todomvc.com/examples/react/#');
  5. 对于某些浏览器和系统，最好给 WebDriverJS 二进制文件一些时间来导航到 URL 并加载页面。 对于我们的示例，我们使用 WebDriverJS 的管理功能等待 1 秒（1000 毫秒）：
     //Send a wait to the browser to account for script execution running await browser.manage().timeouts().implicitlyWait(1000);
  6. 现在，您通过 browser 变量将程序挂钩到正在运行的浏览器中。 请注意本文档前面的集合图，它显示了 WebDriver API 集合。 我们使用 Elements 集合从页面中获取特定元素。 在这种情况下，我们正在寻找 TODOMVC 示例中的输入框，以便我们可以输入一些 TODO 项。 我们要求 WebDriverJS 查找与类规则.new-todo匹配的元素，因为我们知道这是分配给该字段的类。 我们声明一个常量，因为我们无法更改返回的数据——只需查询它。 请注意，这将在 DOM 中找到与 CSS 模式匹配的第一个元素，这在我们的例子中很好，因为我们知道只有一个。
     const todoEntry = await browser.findElement(webdriver.By.css('.new-todo'));
  7. 接下来，我们将击键发送到我们刚刚使用 sendKeys 函数获得句柄的字段。 我们将转义的回车键放在自己的等待行中以避免竞争条件。 在处理 Promise 时，我们使用for (x of y)迭代模式。 toDoTestItems只是一个由 3 个字符串、一个字符串变量（我们稍后将对其进行测试）和 2 个文字组成的数组。 在幕后，WebDriverJS 将一次发送一个字符串的单个字符，但我们只是将整个字符串变量传递给sendKeys ：

     var toDoTestItems = [entrytoEdit, "Test Value1", "Test Value2"]; //Send keystrokes to the field we just found with the test strings and then send the Enter special character for (const item of toDoTestItems) { await todoEntry.sendKeys(item); await todoEntry.sendKeys("\n"); }

此时，让我们用 node 运行脚本，看看我们是否看到浏览器导航到页面并输入这三个测试 TODO 项。 将第一个变量声明之后的代码包装在一个async函数中，如下所示：

 async function run() {

在代码末尾关闭函数} ，然后使用以下命令调用该异步函数：

 run();

保存您的 JS 文件。 转到 node 命令窗口，导航到保存 JS 文件的文件夹并运行node yourfile.js

您应该会看到一个浏览器窗口出现，并且发送到 TODOMVC 文件的文本作为新的 TODO 条目输入到应用程序中。 恭喜——你已经开始使用 WebDriverJS 了。

尝试将本示例中 WebDriverJS 加载的 URL 更改为其他 TODOMVC 示例之一，并观察相同的测试代码可以针对不同的框架运行。

 await browser.get('https://todomvc.com/examples/vue/');

在 BrowserStack 上运行测试

我们已经展示了该测试如何在您的机器上本地运行。 使用 BrowserStack 等在线测试服务可以轻松运行相同的测试。 注册以免费访问 BrowserStack 服务，以访问 Microsoft Edge 浏览器以进行免费实时和自动化测试。 登录后，转到“自动化”部分并查找您的自动化测试帐户设置。 您需要将这些传递给 WebDriverJS 函数以通过代码登录、命名您的测试会话并传递您的访问令牌。

然后只需将这些值添加到capabilities变量中并再次调用 WebDriver 构建器。

 var capabilities = { 'browserName': MicrosoftEdge, 'browserstack.user': 'yourusername', 'browserstack.key': 'yqniJ4quDL6s2Ak2EZpe', 'browserstack.debug': 'true', 'build': 'Name your test' }

您可以在此处了解有关 BrowserStack 可以接受的capabilities变量和值的更多信息。

然后调用builder函数并传入 BrowserStack 服务器 URL：

 var browser = new webdriver.Builder(). usingServer('https://hub-cloud.browserstack.com/wd/hub'). withCapabilities(capabilities). build();

最后，您应该指示 WebDriverJS 退出浏览器，否则它将继续运行并最终超时。 在测试文件的末尾调用 quit 函数。

 browser.quit();

现在，当您使用 NodeJS 运行 JS 测试文件时，您将把测试指令发送到托管在 BrowserStack 的云服务上的浏览器。 您可以转到 BrowserStack 的“自动化”部分并观察测试作业的启动和停止。 完成后，您可以浏览发送的 WebDriver 命令，在测试运行期间每隔一段时间查看浏览器屏幕的图像，甚至可以查看浏览器会话的视频。

在 BrowserStack 的 Automate 服务上运行测试的可视化日志功能的屏幕截图
在 BrowserStack 的 Automate 服务上运行的测试的可视化日志功能的屏幕截图

用断言测试值

在测试您的网站时，您将实际结果与预期结果进行比较。 最好的方法是通过断言，如果不满足断言条件，则会引发异常。 在我们的示例中，我们使用断言库来表达这些断言并帮助使代码更具可读性。 我们选择 ChaiJS 是因为它足够灵活，可以与任何 JavaScript 库一起使用，并且在撰写本文时非常流行。

您使用 npm 下载并安装 Chai 作为节点包。 在代码中，您需要要求chai ：

 var expect = require('chai').expect;

我们决定使用 Expect 接口来使用自然语言将我们的断言链接在一起。

您可以测试长度、存在性、包含值等等。

 expect(testElements).to.not.have.lengthOf(0); //make sure that we're comparing the right number of items in each array/collection expect(testElements.length).to.equal(toDoTestItems.length);

如果这些断言之一不正确，则会引发断言异常。 当抛出异常时，我们的示例代码将停止执​​行，因为我们没有处理异常。 在实践中，您将使用带有节点的测试运行器来处理异常并报告测试错误和通过。

使用测试运行程序自动化测试通过

为了更好地处理断言异常，测试运行程序与节点配对，以将包含测试断言的代码块包装在 try/catch 样式的函数中，这些函数将异常映射到失败的测试用例。

在这个例子中，我们选择了 MochaJS 测试框架，因为它与 Chai 搭配得很好，是我们用来测试生产代码的东西。

要集成运行程序，需要将代码添加到测试脚本中，并更改使用 node.js 运行代码的方式。

添加测试运行器代码

您将测试代码包装到异步函数中，顶层函数使用关键字“describe”，子测试函数使用关键字“it”。 这些功能都标有测试要查找的内容的描述。 此描述将映射到测试结果。

MochaJS 通过 npm 作为节点包安装。

这是我们示例中使用describe的顶级函数：

 describe('Run four tests against TODOMVC sample', async () => {

随后，使用it关键字将逻辑测试包装成组：

 it('TEST 3: Delete a TODO item from the list by clicking the X button', async () => {

包装在这些函数中导致异常的断言将被映射回这些描述。

使用 NodeJS 和 MochaJS 执行代码

最后，您需要使用调用 MochaJS 二进制文件的节点来运行测试代码，以正确处理异常。 Mocha 可以传递参数来配置超时值、保存测试文件的文件夹等等。 这是我们用于 Visual Studio Code 的配置，用于附加调试器并使用 Code 的检查和逐步执行功能：

 { "type": "node", "request": "launch", "name": "Mocha Tests", "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha", "args": [ "-u", "tdd", "--timeout", "999999", "--colors", "${workspaceRoot}/test/**/*.js" ], "internalConsoleOptions": "openOnSessionStart" }

自动化测试是确保您的网站在各种浏览器上始终如一地工作的好方法，而无需手动测试的麻烦或成本。 我们在这里使用的工具只是众多可用选择中的一小部分，但它们说明了为您的项目设置和执行自动化测试所涉及的常见步骤。