So testen Sie Frontend-Seiten

Dieses Mal werde ich Ihnen die Methode zum Testen von Front-End-Seiten vorstellen. Was sind die Vorsichtsmaßnahmen für das Testen von Front-End-Seiten?

In Bezug auf Funktionstests können Sie beispielsweise Mokka zum Testen verwenden, wenn es einige feste Ein- und Ausgänge gibt.

In Bezug auf Seitenfunktionstests wird Albtraum empfohlen.

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);
  });

kann in Kombination mit Mokka verwendet werden.

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();
      })
  });
});

Ich weiß nicht warum, aber ich habe immer das Gefühl, dass automatisierte Front-End-Tests bis zu einem gewissen Grad ziemlich schwierig sind. Bitten Sie den Meister, es bekannt zu machen ...

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website andere Verwandte Artikel!

Empfohlene Lektüre:

Ausführliche Erklärung von Call in Javascript

Was sind die Unterschiede zwischen Call, Apply und Bind In? Javascript

Das obige ist der detaillierte Inhalt vonSo testen Sie Frontend-Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!