Also, du hast eine Ruby on Rails Projekt, mit dem du getestet hast Wasserschweine und Capybara-Webkit und Sie müssen ein Upgrade durchführen auf Kopfloses Chrom.
Nun, du bist am richtigen Ort, denn hier zeige ich genau, wie du das erreichen kannst. Aber lassen Sie mich zunächst einen Kontext darüber geben, warum es wichtig ist, die Änderung vorzunehmen, und warum Chrome der perfekte Kandidat dafür ist.
Seit 2017 wird Google Chrome mit einer Headless-Umgebung ausgeliefert, die es uns ermöglicht, Benutzerinteraktionen ohne den Aufwand einer GUI nachzuahmen. Sie haben sich auch zusammengetan mit Selen, ein Browser-Automatisierungstool, das veröffentlicht werden soll Chrome-Treiber. Es bietet eine Standardoberfläche zur Steuerung von Chrome, sodass es mit den meisten Tools und Sprachen, die es verwenden möchten, gut funktioniert.
Nun, bevor das alles eine Option war, Capybara-Webkit, der Treiber für den QtWebKit-Browser, passte hervorragend zu dem Job. Allerdings würde ich jetzt nicht dasselbe sagen. Die Tests schlagen zeitweise fehl und erzwingen Wiederholungsversuche auf dem CI, und der Browser, auf den es angewiesen ist (QtWebKit), wurde veraltet.
Alles in allem haben Sie mit Chrome einen modernen Browser, einen Treiber dafür und ein praxiserprobtes Tool zur Automatisierung Ihrer Tests (Selenium). All das, ohne mit lästigen Qt-Versionsabhängigkeiten umgehen zu müssen. Fantastisch, oder?
Okay, jetzt, da Sie alle auf dem Laufenden sind, werde ich Sie durch die Einrichtung von ChromeDriver und Selenium führen und gleichzeitig einige der häufigsten Probleme beheben, die möglicherweise auftreten.
Für die Umstellung sind natürlich Chrome und einige Abhängigkeiten erforderlich, um sicherzustellen, dass alles sauber in Capybara integriert ist.
Dieser Teil ist ziemlich einfach, er sollte Ihnen keinen großen Aufwand bereiten.
Zuallererst müssen Sie die neueste stabile Version von Chrome installierenUnter Linux können Sie dies wie folgt tun:
undefined
undefined
Als Nächstes benötigen Sie zwei weitere Tools:
Das Juwel undefined hilft bei der Installation von ChromeDriver, indem der Treiber automatisch heruntergeladen, installiert und auf dem neuesten Stand gehalten wird.
Dann sollten Sie beide zum Projekt in Ihrem Gemfile hinzufügen, wie unten gezeigt:
undefined
Vergiss nicht undefined danach.
Jetzt müssen Sie nur noch die Treiber registrieren und konfigurieren in undefined:
undefined
Dadurch wird der Standardtreiber auf gesetzt undefined. Wenn Sie die Ausführung der Tests beobachten möchten, ändern Sie es einfach in undefined in den letzten beiden Zeilen.
Möglicherweise stellen Sie auch fest, dass Funktionen aktivieren Tag in den Optionen von Chrome, dies ist eine vorübergehende Lösung aufgrund eines Problem in Chrome 74 in dem Cookies während der Ausführung nach dem Zufallsprinzip gelöscht werden, was dazu führen kann, dass Chrome einfriert.
Laut dem Bug-Tracker von Chromium wird dies in Version v75 behoben.
Wenn Sie das Projekt in Docker ausführen, Möglicherweise müssen Sie auch „no-Sandbox“ hinzufügen zu den Optionen von Chrome:
undefined
Nachdem das erledigt ist, können Sie fortfahren und entfernen undefined aus dem Gemfile sowie allen Importen oder Konfigurationen, die Sie möglicherweise noch übrig haben (suchen Sie nach undefined).
Bei manchen Projekten laufen die Tests nach diesen Schritten bereits reibungslos, bei anderen ist das jedoch möglicherweise nicht der Fall. Durch den Einsatz eines neuen Browsers und neuer Test-Tools treten auch neue Funktionen und Probleme auf.
Capybara-webkit verfügte über einige nützliche, aber nicht standardisierte Methoden, und Selenium unterstützt nicht alle Methoden , die Capybara bietet. Dies führt zu einer Lücke, und alle Tests, die nicht unterstützte Methoden verwendeten, müssen angepasst werden.
Dennoch gibt es einen einfachen Workaround: Wenn Sie einen Klick auslösen möchten, können Sie stattdessen die Eingabetaste an das Element senden:
Oder Sie klicken das Element per JavaScript an:
Wenn es sich um eine andere Art von Ereignis handelt, können Sie jQuery wie folgt verwenden:
undefined
Um die Logs anschließend auszulesen, können Sie einfach Folgendes tun:
Mehr über die Capabilities und Optionen von Chrome erfahren Sie unter hier.
Diesen letzten Punkt zu beheben, ist eine gewisse Herausforderung, aber die Lösung von GitLab ist ein hervorragender Workaround. Als sie bei der Portierung ihres Browsers von PhantomJS auf Chrome vor demselben Problem standen, implementierten sie eine Middleware, um die Request-Header abzufangen (mehr dazu hier).
Um diese Lösung umzusetzen, habe ich einfach diese Dateien eingebunden
undefined:
undefined:
Die Namespaces müssen an Ihr Projekt angepasst und das 'concurrent-ruby'-Gem importiert werden, da es in der Middleware benötigt wird:
Denken Sie daran, auch die Dateien in undefined zu importieren:
Nachdem alles eingerichtet ist, müssen Sie lediglich Folgendes tun, um die Details des Headers abzurufen:
Jetzt, da alles in Betrieb ist, möchte ich Ihnen noch ein paar Tipps geben, um Headless Chrome und ChromeDriver optimal zu nutzen und einige häufig auftretende Probleme zu vermeiden.
Capybara klickt auf folgende Weise auf Elemente:
Wenn die Seite beispielsweise scrollt, während das Element angeklickt werden soll, könnten die Koordinaten zwischen Schritt 2 und 3 veraltet sein, was bedeutet, dass der Klick an die falsche Stelle fällt.
Eine mögliche Lösung für dieses Problem besteht darin, auf das Ende der Animationen zu warten. In diesem Fall habe ich darauf gewartet, dass die jQuery-Animation beim Scrollen des Körpers aufhört:
undefined
undefined
Eine andere Möglichkeit wäre, jQuery-Animationen beim Testen ganz zu deaktivieren, wie folgt:
Es ist erwähnenswert, dass das Deaktivieren der Animationen auch die Leistung der Tests verbessern kann.
Wenn dieser Fix bei Ihnen nicht funktioniert und Sie wirklich alle Animationen abbrechen möchten, schauen Sie sich das an dieser tolle Artikel zusammengestellt von den Leuten von Doctolib.
Capybara klickt nur auf Elemente, wenn sie sichtbar sind. Wenn Sie also eine Navigationsleiste oder ein Popup haben, das ein Element verdeckt, erhalten Sie möglicherweise eine Fehlermeldung wie diese:
Das Element ist an Punkt (100, 200) nicht anklickbar. Ein anderes Element würde den Klick erhalten:... (Selenium: :WebDriver: :Error: :UnknownError)
Um damit umzugehen, können Sie schließe alle Popups auf der Seite und scrolle nach unten zum Element bevor Sie darauf klicken.
Eine einfache Methode zur Umsetzung dieser Idee wäre:
undefined
Der Headless-Modus von Chrome und der dazugehörige ChromeDriver wurden stark zum Testen und Automatisieren verwendet, zumal QtWebKit veraltet war und damit Projekte, die darauf basierten, wie Phantom JS und Capybara-Webkit.
Sogar der Betreuer von Phantom JS, der einst beliebte Headless-Browser hat sein Projekt zugunsten von ChromeDriver eingestellt. Und Thoughtbot, die Macher von Capybara-Webkit, fangen an spiele mit ChromeDriver herum ebenso.
Capybara-Webkit hat den Job zwar eine ganze Weile gemacht, aber der Wechsel zu einer moderneren Alternative (dem Headless-Modus von Chrome) wird die Tests mehr machen zuverlässig und stabil. All dies mit dem zusätzlichen Vorteil, dass dieselbe Browser-Engine wie die meisten Benutzer verwendet wird, wodurch die Testaktionen viel ähnlicher sind, wie eine reale Benutzerinteraktion aussehen würde.
Viel Spaß beim Testen Leute!
Fanden Sie diesen Artikel hilfreich? Diese könnten dir auch gefallen!
Enthusiast von allem, was mit Frontend zu tun hat. In einer engagierten Hassliebe mit CSS. Am häufigsten wird er beim Scrapen von Daten für Nebenprojekte gesehen, die er nie beenden wird.
People who read this post, also found these interesting:
.webp)
