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

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

js_test_framework

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

git 주소:

기록 testLive를 통해 현장에서 필요한 요청에 대해 testLive는 해당 기간 동안의 모든 요청을 기록하고 동시에 다시 실행할 수 있습니다. 커스텀 모듈의 RequestData 데이터를 정의한 후 requestFactory에서 네트워크 요청을 호출하여 커스텀 모듈의 requestFactory
Write Test.js에 등록하고, 판단해야 할 Assertion을 작성하고, 단위 테스트를 등록합니다. testManager에서 각 모듈의 테스트를 진행하고
testManager에서 테스트 케이스를 실행하고, 테스트 실행 중 결과를 확인하고, 결과를 동시에 분석
파일 디렉토리 구조의 예

기본: 코어 모듈

testLive
requestFactory
testManager

module : 외부 모듈, 예시만

user

userRequestData
userTest

product

productRequestData
productTest
...

3개의 주요 모듈

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

Testlive

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

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

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

    请求工厂,主要用于收集用户的所有请求记录

외부 인터페이스

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

성명：