프런트 엔드 페이지를 테스트하는 방법

이번에는 프런트엔드 페이지 테스트 방법을 알려드리겠습니다. 프런트엔드 페이지 테스트의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

기능 테스트의 경우, 예를 들어 일부 고정된 입력 및 출력이 있는 경우 mocha를 사용하여 테스트할 수 있습니다.

페이지 기능 테스트의 경우 악몽을 권장합니다.

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

모카와 함께 사용할 수 있습니다.

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 중국어 웹사이트기타관련 기사를 주목하세요!

추천 도서:

자바스크립트 호출에 대한 자세한 설명

자바스크립트 호출, 적용, 바인딩의 차이점은 무엇인가요

위 내용은 프런트 엔드 페이지를 테스트하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!