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

下面我们讲述在Windows 10和Microsoft Edge上使用WebDriverJS自动针对浏览器运行测试脚本所涉及的概念,技术和编码技术。

在本地或远程运行开发代码时手动点击不同的浏览器是验证该代码的快捷方法,它允许你从布局和功能的角度直观地检查事物是否符合你的预期。

但是,它不是一个解决方案,可以根据客户可用的各种浏览器和设备类型测试站点代码的全部范围,这就是自动化测试真正发挥作用的地方。

Selenium,自动化Web测试是一套工具,可以跨平台编写,管理和运行针对浏览器的测试。

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

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

你可以根据WebDriver支持的语言绑定选择语言,Selenium / WebDriverJS项目支持的核心语言包括:

  • C#
  • Java
  • JavaScript (via Node)
  • Python
  • Ruby

测试可以从检查页面布局,从服务器端调用返回的值,用户交互的预期行为到工作流验证而变化。

首先让我们的Windows 10机器设置使用JavaScript运行WebDriver,从节点调用WebDriver几乎总是异步的,为了使代码更易于阅读,我们使用ES2016的异步/等待优于Promises或回调。

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

WebDriverJS适用于Microsoft Edge

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

请注意,要运行测试的Edge版本必须使用匹配版本进行测试 MicrosoftWebDriver.exe

。我们将使用稳定版本的Edge(16.16299)和相应的MicrosoftWebDriver.exe版本5.16299。

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

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

npm install selenium-webdriver

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

让我们将示例代码分解为你们讲解的各个步骤:

  1. 创建一个局部变量以加载库并与库交互。
  2. var webdriver = require('selenium-webdriver');

2.默认情况下,WebDriverJS将假定在本地运行并且驱动程序文件存在。稍后我们将展示如何在第一次实例化浏览器时将配置信息传递到库中。WebDriverJS使用名为“capabilities”的配置变量进行实例化,以定义要使用的浏览器驱动程序。

var capabilities = { 'browserName': 'MicrosoftEdge' }; var entrytoEdit = "Browser Stack";

3.然后创建一个变量并使用capabilities config变量调用build()以使WebDriverJS实例化浏览器:

var browser = new webdriver.Builder().withCapabilities(capabilities).build();

4.​现在我们可以与浏览器进行交互,我们告诉它使用`get`方法导航到URL,这个方法是异步的,所以我们使用`await`来等待它完成。

await browser.get('http://todomvc.com/examples/react/#');

5.对于某些浏览器和系统,最好给WebDriverJS二进制文件一些时间来导航到URL并加载页面。对于我们的示例,我们使用WebDriverJS的manage函数等待1秒(1000毫秒):

await browser.manage().timeouts().implicitlyWait(1000);

6.现在,通过浏览器变量将一个程序化钩子连接到正在运行的浏览器中,请注意本文档前面的集合图,其中显示了WebDriver API集合。我们使用Elements集合从页面中获取特定元素。在这种情况下,我们正在寻找TODOMVC示例中的输入框,以便我们输入一些TODO项目。我们要求WebDriverJS查找与类规则匹配的元素,.new-todo

因为我们知道这是分配给该字段的类。我们声明一个常量,因为我们无法更改返回的数据 - 只需查询它。请注意,这将找到DOM中与CSS模式匹配的第一个元素,在我们的情况下很好,因为我们知道只有一个。

const todoEntry = await browser.findElement(webdriver.By.css('.new-todo'));

7.接下来,我们将键击发送到我们刚刚获得使用sendKeys函数的句柄的字段,我们将转义的回车键放在自己的等待线上以避免竞争条件。我们for (x of y)在处理承诺时使用迭代模式。toDoTestItems只是一个包含3个字符串的数组,一个字符串变量和2个文字。在幕后,WebDriverJS将一次发送一个字符串的单个字符,但我们只是将整个字符串变量传递给sendKeys:

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

此时,让我们运行带有节点的脚本,看看我们是否看到浏览器导航到该页面并输入这三个测试TODO项目。在async像这样的函数中的第一个变量声明之后包装代码:

async function run() {关闭}

代码末尾的函数,然后调用异步函数:

run();

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

应该看到一个浏览器窗口,并且发送到TODOMVC文件的文本将作为应用程序中的新TODO条目输入,这时候已经开始使用WebDriverJS了。

​自动化测试是确保你的网站在各种浏览器中始终如一地工作的好方法,无需手动测试的带来的麻烦或者提高其他成本。

相关推荐