Obtenez une couverture de test Front-End avec Cypress

Contexte

Dans l'article "Livraison stable de produits avec Cypress", nous avons expliqué pourquoi nous avons choisi Cypress comme framework de test E2E. Après avoir passé près de deux mois à affiner les cas de test, nous avions besoin d'une couverture de test pour quantifier si la couverture de test était suffisante. Cet article décrira comment obtenir la couverture E2E frontale du tableau de bord APISIX en utilisant Cypress.

Qu'est-ce que la couverture de code

La couverture de code est une métrique dans les tests logiciels qui décrit la proportion et l'étendue avec lesquelles le code source d'un programme est testé, et la proportion résultante est appelée couverture de code. La couverture de code de test reflète dans une certaine mesure la santé du code.

Installation des dépendances & Configuration

Pour collecter les données de couverture de test, nous devons placer des sondes dans le code métier original pour que Cypress puisse collecter les données.

Cypress recommande officiellement deux approches, la première consiste à générer un répertoire temporaire via nyc et à exécuter le code qui a été écrit dans la sonde pour collecter les données de couverture de test. La deuxième manière consiste à effectuer la conversion de code en temps réel via le pipeline de conversion de code, ce qui élimine les tracas des dossiers temporaires et rend la collecte des données de couverture de test relativement rafraîchissante. Nous choisissons la deuxième manière pour collecter la couverture E2E frontale.

1. Installation des dépendances

yarn add  babel-plugin-istanbul --dev

2. Installation du plugin cypress

yarn add  @cypress/code-coverage --dev

3. Configuration de babel

// web/config/config.ts
extraBabelPlugins: [
    ['babel-plugin-istanbul',  {
      "exclude": ["**/.umi", "**/locales"]
    }],
  ],

4. Configuration du plugin de couverture de code Cypress

// web/cypress/plugins/index.js
module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config);
  return config;
};

// web/cypress/support/index.js
import '@cypress/code-coverage/support';

5. Obtention de la couverture de test

Une fois la configuration terminée, nous devons exécuter le cas de test. Après l'exécution du cas de test, Cypress générera les dossiers coverage et .nyc_output, qui contiennent les rapports de couverture de test.

Les informations de couverture de test apparaîtront dans la console après l'exécution de la commande suivante.

npx nyc report --reporter=text-summary

Sous le répertoire coverage, une page de rapport plus détaillée sera disponible, comme illustré ici.

• Statements indique si chaque instruction a été exécutée
• Branchs indique si chaque bloc if a été exécuté
• Functions indique si chaque fonction est appelée
• Lines indique si chaque ligne a été exécutée

Résumé

Le taux de couverture de test reflète dans une certaine mesure la qualité du projet. Actuellement, la couverture E2E frontale du tableau de bord APISIX a atteint 71,57%. Nous continuerons à travailler avec la communauté pour améliorer le taux de couverture de test et fournir des produits plus fiables et stables aux utilisateurs.