前端测试 基于 node.js 和 mocha 测试框架的 webUI 自动化实践

yhui · February 16, 2017 · 2633 hits

测试环境准备

安装node.js

mocha是一个基于node.js和浏览器的集合各种特性的Javascript测试框架,因此在安装mocha前需先安装node.js。
node.js下载地址:https://nodejs.org/en/download/
安装完成后到命令行下输入“node -v”,如果会打印出node的版本信息,则表示node安装成功。

安装mocha

在命令行下输入“npm install mocha -g”以global的方式安装mocha;

npm install mocha -g

安装成功后会在当前目录下生成node_modules文件夹;

安装selenium-webdriver

在命令行下输入“npm install selenium-webdriver”;

npm install selenium-webdriver

安装成功后在node_modules文件夹下会有对应的selenium-webdriver文件夹;

下载浏览器驱动

以chromedriver为例,下载地址http://chromedriver.storage.googleapis.com/index.html
将chromedriver.exe所在的路径加入环境变量(这里如果不想设置到环境变量里去的话,可以将浏览器驱动文件与测试脚本放在同一级目录,不然执行测试脚本时会报找不到浏览器驱动的错误;方便起见还是建议将驱动文件设置到环境变量里去);

mocha框架使用

mocha接口介绍

mocha提供了BDD(Behavior Driven Develop)和TDD(Test Driven Develop)风格的接口,默认是BDD风格的。
BDD风格主要提供以下6个接口before()、after() 、beforeEach() 、afterEach() 、describe()、it()。其中before() 、after() 、beforeEach() 、afterEach() 是用于预处理和test后的处理。
before:在执行所有的测试用例前 函数会被调用一次;
after:在执行完所有的测试用例后 函数会被调用一次;
beforeEach:在执行每个测试用例前 函数会被调用一次;
afterEach:在执行每个测试用例后 函数会被调用一次;
describe:声明了一个测试集合,describe是可以嵌套的;
it:声明定义了一个具体的测试用例,一个it对应一个实际的test case;

Test Hooks方法的几个注意点:
· beforeEach会对当前describe下的所有子case生效;
· before和after的代码没有特殊顺序要求;
· 同一个describe下的执行顺序为before、beforeEach、afterEach、after;
· 当一个it有多个before的时候,执行顺序是从最外围的describe的before开始,其他同理。

编写测试脚本

1)通过require来引入依赖的模块;

var assert = require('assert');
var webdriver = require('selenium-webdriver');
var By = webdriver.By;
var chrome = require('selenium-webdriver/chrome');
var test = require('selenium-webdriver/testing');

node中有一个assert模块, 它提供了一些断言方法,可用于用例结果的判断。

2)预置条件:在执行用例前先启动浏览器;

test.beforeEach(function() {
// runs before all tests in this block
this.timeout(TIMEOUT);
driver = new webdriver.Builder().forBrowser('chrome').build();//启动浏览器
});

3)测试步骤:打开web页面,并登录,判断是否登录成功;

test.it('#登录', function () {
this.timeout(TIMEOUT);
driver.get(URL);
var usname = driver.findElement(By.id('id_corpid'));
usname.sendKeys("usename");
var password = driver.findElement(By.id('id_corppw'));
password.sendKeys("pwd");
var loginBotton = driver.findElement(By.className('btn btn-primary'));
loginBotton.click();
var img = driver.findElement(By.tagName("img"));
img.getAttribute("src").then(function(value) {
assert.equal(value, '/images/index1.jpg');
});
});

4)测试后处理:关闭浏览器

test.afterEach(function() {
// runs after all tests in this block
this.timeout(TIMEOUT);
driver.quit();//关闭浏览器
});

执行用例

打开cmd,进入测试脚本所在的路径,输入命令‘mocha+测试脚本名称’执行测试脚本;

生成测试报告

mocha支持多种格式的报告显示,可用--reporter参数来指定测试报告的格式,默认是spec格式,即mocha等同于mocha --reporter spec;
以下是其他格式的报告显示:

如果想生成漂亮的HTML格式的报告,可以使用mochawesome模块。
通过以下命令安装mochawesome模块;

npm install --save-dev mochawesome

如果安装过程中出现上图错误,可通过输入下面两条命令解决,然后重新安装mochawesome模块;

npm config set registry http://registry.cnpmjs.org
npm info underscore

由于npm命令将mochawesome模块安装在项目内,因此需要使用内部的mocha命令来执行(\node_modules.bin目录下的mocha.cmd,可将该路径加入环境变量后直接使用mocha命令),html格式的测试报告就在mochawesome-reports目录下生成。

selenium-webdriver常用定位元素的方法

使用findElement结合By类返回的元素句柄来定位元素;
By类的常用定位方式共八种:
1.By.id()
通过id属性来定位元素
2. By.name()
通过name属性来定位元素
3. By.tagName()
通过标签名称来定位元素
4. By.className()
通过className属性来定位元素
5. By.linkText()
通过超文本链接上的文字信息来定位元素,精确查询
6. By.partialLinkText()
通过超文本链接上的文字信息来定位元素,模糊查询
7. By.xpath()
xpath是XML Path的简称,由于HTML文档本身就是一个标准的XML页面,可以使用xpath的语法来定位页面复杂的元素
8. By.cssSelector()
cssSelector这种元素定位方式跟xpath比较类似,但执行速度较快,而且各种浏览器对它的支持都相当到位,所以功能也是蛮强大的。

xpath和css定位元素方法:
右击页面元素,点击检查,跳转对应的源码后,右键 Copy -> Copy selector 或者 Copy -> Copy XPath 可以拷贝这两种选择器的字符参数

No Reply at the moment.
需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up