php5.6测试页面,前端页面测试的方法

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

关于函数测试，比如有一些固定的输入输出，可以使用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();

})

});

});

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

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

推荐阅读：