Das Internet mit Cypress: Reale Szenarien aus Herokus „The Internet' Playground

Ich bin kürzlich zu chatGPT gegangen und habe gefragt, welche guten Automatisierungsübungen es geben könnte, nachdem wir eine Weile am selben System gearbeitet oder Automatisierung nur für eine bestimmte Art von Benutzerflüssen bereitgestellt haben Es kann passieren, dass man einige Dinge vergisst, also habe ich nach einigen Seiten zum Üben gefragt und bin auf das Internet gestoßen.
Und so rudimentär die Website auch aussehen mag, sie bieten Ihnen immer noch einen Ort, an dem Sie etwas Automatisierung ausprobieren können, und im Moment war das alles, was ich brauchte. Ich habe mir etwas Zeit genommen und ein paar klassische Web-Herausforderungen mit Cypress gemeistert.
Lassen Sie uns also ohne weitere Umschweife in einige von mir automatisierte Szenarien eintauchen, die alles abdecken, von Schaltflächen, die wie von Zauberhand kommen und gehen, über seltsame Drag-and-Drops, dateibezogene Automatisierung bis hin zu schneller Shadow-DOM-Arbeit!

1. Drag and Drop: Wenn Sie jemals versucht haben, Drag-and-Drop zu automatisieren, wissen Sie, dass es nie so einfach ist, wie es scheint. Cypress bietet zwar native Unterstützung für bestimmte Interaktionen (und das habe ich versucht, lol), aber es erfordert immer noch etwas Kreativität, um den Drag-and-Drop-Test hier genau richtig hinzubekommen.

In diesem Fall habe ich mit einem benutzerdefinierten DragAndDrop-Befehl experimentiert und dabei Trigger('mousedown'), Trigger('dragover') und Trigger('mouseup') verwendet. Aufgrund der Art und Weise, wie die Funktionalität auf dieser Website implementiert wurde, musste ich etwas tiefer graben, um diese Tests zum Laufen zu bringen, aber es scheint, dass für die meisten modernen Apps das Cypress-Plugin ausreichen sollte (zum Glück).

1. Elemente hinzufügen/entfernen:

Die Schaltfläche „Element hinzufügen“ in dieser Übung ist theoretisch einfach, aber es ist lustig, wie dieser Spielplatz manchmal einfach versucht, Ihre Erwartungen zu erfüllen, haha. Klicken Sie einmal darauf und dann ... Es erscheint eine Schaltfläche zum Löschen (was zwar nicht besonders intuitiv ist, aber na ja, Sie müssen einfach damit anfangen). Der Trick besteht darin, sicherzustellen, dass wir den Add-Remove-Tanz auf eine Weise handhaben, die in unseren Tests stabil und wiederholbar ist. Bei Cypress prüfen wir, ob die Schaltfläche angezeigt wird, fügen einige weitere hinzu und entfernen sie dann nacheinander, um sicherzustellen, dass die Sequenz nicht fehlerhaft ist.

Profi-Tipp:
Das Verfolgen von Elementen, die erscheinen und verschwinden, kann schwierig sein, aber die .should('exist')- und .should('not.exist')-Zusicherungen von Cypress bewältigen dies gut. Außerdem erhalten Sie jedes Mal eine süße visuelle Bestätigung.

1. Dynamischer Inhalt:

Ich denke, dass dies das einfachste der Beispiele in diesem Artikel ist, aber es kann trotzdem interessant sein. Die Idee bestand lediglich darin, Tests zu erstellen, die sicherstellen würden, dass das Format des Inhalts konstant bleibt, selbst wenn der Inhalt dies tun würde sich immer ändern... kann aber dennoch zum Lernen nützlich sein.

Cypress kann bestätigen, dass Elemente wie erwartet geladen werden, ohne beim tatsächlichen Inhalt zu wählerisch zu werden, wodurch die Tests stabil bleiben.

1. Dynamische Steuerung:

