前端页面测试的方法

来源：保埃科技网

这次给大家带来前端页面测试的方法，前端页面测试的注意事项有哪些，下面就是实战案例，一起来看一下。

关于函数测试，比如有一些固定的输入输出，可以使用mocha来进行测试

关于页面功能的测试，推荐nightmare。

var Nightmare = require('nightmare');var nightmare = Nightmare({ show: true });
nightmare
 .goto('https://www.taobao.com/') //待测试链接
 .type('#q', '电视机') //输入框选中，输入值
 .click('form[action*="/search"] [type=submit]')//form表单提交
 .wait(3000)
 .exists('#spulist-grid')
 .evaluate(function () { return document.querySelector('#spulist-grid .grid-item .info-cont') //获取需返回的值
 .textContent.trim();
 })
 .end()
 .then(function (result) { //即为return中的数据
 console.log(result);
 })
 .catch(function (error) { //错误捕捉
 console.error('Search failed:', error);
 });

可以结合mocha使用。

var Nightmare = require('nightmare');var expect = require('chai').expect;var fork = require('child_process').fork;
describe('test index.html', function() { var child;
 before(function (done) { //钩子函数，测试之前调用
 child = fork('./server.js');
 child.on('message', function (msg) { if (msg === 'listening') {
 done();
 }
 });
 });
 after(function () { //钩子函数，测试之后调用
 child.kill();
 });
 it('点击后标题改变', function (done) { var nightmare = Nightmare({ show: true });
 nightmare
 .goto('http://127.0.0.1:8080/index.html')
 .click('h1')
 .wait(1000)
 .evaluate(function () { return document.querySelector('h1').style.color;
 })
 .end()
 .then(function(color) { console.log(color)
 expect(color).to.equal('red');
 done();
 })
 });
});

不知道为什么，总感觉前端的自动化测试从某种程度上来讲，还是比较吃力的。求大神普及……

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部频道

前端页面测试的方法