Vergleichen Sie HTML in Playwright .NET

Foto von Miguel Á. Padriñán von Pexels

---

Die Automatisierung der Textprüfung (und ihres HTML-Codes) kann eine Herausforderung sein, wenn Sie mit der von Ihnen verwendeten Sprache und dem verwendeten Framework nicht vertraut sind. Eine begrenzte Zeit zum Lernen und Erkunden zu haben, ist eine eigene Herausforderung. Eine meiner Aufgaben bei der Automatisierung eines Rauchtests für unser Projekt bestand darin, den Text in jeder Umgebung zu überprüfen, wobei jede spezifische Einrichtung ihre eigene Begrüßungsbotschaft hatte. Und ich gebe zu, ich war mir nicht ganz sicher, wo ich anfangen sollte. Ich wusste, was ich brauchte, und fand heraus, wo ich es bekommen konnte. Aber alle Teile zusammenzubauen war nicht so einfach, wie es aussah.

Zu Beginn benötigte ich Zugriff auf die Datenbank. Und dann arbeite ich mit unserem Setup, um sicherzustellen, dass ich Anwendungseinstellungen (die dem Framework mitteilen, wo Informationen zu finden sind und mit den Konfigurationseinstellungen arbeiten, um Informationen privat zu halten) verwenden kann, um während eines Laufs eine Verbindung mit der Datenbank herzustellen. Ich könnte dann Teile zusammenfügen, die Informationen aus der Datenbank abrufen und sie zum Testen mit den angezeigten Informationen vergleichen.

Manuell war es einfach – ich hätte ahnen können, dass es nicht ganz so einfach sein würde, wie ich gehofft hatte. Es war einfach, sich den HTML-Code anzuschauen und zu überprüfen, ob alles im richtigen Layout war. Ich verstehe das einfache HTML-Layout so gut, dass dies eine schnelle Überprüfung war, um sicherzustellen, dass die Wörter korrekt waren, und um fortzufahren. Ich hatte diesen Rauchtest aus gutem Grund mit vielen Pausen zur manuellen Überprüfung durchgeführt. Zwischen diesem und der Liste der Dinge, die ich überprüfen musste, wurde ich ermutigt, zu lernen, zu erforschen und um Hilfe zu bitten, um diese Automatisierung erfolgreich zu machen und sie in den anderen Tests anzuwenden.

Sobald der Datenbankzugriff (und die richtige Verbindungszeichenfolge!) erstellt war, konnte ich den Text der Seiten als Variable festlegen. Das war der einfache Teil: Ich wusste, was ich hier tat, und hatte das Gefühl, es geschafft zu haben. Ich habe den Playwright-Test durchgeführt, mit der Erwartung, dass der Text auf der Seite wortweise übereinstimmt, nicht jedoch die HTML-Komponenten. Und ich hatte recht – die richtigen Wörter waren vorhanden, aber der Test schlug mit dem hinzugefügten HTML fehl.

Recherchezeit! Der erste Versuch bestand darin, Page.ContentAsync() zu verwenden, den Befehl zum Abrufen des vollständigen HTML-Codes der Seite, einschließlich der Kopfzeilen. Dies sollte es mir ermöglichen, den Text zu durchsuchen und die Teilzeichenfolge des Textes zu finden, richtig? Auf den ersten Blick war es gar nicht so schlimm – ich hatte den gesuchten HTML-Code gespeichert und musste nur noch den gesamten Inhalt des Dokuments durchgehen, um ihn zu finden. Nicht effizient und schon gar keine gute Praxis! Es sollte mir das gewünschte Ergebnis liefern und könnte dann wiederholt werden.

Das war nicht der Fall. Es war nicht schnell möglich, einen Teilstring auf der gesamten Seite zu finden, und ich wollte, dass meine Automatisierung schnell ist. Nach ein paar Dutzend Versuchen, das Ganze so zum Laufen zu bringen, wie ich es wollte, und unter Berücksichtigung der Geschäftsregeln (wenn Sie das Problem nicht in 45 Minuten lösen können, ist es an der Zeit, jemand anderen zu fragen), vereinbarte ich ein Treffen mit einer der Entwickler. Ich weiß, dass sie beschäftigt sind und ein dringend benötigtes Update erstellen: Das Treffen wurde mit der Notiz „Wir können bei Bedarf einen neuen Termin vereinbaren“ abgeschlossen.