Hierfür werden Steuerelemente wie Kontrollkästchen und Schaltflächen je nach Benutzerinteraktion angezeigt oder ausgeblendet. Bei manchen muss man warten, bis die Ladeanzeige verschwindet. Hier sind Cypresss cy.wait und .should('be.visible') der Schlüssel.

Kurztipp:

Anstelle fest codierter Wartezeiten verwenden Sie Assertionen wie .should('exist') und .should('be.disabled'), um auf den Status der Seite zu reagieren. Dies macht Tests robuster und anpassungsfähiger.

1. Datei-Download:

Das Herunterladen einer Datei mag einfach klingen, bis Sie nachweisen müssen, dass es tatsächlich passiert ist. Mit Cypress können wir auf verschiedene Weise sicherstellen, dass eine Datei tatsächlich heruntergeladen wurde.

Wir können verschiedene Dinge tun, um sicherzustellen, dass ein Download erfolgreich war. Bei dieser Anwendung habe ich nur sichergestellt, dass sich die Datei im Download-Ordner befindet, nachdem ich auf den Link geklickt habe. Es war ganz einfach: Sobald die Datei vorhanden ist, wird der Test automatisch durchgeführt. Es könnten auch andere Strategien angewendet werden, z. B. die Verwendung von cy.intercept, um zu überprüfen, ob beispielsweise eine Download-Anfrage ausgelöst wurde.

1. Datei-Upload: Genau wie das Herunterladen von Dateien verläuft das Hochladen von Dateien mit Cypress überraschend reibungslos.

Für diese Art von Szenario könnten Sie so etwas wie „cypress-file-upload“ verwenden
Dies ist ein sehr gutes und nützliches Plugin, und bestätigen Sie, dass die Datei von der App verarbeitet wird.

In meinem Beispiel wurde alles nur über den Befehl .selectFile erledigt, und es gibt eine Möglichkeit, dies einfach zu tun, ohne überhaupt eine tatsächliche Datei zu senden. Die Verwendung von Cypress.Buffer sollte den Zweck erfüllen (Sie können die Implementierung darin sehen). das unten verlinkte Repository).

Und das funktionierte sowohl für Uploads per Button-Klick als auch für Drag-and-Drop-Uploads, ganz einfach... Danke Cypress ?.

1. Shadow DOM:

Das Geheimnis des Schatten-DOM besteht darin, dass Elemente wie ein Geheimnis im Haupt-DOM sind. Sie sind versteckt und befolgen nicht die regulären CSS-Sichtbarkeitsregeln, was je nachdem, wie Sie Automatisierungen darauf ausführen müssen, etwas knifflig sein kann. Zum Glück unterstützt Cypress den Schattenbefehl, diesen Schleier zu durchdringen und diese verborgenen Elemente zu finden.

Für diese Tests habe ich cy.get('element').shadow() verwendet, um auf Elemente innerhalb des Shadow-DOM zuzugreifen, und dann, ohne weitere Probleme oder Schwierigkeiten, können Sie wie gewohnt auf die Elemente zugreifen und Aussagen zu ihnen treffen mit normalen.

---

Und das ist es für den Moment. Nur kurze 6 Beispiele, wie wir Cypress verwenden können, um einige grundlegende Browser-Automatisierungsnutzungen zu bewältigen, und wie wir sie nutzen können, um Ihnen das Leben bei der Bewältigung solcher Fälle zu erleichtern .

Bereit, es auszuprobieren?

Wenn Sie daran interessiert sind, diese Tests auszuprobieren oder für Ihre Projekte anzupassen, habe ich den Code auf meinem GitHub-Repo verfügbar gemacht. Die Testsuiten sind sehr übersichtlich, sodass es nicht zu viele Zweifel daran geben sollte, und wir haben den GitHub Actions Flow, den Sie verwenden können, damit Sie sehen können, wie alles in Aktion funktioniert! Vielen Dank, bis zum nächsten Mal!

Das obige ist der detaillierte Inhalt vonDas Internet mit Cypress: Reale Szenarien aus Herokus „The Internet' Playground. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!