Cypress Performance Plugin 'cypress-performance': Un guide pour automatiser les tests de performances Web

Introduction

C'est mon premier post sur dev.to, donc j'espère qu'il sera le bienvenu

L'idée de créer ce plugin m'est venue à l'esprit alors que j'avais du mal à mesurer les performances de l'interface utilisateur Web et que les plugins existants ne m'offraient pas la flexibilité dont j'avais besoin. Le plugin "cypress-performance" introduit un moyen puissant de mesurer et d'affirmer des mesures de performances Web directement dans vos tests Cypress. Contrairement aux tests de bout en bout traditionnels axés sur la fonctionnalité, ce plugin permet aux équipes de détecter rapidement les régressions de performances et de maintenir des normes de haute performance grâce à des tests automatisés.

Les tests de performances Web sont devenus cruciaux aujourd’hui. Les utilisateurs s'attendent à des expériences ultra-rapides, et le chargement lent des pages peut avoir un impact significatif sur les indicateurs commerciaux. Bien que Cypress soit un excellent outil pour les tests de bout en bout, il lui manque des capacités intégrées de mesure des performances.

Aujourd'hui, je suis ravi de vous présenter "cypress-performance", un nouveau plugin qui apporte des capacités de mesure des performances à vos tests Cypress.

Vous pouvez le consulter ici :

https://www.npmjs.com/package/cypress-performance https://github.com/Valiantsin2021/cypress-performance

Principales fonctionnalités

• Collecte de mesures de performances en temps réel pendant l'exécution des tests

• Mécanismes de nouvelle tentative intégrés pour des mesures fiables

• Prise en charge de Core Web Vitals et d'autres indicateurs de performance clés

• Intégration transparente avec les tests Cypress existants

• Définitions de types pour la prise en charge de TypeScript

• Seuils configurables et options de synchronisation

Pourquoi un autre plugin de test de performances ?

Vous vous demandez peut-être : « N'avons-nous pas déjà « @cypress-audit/lighthouse » ? Oui, nous le faisons, et c'est un excellent outil. Cependant, "cypress-performance" adopte une approche différente :

• Mesures utilisateur réelles : alors que Lighthouse simule les performances dans des conditions spécifiques, cypress-performance capture les mesures lors de l'exécution réelle des tests, vous donnant un aperçu de scénarios utilisateur réels.

• Intégration des tests : le plugin s'intègre de manière transparente à vos tests existants, vous permettant de mesurer les performances tout en exécutant vos flux de tests réguliers, et non comme un audit séparé.

• Contrôle granulaire : vous bénéficiez d'un contrôle précis sur le moment et la manière de mesurer les performances, avec des mécanismes de nouvelle tentative intégrés pour des résultats fiables.

• Core Web Vitals : concentrez-vous sur les mesures de performances modernes qui comptent, notamment le plus grand contenu de peinture (LCP), le délai de première entrée (FID) et le décalage de mise en page cumulatif (CLS).

• Frais généraux réduits - pas besoin de courses de phare séparées

• Moins de configuration - configuration minimale requise pour une utilisation de base

• Mise au point sur les métriques spécifiques - Core Web Vitals et timings clés

• Intégration des tests - ajustement naturel dans les flux de tests existants, la commande peut être chaînée et renvoie toutes les métriques collectées à affirmer

• Capacité de nouvelle tentative - mécanismes de fiabilité intégrés pour garantir que les métriques sont collectées

• Calendrier des ressources - métriques détaillées au niveau des ressources

• Total d'octets - taille de toutes les ressources

De l'autre côté - @cypress-audit/lighthouse nous fournit
Audits complets incluant SEO, accessibilité

• Système de notation aligné sur Lighthouse

• Analyse statique des bonnes pratiques

• Recommandations d'améliorations

• Simulation des performances dans diverses conditions

• Mesures plus larges au-delà des seules performances

Alors qu’est-ce que c’est et comment l’utiliser ?

Il s'agit d'un plugin Cypress autonome avec 0 dépendance externe.

Tout d'abord, installez le plugin :

npm install -D cypress-performance

Ajoutez à votre cypress/support/e2e.js :

importer 'cypress-performance'

Pour les utilisateurs de TypeScript, incluez les types dans tsconfig.json :

{
  "compilerOptions": {
    "types": ["cypress", "cypress-performance"]
  }
}

Vous êtes maintenant prêt à commencer à mesurer les performances !

Usage

Le plugin expose la méthode unique Cypress :

cy.performance()

La commande cy.performance() elle-même est réessayable, ce qui signifie que Cypress réessayera la commande jusqu'à ce qu'elle :

• Obtient des métriques valides

• Atteint le retryTimeout

Options par défaut pour la commande :

MetricsOptions{
  startMark?: keyof PerformanceTiming // Default: 'navigationStart'
  endMark?: keyof PerformanceTiming // Default: 'loadEventEnd'
  timeout?: number // Timeout in milliseconds (default: 10000)
  initialDelay?: number // Initial delay in milliseconds (default: 1000)
  retryTimeout?: number // Retry timeout in milliseconds (default: 5000)
}

Un test typique ressemblera à ceci :

Et à quoi elle ressemblera dans le testeur Cypress :

Meilleures pratiques

Définissez des seuils réalistes Tenez compte de vos utilisateurs et de votre application lors de la définition des seuils de performances : LCP : < 2,5 s (bon), < 4s (à améliorer) CLS : < 0,1 (bon), < 0,25 (à améliorer) TBT : < 300 ms (bon), < 600 ms (à améliorer)

Utiliser des marques personnalisées Pour les applications monopage ou les flux d'utilisateurs complexes, utilisez des marques de performances personnalisées pour mesurer des interactions spécifiques.

Prenez en compte les variations d'environnement N'oubliez pas que les environnements CI peuvent fonctionner différemment du développement local. Ajustez les seuils en conséquence ou utilisez des comparaisons relatives.

Combiner avec d'autres mesures Utilisez cypress-performance avec d'autres outils comme Lighthouse pour une image complète des performances

Épilogue

Mon plugin "cypress-performance" sert à collecter rapidement des mesures de performances Web précieuses et les plus importantes et apporte des fonctionnalités de test de performances à votre suite de tests Cypress. En se concentrant sur les métriques utilisateur réelles et en fournissant un contrôle précis, cela contribue à garantir que votre application fonctionne correctement dans des conditions d'utilisation réelles.

Que vous surveilliez Core Web Vitals, mesuriez des interactions utilisateur spécifiques ou garantissiez un chargement fluide des ressources, « cypress-performance » fournit les outils dont vous avez besoin pour détecter les régressions de performances avant qu'elles n'atteignent la production.

Les bonnes performances ne sont pas seulement une question de vitesse, mais aussi de cohérence et de fiabilité. Avec « cypress-performance », vous pouvez garantir que votre application maintient des normes de haute performance tout au long de son cycle de vie de développement.

Essayez-le dans votre projet et dites-moi comment cela fonctionne pour vous ! Le plugin est open source et j'apprécie toutes les contributions et commentaires.

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!