前端页面测试的方法-tutorial js-php.cn

前端页面测试的方法

php中世界最好的语言

Lepaskan： 2018-03-14 13:31:53

asal

3807 orang telah melayarinya

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

关于函数测试，比如有一些固定的输入输出，可以使用mocha来进行测试

关于页面功能的测试，推荐nightmare。

var Nightmare = require(&#39;nightmare&#39;);var nightmare = Nightmare({ show: true });
nightmare
  .goto(&#39;https://www.taobao.com/&#39;)  //待测试链接
  .type(&#39;#q&#39;, &#39;电视机&#39;)   //输入框选中，输入值
  .click(&#39;form[action*="/search"] [type=submit]&#39;)//form表单提交
  .wait(3000)
  .exists(&#39;#spulist-grid&#39;)
  .evaluate(function () {    return document.querySelector(&#39;#spulist-grid .grid-item .info-cont&#39;) //获取需返回的值
      .textContent.trim();
  })
  .end()
  .then(function (result) {  //即为return中的数据
    console.log(result);
  })
  .catch(function (error) {  //错误捕捉
    console.error(&#39;Search failed:&#39;, error);
  });

Salin selepas log masuk

可以结合mocha使用。

var Nightmare = require(&#39;nightmare&#39;);var expect = require(&#39;chai&#39;).expect;var fork = require(&#39;child_process&#39;).fork;
describe(&#39;test index.html&#39;, function() {  var child;
  before(function (done) {   //钩子函数，测试之前调用
    child = fork(&#39;./server.js&#39;);
    child.on(&#39;message&#39;, function (msg) {      if (msg === &#39;listening&#39;) {
        done();
      }
    });
  });
  after(function () { //钩子函数，测试之后调用
    child.kill();
  });
  it(&#39;点击后标题改变&#39;, function (done) {    var nightmare = Nightmare({ show: true });
    nightmare
      .goto(&#39;http://127.0.0.1:8080/index.html&#39;)
      .click(&#39;h1&#39;)
      .wait(1000)
      .evaluate(function () {        return document.querySelector(&#39;h1&#39;).style.color;
      })
      .end()
      .then(function(color) {        console.log(color)
        expect(color).to.equal(&#39;red&#39;);
        done();
      })
  });
});

Salin selepas log masuk

不知道为什么，总感觉前端的自动化测试从某种程度上来讲，还是比较吃力的。求大神普及……

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！