Comment tester les pages frontales

Cette fois, je vais vous présenter la méthode de test des pages front-end. Quelles sont les précautions pour les tests des pages front-end, jetons un coup d'œil à ces cas pratiques.

Concernant les tests de fonction, par exemple, s'il y a des entrées et sorties fixes, vous pouvez utiliser moka pour les tests

Concernant les tests de fonction de page, le cauchemar est recommandé.

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

peut être utilisé en combinaison avec du moka.

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

Je ne sais pas pourquoi, mais j'ai toujours l'impression que les tests automatisés front-end sont assez difficiles dans une certaine mesure. Demandez au maître de le vulgariser...

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention au site Web php chinois autre . articles connexes!

Lecture recommandée :

Explication détaillée de l'appel en javascript

Quelles sont les différences entre appeler, postuler et lier javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!