Kontakt os

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å.
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.
Først og fremmest skal du installere Chromes seneste stabile version
I Linux kan du gøre det som sådan:
Dernæst skal du bruge to værktøjer til:
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.
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:
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).
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.
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:
Og så for at læse logfilerne, kan du simpelthen:
Du kan læse mere om Chromes muligheder og muligheder her.
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:
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.
Capybara klikker på elementer på følgende måde:
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.
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:
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!

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

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.
People who read this post, also found these interesting: