all
Business
data science
design
development
our journey
Strategy Pattern
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Francisco Silva

Februar 23, 2024

Min Read

Capybara-Webkit til Headless Chrome: Hvad man skal vide

Så, du har en Ruby on Rails projekt, du har testet med Capybara og capybara-webkit og du skal opgradere til Hovedløs krom.

Godt, du er på det rigtige sted, da her viser jeg nøjagtigt, hvordan du kan opnå det. Men lad mig først give en kontekst om, hvorfor det er vigtigt at foretage ændringen, og hvorfor Chrome er den perfekte kandidat til det.

Siden 2017 har Google Chrome leveret med et hovedløst miljø, hvilket giver os mulighed for at efterligne brugerinteraktioner uden omkostningerne ved at have en GUI. De samarbejdede også med Selen, et browserautomatiseringsværktøj til frigivelse Chrome River. Det giver en standardgrænseflade til at styre Chrome, så det fungerer godt med de fleste værktøjer og sprog, der ønsker at bruge det.

Før alt dette var en mulighed, capybara-webkit, driveren til QtWebKit-browseren, var et godt match til jobbet. Men jeg vil ikke sige det samme nu. Testene mislykkes periodisk, hvilket tvinger genforsøg på CI'en, og browseren, den er afhængig af (QtWebKit), har været forældet.

Alt i alt har du med Chrome en moderne browser, en driver til den og et felttestet værktøj til at automatisere dine tests (Selenium). Alt dette uden at skulle håndtere irriterende Qt-versionsafhængigheder. Fantastisk, ikke?

Okay, nu hvor du alle er opdateret, vil jeg lede dig gennem opsætningen af ChromeDriver og Selenium, mens jeg giver en løsning på nogle af de mest almindelige problemer, der måtte opstå.

blue arrow to the left
Imaginary Cloud logo

Opsætning af miljøet

At skifte kræver selvfølgelig Chrome og et par afhængigheder for at sikre, at alt er pænt integreret med Capybara.

Denne del er ret ligetil, det burde ikke være meget besvær for dig.

Installation af Chrome

Først og fremmest skal du installere Chromes seneste stabile version
I Linux kan du gøre det som sådan:


Installation af afhængigheder

Dernæst skal du bruge to værktøjer til:

  • Chrome River: Chrome's implementering af Webdrivere grænseflade til fjernbetjening;
  • Selen: nødvendigt for at implementere de automatiserings- og testværktøjer, som du vil bruge med Capybara.

Perlen webdrivere hjælper med installationen af ChromeDriver, automatisk downloader, installerer og holder driveren opdateret.

Derefter skal du tilføje begge til projektet i din Gemfile, som vist nedenfor:


Glem ikke at bundtinstallation bagefter.

Opsætning af drivere

Nu skal du bare registrere driverne og konfigurere dem i spec_helper.rb:


Dette indstiller standarddriveren til :headless_chrome. Hvis du gerne vil se testene udføres, skal du bare ændre det til :krom i de sidste to linjer.

Du kan også bemærke aktivere-funktioner tag i Chrome's indstillinger, dette er en midlertidig løsning på grund af en problem i Chrome 74 hvor cookies slettes tilfældigt under udførelsen, hvilket kan få Chrome til at fryse.

Ifølge Chromiums bug tracker vil dette blive rettet i version v75.

Hvis du kører projektet i Docker, Det kan også være nødvendigt at tilføje 'no-sandbox' til Chromes muligheder:


Rengøring af tingene

Nu hvor det er taget hånd om, kan du gå videre og fjerne capybara-webkit fra Gemfile, samt enhver import eller konfiguration, du måtte have tilbage (se efter Capybara: :Webkit).

blue arrow to the left
Imaginary Cloud logo

Problemer, der kan komme op

For nogle projekter kører testene muligvis allerede problemfrit efter disse trin, men for andre er det måske ikke tilfældet. Med en ny browser og værktøjer, der kører testene, kommer der også nye funktioner og nye problemer op.

Capybara-WebKit havde et par nyttige, men ikke-standardiserede metoder, og selen understøtter ikke alle metoder Capybara har at tilbyde. Så dette skaber et stort hul, og enhver test, der brugte ikke-understøttede metoder, skal lappes.

  • Element #trigger understøttes ikke af Selen, selvom det i de fleste tilfælde bør ikke bruges, da det tillader handlinger, som brugeren aldrig vil være i stand til at gøre.

