Home  >  Article  >  Web Front-end  >  How to test front-end pages

How to test front-end pages

php中世界最好的语言
php中世界最好的语言Original
2018-03-14 13:31:533863browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn