Rumah  >  Artikel  >  hujung hadapan web  >  前端页面测试的方法

前端页面测试的方法

php中世界最好的语言
php中世界最好的语言asal
2018-03-14 13:31:533862semak imbas

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

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

javascript中call与apply以及bind有哪些不同

Atas ialah kandungan terperinci 前端页面测试的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn