这次给大家带来前端页面测试的方法,前端页面测试的注意事项有哪些,下面就是实战案例,一起来看一下。
关于函数测试,比如有一些固定的输入输出,可以使用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中文网其它相关文章!
推荐阅读: