Home > Article > Web Front-end > How to test front-end pages
This time I will bring you the method of front-end page testing. What are the precautions for front-end page testing? The following is a practical case, let’s take a look.
Regarding function testing, for example, if there are some fixed input and output, you can use mocha to test
Regarding the testing of page functions, nightmare is recommended.
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); });
Can be used in combination with 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(); }) }); });
I don’t know why, but I always feel that front-end automated testing is quite difficult to some extent. Ask the master to popularize it...
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!
Recommended reading:
Detailed explanation of call in javascript
##What are the differences between call, apply and bind in javascript
The above is the detailed content of How to test front-end pages. For more information, please follow other related articles on the PHP Chinese website!