Cypress Performance Plugin „cypress-performance': Eine Anleitung zur Automatisierung des Web-Performance-Tests

Einführung

Dies ist mein erster Beitrag auf dev.to, daher hoffe ich, dass er angenommen wird

Die Idee, dieses Plugin zu erstellen, kam mir, als ich Schwierigkeiten hatte, die Leistung der Web-Benutzeroberfläche zu messen, und die vorhandenen Plugins mir nicht die Flexibilität boten, die ich brauchte. Das Plugin „cypress-performance“ bietet eine leistungsstarke Möglichkeit, Web-Performance-Metriken direkt in Ihren Cypress-Tests zu messen und durchzusetzen. Im Gegensatz zu herkömmlichen End-to-End-Tests, die sich auf die Funktionalität konzentrieren, ermöglicht dieses Plugin Teams, Leistungsrückgänge frühzeitig zu erkennen und durch automatisierte Tests hohe Leistungsstandards aufrechtzuerhalten.

Web-Performance-Tests sind heutzutage von entscheidender Bedeutung. Benutzer erwarten blitzschnelle Erlebnisse und langsam ladende Seiten können sich erheblich auf Geschäftskennzahlen auswirken. Obwohl Cypress ein hervorragendes Tool für End-to-End-Tests ist, fehlen ihm integrierte Leistungsmessfunktionen.

Heute freue ich mich, Ihnen „cypress-performance“ vorzustellen, ein neues Plugin, das Leistungsmessfunktionen für Ihre Cypress-Tests bietet.

Du kannst es dir hier ansehen:

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

Hauptmerkmale

• Erfassung von Leistungsmetriken in Echtzeit während der Testausführung

• Eingebaute Wiederholungsmechanismen für zuverlässige Messungen

• Unterstützung für Core Web Vitals und andere wichtige Leistungsindikatoren

• Nahtlose Integration mit bestehenden Cypress-Tests

• Typdefinitionen für TypeScript-Unterstützung

• Konfigurierbare Schwellenwerte und Timing-Optionen

Warum ein weiteres Leistungstest-Plugin?

Sie fragen sich vielleicht: „Haben wir nicht schon „@cypress-audit/lighthouse“?“ Ja, das tun wir, und es ist ein hervorragendes Werkzeug. Allerdings verfolgt „cypress-performance“ einen anderen Ansatz:

• Echte Benutzermetriken: Während Lighthouse die Leistung unter bestimmten Bedingungen simuliert, erfasst cypress-performance Metriken während der tatsächlichen Testausführung und gibt Ihnen Einblicke in reale Benutzerszenarien.

• Testintegration: Das Plugin lässt sich nahtlos in Ihre vorhandenen Tests integrieren, sodass Sie die Leistung während der Ausführung Ihrer regulären Testabläufe messen können, nicht als separate Prüfung.

• Granulare Kontrolle: Sie erhalten eine detaillierte Kontrolle darüber, wann und wie die Leistung gemessen wird, mit integrierten Wiederholungsmechanismen für zuverlässige Ergebnisse.

• Kernweb-Vitals: Konzentrieren Sie sich auf moderne Leistungsmetriken, die wichtig sind, einschließlich Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS).

• Geringerer Aufwand – keine separaten Lighthouse-Fahrten erforderlich

• Weniger Konfiguration – minimale Einrichtung für die grundlegende Nutzung erforderlich

• Spezifischer Messwertschwerpunkt – Core Web Vitals und wichtige Timings

• Testintegration – natürliche Einbindung in bestehende Testabläufe. Der Befehl ist verkettbar und gibt alle gesammelten zu bestätigenden Metriken zurück

• Wiederholungsfunktion – integrierte Zuverlässigkeitsmechanismen, um sicherzustellen, dass die Metriken erfasst werden

• Ressourcen-Timing – detaillierte Metriken auf Ressourcenebene

• Gesamtbytes – Größe aller Ressourcen

Auf der anderen Seite - @cypress-audit/lighthouse versorgt uns mit
Umfassende Audits einschließlich SEO, Barrierefreiheit

• Bewertungssystem abgestimmt auf Lighthouse

• Statische Analyse von Best Practices

• Empfehlungen für Verbesserungen

• Leistungssimulation unter verschiedenen Bedingungen

• Umfassendere Kennzahlen, die über die reine Leistung hinausgehen

Was ist es also und wie verwendet man es?

Dies ist ein eigenständiges Cypress-Plugin mit 0 externen Abhängigkeiten.

Installieren Sie zunächst das Plugin:

npm install -D cypress-performance

Zu Ihrem cypress/support/e2e.js hinzufügen:

'cypress-performance' importieren

Für TypeScript-Benutzer schließen Sie Typen in tsconfig.json ein:

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

Jetzt können Sie mit der Leistungsmessung beginnen!

Verwendung

Das Plugin macht die einzelne Cypress-Methode verfügbar:

cy.performance()

Der Befehl cy.performance() selbst ist wiederholbar, was bedeutet, dass Cypress den Befehl wiederholt, bis entweder:

• Erhält gültige Metriken

• Erreicht das RetryTimeout

Standardoptionen für den Befehl:

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)
}

Ein typischer Test sieht so aus:

Und wie es im Cypress-Testläufer aussehen wird:

Best Practices

Realistische Schwellenwerte festlegen Berücksichtigen Sie beim Festlegen von Leistungsschwellenwerten Ihre Benutzer und Anwendungen: LCP: < 2,5 s (gut), < 4s (muss verbessert werden) CLS: < 0,1 (gut), < 0,25 (muss verbessert werden) TBT: < 300 ms (gut), < 600 ms (muss verbessert werden)

Verwenden Sie benutzerdefinierte Markierungen. Verwenden Sie für Einzelseitenanwendungen oder komplexe Benutzerflüsse benutzerdefinierte Leistungsmarkierungen, um bestimmte Interaktionen zu messen.

Berücksichtigen Sie Umgebungsvariationen. Denken Sie daran, dass CI-Umgebungen möglicherweise anders funktionieren als lokale Entwicklung. Passen Sie die Schwellenwerte entsprechend an oder verwenden Sie relative Vergleiche.

Kombinieren Sie es mit anderen Metriken. Verwenden Sie cypress-performance zusammen mit anderen Tools wie Lighthouse, um ein vollständiges Leistungsbild zu erhalten

Epilog

Mein „cypress-performance“-Plugin dient zur schnellen Erfassung wertvoller und wichtiger Web-Performance-Metriken und erweitert Ihre Cypress-Testsuite um Leistungstestfunktionen. Durch die Fokussierung auf reale Benutzermetriken und die Bereitstellung einer fein abgestuften Kontrolle trägt es dazu bei, dass Ihre Anwendung unter tatsächlichen Nutzungsbedingungen eine gute Leistung erbringt.

Ob Sie Core Web Vitals überwachen, bestimmte Benutzerinteraktionen messen oder eine reibungslose Ressourcenauslastung sicherstellen, „cypress-performance“ bietet die Tools, die Sie benötigen, um Leistungsrückgänge zu erkennen, bevor sie in die Produktion gelangen.

Bei einer guten Leistung geht es nicht nur um Geschwindigkeit – es geht um Konsistenz und Zuverlässigkeit. Mit „cypress-performance“ können Sie sicherstellen, dass Ihre Anwendung während des gesamten Entwicklungslebenszyklus hohe Leistungsstandards beibehält.

Probieren Sie es in Ihrem Projekt aus und lassen Sie mich wissen, wie es bei Ihnen funktioniert! Das Plugin ist Open Source und ich freue mich über alle Beiträge und Rückmeldungen.

Das obige ist der detaillierte Inhalt vonCypress Performance Plugin „cypress-performance': Eine Anleitung zur Automatisierung des Web-Performance-Tests. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!