Maison >interface Web >js tutoriel >Introduction aux outils de tests front-end

Introduction aux outils de tests front-end

巴扎黑
巴扎黑original
2017-07-18 17:55:501509parcourir

js_test_framework

Cet outil est principalement utilisé pour les tests unitaires front-end web. Il implémente des tests sur site sur l'interface en appelant les méthodes js directement dans le navigateur

adresse git :


Processus

  1. Enregistrer les demandes requises sur place via testLive testLive enregistrera toutes les demandes pendant la période et pourra être re-. exécuter en même temps

  2. Sortez la requête enregistrée par testLive sur la console via la méthode de sortie, écrivez les données de sortie dans le RequestData du module personnalisé et enregistrez-la dans requestFactory après définir les données

  3. Écrivez le Test.js du module personnalisé, appelez la requête réseau dans requestFactory et écrivez les assertions qui doivent être jugées. Enregistrez le test unitaire et le test de processus. de chaque module au testManager

  4. Exécutez le scénario de test dans testManager, affichez les résultats pendant l'exécution du test et analysez les résultats

Exemple de structure de répertoire de fichiers

de base : module de base

testLive
requestFactory
testManager

module : module externe, échantillon uniquement

user

userRequestData
userTest

product

productRequestData
productTest
...

Les trois modules

sont indépendants les uns des autres autre et peut être personnalisé et remplacé individuellement


testLive

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

Interface externe

  • startRecord démarre l'enregistrement , name est le nom de l'enregistrement

  • stopRecord Terminer l'enregistrement

  • sortie Afficher l'ensemble de résultats de tous les enregistrements

  • runRecord Exécuter l'enregistrement

  • shouRequest Afficher la structure du répertoire et les détails de tous les enregistrements

  • fonction de rappel externe de rappel, la fonction externe peut être appelé dans la méthode, appelez ce rappel

Méthode d'extension

  • ajaxOverride réécrit la requête ajax et ajoute tous les jquery ajax au rappel


requestFactory

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

Interface externe

  • Méthode d'enregistrement de RegisterMethod, via cette L'appel externe de la méthode peut enregistrer la méthode dans requestFactory

  • données d'enregistrementregisterData, cette méthode est similaire à registerMethod, sauf que la structure des paramètres est différente

  • getMethod obtient la méthode via le nom de la méthode {nom : nom de la méthode personnalisée, url : adresse de requête réseau, methodType : méthode de requête, run : méthode d'exécution}

  • getMethod.run Après avoir passé getMethod , vous pouvez appeler directement la fonction run pour exécuter la méthode et renvoyer le résultat {costTime : temps système, requestData : paramètres de requête, type : méthode de requête, url : adresse de requête réseau, ResponseData : résultat de retour du serveur, succès : si la requête a été réussi🎜>

  • showMethods affiche toutes les requêtes dans requestFactory


testManager

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

Interface externe

  • Méthode d'enregistrementregisterMethod, via cette méthode, un appel externe peut enregistrer la méthode dans testManager

  • données d'enregistrementregisterData, cette méthode Semblable à registerMethod, sauf que la structure des paramètres est différente

  • méthode d'exécution, la valeur de retour correspond aux détails du résultat de cette exécution
    La structure du répertoire est{assertQueue : une collection de tous les résultats d'assertion, ResponseQueue : collection de tous les résultats de requête, errAssertQueue : collection de tous les échecs d'assertion, errorResponseQueue : collection de tous les échecs de requête réseau, dépenser temps : surcharge de temps de requête, succès : réussite }

  • showAll affiche la structure de répertoires de tous les modules testés

  • showMethods affiche toutes les méthodes de test sous le module via le nom du module

  • Basé sur outils d'analyse Web :

  • 1. Ali Test

  • 2. >2. Test de page Web

  • 3. Outils PingDom

  • 4. >

  • Outils d'analyse basés sur le navigateur :

  • 1. Le propre outil F12 de Chrome

  • 2. -in : YSlow (outil Yahoo)

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

  • Classe d'outils interne

  • assertQueue Cette classe est utilisée pour enregistrer et déterminer les objectifs de l'utilisateur. Si le résultat est cohérent avec le résultat réel et afficher l'ensemble de résultats
données liées au résultat

recordResponse est utilisé pour enregistrer les résultats des requêtes réseau

  • assert Assertion définie par l'utilisateur

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn