Rumah > Artikel > hujung hadapan web > 前端页面测试的方法
这次给大家带来前端页面测试的方法,前端页面测试的注意事项有哪些,下面就是实战案例,一起来看一下。
关于函数测试,比如有一些固定的输入输出,可以使用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中文网其它相关文章!
推荐阅读:
javascript中call与apply以及bind有哪些不同
Atas ialah kandungan terperinci 前端页面测试的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!