Während ich auf das Treffen wartete, beschäftigte ich mich weiterhin damit: Eine der Herausforderungen bei der Eingrenzung des Bereichs war die Klasse des Div – es war nicht gut benannt, und mit Bootstrap bestand die Möglichkeit für doppelte Divs mit dem Der gleiche Name hatte mir auf anderen Seiten Probleme bereitet. Als ich mit jemandem sprach, der schon viel länger hier war als ich, stellte ich fest, dass dies IMMER der dritte Abschnitt auf der Seite war.

Jetzt hatte ich einen neuen Plan, es zu finden – den Nth()-Locator verwenden und das richtige div finden. Ich würde dieses Problem gerne lösen, den Beitrag schreiben, den ich gerade schreibe, und vor dem Treffen mit der nächsten Ausgabe fortfahren. Wie viele von Ihnen vielleicht wissen und/oder vermuten, ist dies ein guter Auslöser dafür, dass etwas Dringendes passiert, und das geschah auch. Die Pläne wurden mehrere Tage lang von Seite zu Seite im Organizer kopiert, bis es für uns an der Zeit war, sie paarweise zu entwickeln.

Die Zusammenarbeit mit diesem Entwickler ist immer ein Vergnügen: Wir haben viel gemeinsam und respektieren einander. Als Bonus sind sie gut im Unterrichten! Nach einem kurzen Überblick über das Ziel gingen wir die Lösungsversuche durch, die ich unternommen hatte. Ich habe das letzte mit den Fehlern in der IDE belassen, in der Hoffnung, dass das hilfreich sein würde. Und nun geht es voran!

Mit dem Debugger haben wir überprüft, ob der HTML-Code korrekt eingelesen wurde. Dies war ein Bereich, den ich nicht vollständig überprüft hatte – und er war zum Glück korrekt. Wir waren uns einig, dass der Div-Name nicht sehr nützlich war – die Arbeit, die sie kürzlich durchgeführt hatten, hatte andere Divs mit demselben Namen erstellt, aber auf einer anderen Seite. Das wurde zwar notiert, aber aufgeschoben, bis ich im Test an diesem Punkt angelangt war.

Ihre Kenntnisse in NUnit waren erforderlich – der einfachere Weg, diesen Abschnitt zu überprüfen, war die Verwendung des Befehls AreEqual. Dadurch konnte der Test überprüfen, ob die Zeichenfolgen gleich waren. Der Dramatiker war stur. Es brauchte Ortungsgeräte anstelle von Schnüren – oder umgekehrt –, deren Herstellung einfach zu viel Zeit in Anspruch nahm. Und ich habe mich gefreut, diese Technik zu erlernen – ich kann mir vorstellen, dass sie in Zukunft nützlich sein wird!

Nach ein paar Versuchen, Nth() zum Laufen zu bringen, griffen wir auf die Verwendung dieser seltsamen div-Klasse zurück – nachdem wir sichergestellt hatten, dass sie nur dieses eine Mal auf der Seite verwendet wurde. Das gab uns einen Ausgangspunkt – nun müssen wir herausfinden, wie wir den HTML-Code dort hineinbekommen (zum Glück war dies das einzige in diesem speziellen Div). Ein paar weitere Fehlstarts und schließlich das Aufgeben der Vorstellung, dass ContentAsync() für dieses Div nicht funktionieren würde, führten sie zu der Lösung, die ich ausprobiert und verworfen hatte.

InnerHtmlAsync() gab uns den genauen Inhalt des Div! Räume und so. Und das war der nächste Stolperstein – und wir hatten keine Zeit mehr für das Treffen. Zum Glück waren sie bereit, mir noch ein paar Minuten zu geben, vor allem, weil es sich um ein Problem handelte, das sie zuvor gelöst hatten. Ich brauchte nur die Syntax, um die Leerzeichen zu entfernen: Ersetzen Sie(" ", ""), wenn Sie neugierig sind. Und das ließ den Test laufen, bis die nächste PauseAsync(), die ich zur manuellen Überprüfung hinzugefügt hatte, ihn für einen Moment stoppte.

Sie gingen zum Mittagessen und ich verbrachte den nächsten Zeitblock damit, Notizen vorzubereiten. Ich musste andere Dinge finden – und jetzt hatte ich eher eine Ahnung, wie ich vorgehen sollte.

Das obige ist der detaillierte Inhalt vonVergleichen Sie HTML in Playwright .NET. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!