> 웹 프론트엔드 > JS 튜토리얼 > 프런트엔드 테스트 도구 소개

프런트엔드 테스트 도구 소개

巴扎黑
풀어 주다: 2017-07-18 17:55:50
원래의
1524명이 탐색했습니다.

js_test_framework

이 도구는 주로 웹 프런트엔드 단위 테스트에 사용됩니다. 브라우저에서 js 메소드를 직접 호출하여 인터페이스에 대한 현장 테스트를 구현합니다.

git 주소:


Process

  1. 기록 testLive를 통해 현장에서 필요한 요청에 대해 testLive는 해당 기간 동안의 모든 요청을 기록하고 동시에 다시 실행할 수 있습니다. 커스텀 모듈의 RequestData 데이터를 정의한 후 requestFactory에서 네트워크 요청을 호출하여 커스텀 모듈의 requestFactory

  2. Write Test.js에 등록하고, 판단해야 할 Assertion을 작성하고, 단위 테스트를 등록합니다. testManager에서 각 모듈의 테스트를 진행하고

  3. testManager에서 테스트 케이스를 실행하고, 테스트 실행 중 결과를 확인하고, 결과를 동시에 분석

  4. 파일 디렉토리 구조의 예

기본: 코어 모듈

testLive

requestFactory

testManager



module : 외부 모듈, 예시만
user

userRequestData

userTest


product
productRequestData

productTest

...



3개의 주요 모듈
각 모듈에는 고유한 독립성이 있으며, 사용자 정의할 수 있습니다.

Testlive

    前端录制现场,通过调用回调接口,记录下用户在前端界面的所有操作记录
로그인 후 복사

외부 인터페이스

StartRCORD로 비디오 시작, 이름은 비디오의 이름입니다.

  • S toPRCORD 영상 종료

  • 모든 영상 출력

  • runRecord 녹화 실행

  • shouRequest 모든 녹화의 디렉토리 구조 및 세부 정보 보기

  • callback 외부 콜백 함수, 메소드에서 외부 함수를 호출할 수 있음 이 콜백을 호출하세요

  • 확장 메소드

ajaxOverride ajax 요청을 다시 작성하고 모든 jquery ajax 콜백을 추가하세요

  • requestFactory

  •     请求工厂,主要用于收集用户的所有请求记录
    로그인 후 복사

외부 인터페이스

registerMethod 등록 방법, 이 방법을 통해 외부 호출 requestFactory에 메소드를 등록할 수 있습니다

  • register 데이터 등록 데이터, 이 메소드는registerMethod와 유사하지만 매개변수 구조가 다릅니다

  • getMethod는 메소드 이름 {이름: 사용자 정의 메소드 이름, url: 네트워크를 통해 메소드를 가져옵니다. 요청 주소, methodType: 요청 메소드, run: 실행 메소드}

  • getMethod.run getMethod를 전달한 후 run 함수를 직접 호출하여 메소드를 실행하고 결과를 반환할 수 있습니다. {costTime: 오버헤드 시간, requestData: 요청 매개변수, 유형: 요청 메소드, url: 네트워크 요청 주소, responseData: 서버 반환 결과, 성공: this 요청 성공 여부}

  • showMethods는 requestFactory

  • testManager

  •     测试集成,用于管理测试,将测试模块化,以及结果的展示
    로그인 후 복사
    에 모든 요청을 표시합니다.

    외부 인터페이스

    • registerMethod 등록 방법, 이 방법을 통해 외부 호출은 testManager

    • registerData 등록 데이터에 메서드를 등록할 수 있습니다. 이 방법은 RegisterMethod와 유사하지만 매개변수 구조가 다릅니다

    • run running 메서드, 반환 값 이 실행 결과에 대한 세부 정보
      디렉토리 구조는 {assertQueue: 모든 Assertion 결과 모음, responseQueue: 모든 요청 결과 모음, errAssertQueue: 모든 Assertion 실패 모음, errorResponseQueue: 모든 요청 결과 모음입니다. 네트워크 요청 실패, sendTime: 요청 시간 오버헤드, 성공 여부 oShowall은 모든 모듈의 디렉토리 구조가 모든 모듈을 테스트함을 보여줍니다.

    • ShowMethods 모듈 이름을 기준으로 모듈 아래의 모든 테스트 메소드를 표시합니다.

    • 웹 기반 분석 도구:

    • 1. Baidu 애플리케이션 성능 테스트 센터

    • 2. PingDom Tools

    • 4. 도구:

    • 1 .        Chrome에는 도구 F12

    • 2.       Firefox 플러그인: YSlow(Yahoo 도구)

    • 3.        Page Speed ​​​​(google)

    • 클래스

    • assertQueue Assertion Queue 사용자가 목표로 하는 결과가 실제 결과와 일치하는지 기록 및 판단하여 동시에 결과 세트를 출력하는 클래스입니다

    • result 관련 데이터

    • recordResponse는 결과를 기록하는 데 사용됩니다. 네트워크 요청 수

    • 사용자 설정 어설션

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