Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung in Front-End-Testtools

巴扎黑
Freigeben: 2017-07-18 17:55:50
Original
1496 Leute haben es durchsucht

js_test_framework

Dieses Tool wird hauptsächlich für Web-Front-End-Unit-Tests verwendet. Es implementiert Vor-Ort-Tests auf der Schnittstelle, indem es js-Methoden direkt im Browser aufruft

Git-Adresse:


Prozess

  1. Erfassen Sie die erforderlichen Anfragen vor Ort über testLive. testLive zeichnet alle Anfragen während des Zeitraums auf und kann erneut erfasst werden. gleichzeitig ausführen

  2. Geben Sie die von testLive aufgezeichnete Anforderung über die Ausgabemethode an die Konsole aus, schreiben Sie die Ausgabedaten in die RequestData des benutzerdefinierten Moduls und registrieren Sie sie anschließend in der requestFactory Definieren der Daten

  3. Schreiben Sie die Test.js des benutzerdefinierten Moduls, rufen Sie die Netzwerkanforderung in der requestFactory auf, schreiben Sie die Behauptungen, die beurteilt werden müssen, und registrieren Sie den Unit-Test und den Prozess Test jedes Moduls an den testManager

  4. Führen Sie den Testfall im testManager aus, sehen Sie sich die Ergebnisse während der Testausführung an und analysieren Sie die Ergebnisse

Beispiel der Dateiverzeichnisstruktur

Basic: Kernmodul

testLive
requestFactory
testManager

Modul: externes Modul, nur Beispiel

user

userRequestData
userTest

Produkt

productRequestData
ProduktTest
...

Die drei Module

sind unabhängig von einander und können individuell angepasst und ersetzt werden


testLive

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

Externe Schnittstelle

  • startRecord startet Aufnahme, Name ist der Name der Aufnahme

  • stopRecord Aufnahme beenden

  • output Gibt die Ergebnismenge aller Aufnahmen aus

  • runRecord Aufzeichnung ausführen

  • shouRequest Verzeichnisstruktur und Details aller Aufzeichnungen anzeigen

  • Callback externe Callback-Funktion, die externe Funktion kann in der Methode aufgerufen werden, rufen Sie diesen Rückruf auf

Erweiterungsmethode

  • ajaxOverride schreibt die Ajax-Anfrage neu und fügt alle Jquery-Ajax zum Rückruf hinzu


requestFactory

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

Externe Schnittstelle

  • registerMethod-Registrierungsmethode, durch Dieser externe Methodenaufruf kann die Methode in requestFactory registrieren

  • registerData-Registrierungsdaten. Diese Methode ähnelt registerMethod, außer dass die Parameterstruktur unterschiedlich ist

  • getMethod ruft die Methode über den Methodennamen ab {Name: benutzerdefinierter Methodenname, URL: Netzwerkanforderungsadresse, methodType: Anforderungsmethode, Ausführung: Ausführungsmethode}

  • getMethod.run Nach der Übergabe Mit getMethod können Sie die Ausführungsfunktion direkt aufrufen, um die Methode auszuführen und das Ergebnis zurückzugeben {costTime: Overhead-Zeit, requestData: Anforderungsparameter, Typ: Anforderungsmethode, URL: Netzwerkanforderungsadresse, ResponseData: Server-Rückgabeergebnis, Erfolg: ob die Anforderung war erfolgreich

  • showMethods zeigt alle Anfragen in requestFactory an


testManager

    测试集成,用于管理测试,将测试模块化,以及结果的展示
Nach dem Login kopieren

Externe Schnittstelle

  • registerMethod-Registrierungsmethode, über diese Methode kann ein externer Aufruf die Methode in testManager registrieren

  • registerData-Registrierungsdaten, diese Methode Ähnlich wie bei registerMethod, mit der Ausnahme, dass die Parameterstruktur unterschiedlich ist.

  • Laufmethode ausführen, der Rückgabewert sind die Ergebnisdetails dieses Laufs
    Die Verzeichnisstruktur ist{assertQueue: eine Sammlung von alle Assertion-Ergebnisse, ResponseQueue: Sammlung aller Anforderungsergebnisse, errAssertQueue: Sammlung aller Assertion-Fehler, errorResponseQueue: Sammlung aller Netzwerk-Anforderungsfehler, spendTime: Anforderungszeitaufwand, Success: ob erfolgreich}

  • showAll zeigt die Verzeichnisstruktur aller getesteten Module an

  • showMethods zeigt alle Testmethoden unter dem Modul anhand des Modulnamens an

  • Basierend auf Webanalysetools:

  • 1. Ali Test

  • 2. Baidu Application Performance Testing Center

  • 2. Webseitentest

  • 3. PingDom-Tools
  • 4. GTmetrix
  • >
  • Browserbasierte Analysetools:
  • 1. Chrome-eigenes Tool F12
  • 2 -in: YSlow (Yahoo-Tool)
  • 3. Page Speed ​​​​(Google)
  • Interne Tool-Klasse

assertQueue Diese Klasse wird zum Aufzeichnen und Bestimmen der Ziele des Benutzers verwendet. Ob das Ergebnis mit dem tatsächlichen Ergebnis übereinstimmt und gleichzeitig die Ergebnismenge ausgegeben wird

Ergebnisbezogene Daten
  • recordResponse wird verwendet, um die Ergebnisse von Netzwerkanfragen aufzuzeichnen
  • assert User-Set Assertion

Das obige ist der detaillierte Inhalt vonEinführung in Front-End-Testtools. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage