Wie benutze ich Cypress mit Vue?

Beim Testen von VUE -Anwendungen mit Cypress ist es der Schlüssel zu verstehen, wie Testwerkzeuge mit Framework -Funktionen kombiniert werden. 1. Installieren Sie Cypress und konfigurieren Sie das Projekt, fügen Sie Abhängigkeiten über NPM oder Garn hinzu und starten Sie die grafische Schnittstelle. 2. Schreiben Sie eine E2E -Testdatei, speichern Sie sie im Cypress/E2E -Verzeichnis am Ende von .spec.js, verwenden Sie Cy.vissit (), um auf die Seite und Cy.Contains () zuzugreifen, um den Inhalt zu überprüfen; 3.. Verwenden Sie die Vue -Komponenten -Wechselwirkung, simulieren Sie die Vorgänge über Cy.get (). Click () und prüfen Sie Statusänderungen und geben Sie die Verwendung der automatischen Wiederholungsmechanismus von Cypress Priorität und nicht Cy.wait (). 4. Debuggen und führen Sie Tests aus, verwenden Sie eine grafische Schnittstelle, um in einer CI -Umgebung allmählich über NPX -Cypress -Lauf zu debuggen oder Kopflos auszuführen und Screenshots, Protokolle und andere Hilfsbehörden zu kombinieren. Das Beherrschen der Details des Pfadzugriffs, der Elementauswahl und des asynchronen Wartens ist der Schlüssel zum Erreichen zuverlässiger Tests.

Beim Testen von VUE -Anwendungen mit Zypressen ist es wichtig zu verstehen, wie Testwerkzeuge und Framework -Funktionen kombiniert werden. Cypress ist ein Front-End-Test-Tool, das gut mit VUE für End-to-End-Tests (E2E) funktioniert.

Installieren Sie Zypressen und konfigurieren Sie das Projekt

Stellen Sie zunächst sicher, dass Ihr VUE -Projekt erstellt wurde und Sie die Testfunktionen hinzufügen möchten. Die Möglichkeit zur Installation von Cypress ist sehr einfach:

• Verwenden Sie NPM oder Garn, um Abhängigkeiten hinzuzufügen:

   NPM Installieren Sie Cypress-Save-dev

  oder

   Garn hinzufügen Cypress - -dev

Nach Abschluss der Installation können Sie Cypress mit dem folgenden Befehl starten:

 NPX Cypress Open

Dies führt Sie in die grafische Schnittstelle von Cypress und generiert automatisch grundlegende Verzeichnisstrukturen, z. B. cypress/e2e -Ordner zum Speichern von Testdateien.

Wenn Sie ein von Vue CLI erstellter Projekt verwenden, können Sie auch den offiziellen Plug-in- cypress-vue-unit-test installieren, um Unit-Tests zu unterstützen. Hier konzentrieren wir uns jedoch hauptsächlich auf den grundlegenden Prozess des E2E-Tests.

Schreiben Sie den ersten E2E -Test

Cypress -Testdateien enden normalerweise in .spec.js und werden im cypress/e2e -Verzeichnis platziert. Unter der Annahme, dass Ihre Vue -App -Homepage einen Titel "Willkommen in meiner App" zeigt, können Sie einen einfachen Test wie diesen schreiben, um zu überprüfen, ob er vorhanden ist:

 beschreiben ('mein erster Test', () => {
  It ('Besucht die App -Homepage', () => {
    Cy.vissit ('/') // Zugriff auf den Stammpfad des lokalen Entwicklungsservers Cy.Contains ('H1', 'Willkommen in meiner App') // H1 -Tags mit spezifischem Text finden})
})

Dieser Code macht ein paar Dinge:

• cy.visit() öffnet die angegebene Seite
• cy.contains() prüft, ob auf der Seite ein passender Inhalt vorhanden ist
• Wenn der Text nicht gefunden wird, fällt der Test fehl

Dieses Beispiel zeigt zwar einfach, zeigt, wie Cypress das Benutzerverhalten simuliert und die Ergebnisse validiert.

Wechselwirkung der VUE -Komponente handhaben

Die komponentierte Struktur von Vue mag einige Vorgänge etwas kompliziert erscheinen lassen, aber Cypress bietet eine API, die leistungsstark genug ist, um diese Situationen zu bewältigen.

Wenn Sie beispielsweise auf eine Schaltfläche klicken und überprüfen möchten, ob sich ein bestimmter Status geändert hat, können Sie dies tun:

 IT ('klickt auf eine Schaltfläche und überprüft das Ergebnis', () => {
  cy.vissit ('/')
  Cy.get ('. My-Button'). Click () // Klicken Sie auf das Element mit dem Klassennamen My-Button Cy.Contains ('P', 'Daten erfolgreich aktualisiert!') // Überprüfen Sie, ob der erwartete Inhalt angezeigt wird})

Beachten:

• Vue aktualisiert dynamisch die DOM
• Die Verwendung cy.get() und cy.contains() ist normalerweise eine sichere Möglichkeit, automatisch wieder zu werden, bis das Ziel gefunden oder Zeitlimit erreicht ist.

Wenn Sie auf Daten geladen sind, die asynchron geladen sind, können Sie cy.wait() verwenden. Es wird jedoch empfohlen cy.contains() oder andere Behauptungen zu verwenden, die auf DOM -Änderungen basieren, um implizit zu warten.

Debugging und Ausführung von Tests

Debugging Cypress -Tests ist eigentlich sehr intuitiv. Nachdem Sie npx cypress open ausgeführt haben, können Sie die Testdatei auswählen, die über die grafische Schnittstelle ausgeführt werden soll. Jeder Schritt wird aufgezeichnet. Klicken Sie auf einen beliebigen Schritt, um den DOM -Status zu diesem Zeitpunkt anzuzeigen.

Wenn Sie Tests in einer CI -Umgebung ausführen möchten, können Sie den folgenden Befehl verwenden:

 NPX Cypress Run

Dadurch werden alle Tests im kopflosen Modus ausgeführt und die Ergebnisse ausgegeben.

Einige häufige Tipps:

• Verwenden Sie cy.log() , um Debugging -Informationen auszugeben
• Screenshots und Aufzeichnungsvideos, wenn der Test fehlschlägt (Cypress macht dies standardmäßig)
• Führen Sie den Test mit dem Parameter mit dem --headed aus, um die Browser -Schnittstelle anzuzeigen

Grundsätzlich ist das. Die Kombination von Zypressen und Vue ist nicht kompliziert, aber Details können leicht übersehen, wie z. B. Zugriffswege, Elemente -Selektoren und asynchrone Wartenmechanismen. Nach dem Beherrschen dieser Aspekte können Sie zuverlässige Tests für Ihre VUE -Anwendung reibungsloser schreiben.

Das obige ist der detaillierte Inhalt vonWie benutze ich Cypress mit Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!