Ikke desto mindre ville en nem løsning, hvis du udløser et klik, være at sende returtastetrykket til elementet:

Eller for at klikke på elementet gennem javascript:

Hvis du har at gøre med en anden slags begivenhed, kan du bruge jQuery sådan:

  • resize_window omdøbes til resize_window_to i Selenium.
  • Læsning af JavaScript-logfiler er lidt anderledes. I driverkonfigurationen skal du ændre funktionerne til noget som:


Og så for at læse logfilerne, kan du simpelthen:

Du kan læse mere om Chromes muligheder og muligheder her.

  • Inspektion og indstilling af anmodningernes overskrifter er ikke understøttet i Selenium som standard. Det betyder, at side.driver.header, side.response_headers og side.status_code er ikke tilgængelige.

At løse dette sidste punkt er lidt af en udfordring, men GitLabs løsning er en god løsning. Da de stod over for det samme problem, mens de porterede deres browser fra PhantomJS til Chrome, implementerede de en Middleware til at opfange anmodningernes overskrifter (mere om det her).

For at implementere denne løsning inkluderede jeg simpelthen disse filer

lib/test:

spec/support/hjælpere:

Navneområderne skal ændres for at matche dit projekt, og 'concurent-ruby' perlen importeres, som det kræves i mellemvaren:

Husk også at importere filerne i spec_helper.rb:

Og med al den opsætning er alt hvad du skal gøre for at få overskriftens detaljer følgende:

blue arrow to the left
Imaginary Cloud logo

Et par flere tip

Nu hvor alt er i gang, lad mig dele et par flere tip til at få mest muligt ud af Headless Chrome & ChromeDriver og undgå nogle almindelige problemer.

Animationer kan være besværlige, især rulleanimationer

Capybara klikker på elementer på følgende måde:

  1. Find DOM-element;
  2. Beregn elementkoordinater;
  3. Klik på de nævnte koordinater.

Hvis siden f.eks. ruller, når elementet skal klikkes, kan koordinaterne blive forældede mellem trin 2 og 3, hvilket betyder, at klikket falder på det forkerte sted.

En mulig løsning på dette problem er at vente på, at animationerne sluttede, i dette tilfælde ventede jeg på, at jQuery-animationen, der ruller kroppen, stoppede:


En anden mulighed ville være at deaktivere jQuery-animationer i test helt, som denne:

Det er værd at bemærke, at deaktivering af animationerne også kan forbedre testens ydeevne.

Hvis denne rettelse ikke fungerer for dig, og du virkelig vil annullere alle animationer, skal du tjekke ud Denne fantastiske artikel sammensat af folkene på Doctolib.

Faste elementer, der stjæler dine klik

Capybara klikker kun på elementer, hvis de er synlige, så hvis du har en navbar eller en popup, der skjuler et element, kan du få en fejl som denne:

Element kan ikke klikkes på punktet (100, 200). Et andet element ville modtage klikket:... (Selen: :WebDriver:: Fejl:: ukendt fejl)

For at håndtere dette kan du luk alle popups på siden, og rul ned til elementet før du klikker på den.

En simpel metode, der implementerer denne idé, ville være:


blue arrow to the left
Imaginary Cloud logo

Konklusion

Chromes hovedløse tilstand og ChromeDriver, der følger med, er blevet stærkt vedtaget til test og automatisering, især da QtWebKit blev forældet, og med det projekter, der var baseret på det, såsom Phantom JS og capybara-webkit.

Selv vedligeholderen af Phantom JS, den engang populære hovedløse browser har udfaset sit projekt til fordel for ChromeDriver. Og thinkbot, skaberne af capybara-webkit, begynder at leg med ChromeDriver også.

Mens capybara-webkit gjorde jobbet i ganske lang tid, vil ændringen til et mere moderne alternativ (Chromes hovedløse tilstand) gøre testene mere pålidelig og stabil. Alt dette med den ekstra fordel ved at bruge den samme browsermotor som de fleste brugere, hvilket gør testhandlingerne meget mere lig, hvordan en reel brugerinteraktion ville se ud.

Glædelig test folkens!

Ready for a UX Audit? Book a free call

Fandt du denne artikel nyttig? Du kan måske også lide disse!

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Francisco Silva
Francisco Silva

Entusiast af alt, hvad Front-End angår. I et engageret kærlighed/hadforhold til CSS. Oftest ses han skrabe data til sideprojekter, han aldrig vil afslutte.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon