Så, du har en Ruby on Rails projekt du har testat med Capybara och capybara-webkit och du måste uppgradera till Huvudlös krom.
Väl, du är på rätt plats eftersom jag här visar exakt hur du kan uppnå det. Men först, låt mig ge lite sammanhang om varför det är viktigt att göra ändringen, och varför Chrome är den perfekta kandidaten för det.
Sedan 2017 har Google Chrome levererats med en huvudlös miljö, vilket gör att vi kan emulera användarinteraktioner utan att ha ett GUI. De samarbetade också med Selen, ett webbläsarautomatiseringsverktyg för att släppa Chrome River. Det ger ett standardgränssnitt för att styra Chrome, så det fungerar bra med de flesta verktyg och språk som vill använda det.
Innan allt detta var ett alternativ, capybara-webkit, drivrutinen för QtWebKit-webbläsaren, var en bra matchning för jobbet. Men jag skulle inte säga detsamma nu. Testerna misslyckas intermittent, vilket tvingar omförsök på CI, och webbläsaren den förlitar sig på (QtWebKit) har varit föråldrad.
Med tanke på allt, med Chrome har du en modern webbläsare, en drivrutin för den och ett fälttestat verktyg för att automatisera dina tester (Selenium). Allt detta utan att behöva hantera irriterande Qt-versionsberoenden. Fantastiskt, eller hur?
Okej, nu när ni alla är igång kommer jag att gå igenom installationen av ChromeDriver och Selenium, samtidigt som jag ger en fix för några av de vanligaste problemen som kan komma upp.
Att byta kräver naturligtvis Chrome och ett par beroenden för att se till att allt är snyggt integrerat med Capybara.
Den här delen är ganska enkel, det borde inte vara mycket krångel för dig.
Först och främst måste du installera Chromes senaste stabila version
I Linux kan du göra det som sådant:
Därefter behöver du ytterligare två verktyg:
Pärlan webbdrivrutiner hjälper till med installationen av ChromeDriver, automatiskt ladda ner, installera och hålla drivrutinen uppdaterad.
Sedan bör du lägga till båda i projektet i din Gemfile, som visas nedan:
Glöm inte att buntinstallation efteråt.
Nu behöver du bara registrera drivrutinerna och konfigurera dem i spec_hjälper.rb:
Detta ställer in standarddrivrutinen till :headless_chrome. Om du vill se testerna köra, ändra det bara till :krom i de två sista raderna.
Du kanske också märker aktivera funktioner tagga i kroms alternativ, detta är en tillfällig fix på grund av en problem i Chrome 74 där cookies slumpmässigt rensas under körning, vilket kan orsaka att Chrome fryser.
Enligt Chromiums buggspårare kommer detta att åtgärdas i version v75.
Om du kör projektet i Docker, Du kan också behöva lägga till ”no-sandbox” till Chromes alternativ:
Nu när det är omhändertaget kan du gå vidare och ta bort capybara-webkit från Gemfile, liksom eventuell import eller konfiguration du kan ha kvar (leta efter Capybara: :Webkit).
För vissa projekt kan testerna redan köras smidigt efter dessa steg, men för andra kanske det inte är fallet. Med en ny webbläsare och verktyg som kör testerna kommer nya funktioner och nya problem också upp.
Capybara-WebKit hade ett par användbara men icke-standardiserade metoderoch selen stöder inte alla metoder Capybara har att erbjuda. Så detta skapar ett stort gap, och alla test som använde metoder som inte stöds måste patchas.
Ändå skulle en enkel lösning, om du utlöser ett klick, vara att skicka returtangenttryckningen till elementet:
Eller för att klicka på elementet genom javascript:
Om du har att göra med en annan typ av händelse kan du använda jQuery så här:
Och sedan för att läsa loggarna kan du helt enkelt:
Du kan läsa mer om Chromes funktioner och alternativ här.
sida.driver.header, sida.response_rubriker och sida.status_kod är inte tillgängliga.
Att fixa denna sista punkt är lite av en utmaning, men GitLabs lösning är en bra lösning. När de mötte samma problem när de porterade sin webbläsare från PhantomJS till Chrome implementerade de en mellanprogramvara för att fånga upp förfrågarnas rubriker (mer om det här).
För att implementera denna lösning inkluderade jag helt enkelt dessa filer
lib/testning:
spec/support/hjälpare:
Namnutrymmen måste ändras för att matcha ditt projekt, och pärlan ”concurrent-ruby” importeras, som det krävs i mellanvaran:
Kom ihåg att även importera filerna i spec_hjälper.rb:
Och med all den inställningen är allt du behöver göra för att få rubrikens detaljer följande:
Nu när allt är igång, låt mig dela några fler tips för att få ut det mesta av Headless Chrome & ChromeDriver och undvika några vanliga problem.
Capybara klickar på element på följande sätt:
Om sidan till exempel rullar när elementet är tänkt att klickas kan koordinaterna bli föråldrade mellan steg 2 och 3, vilket innebär att klicket hamnar på fel plats.
En möjlig lösning för detta problem är att vänta på att animationerna skulle sluta, i det här fallet väntade jag på att jQuery-animationen som rullade kroppen för att sluta:
Ett annat alternativ skulle vara att inaktivera jQuery-animationer vid testning helt och hållet, så här:
Det är värt att notera att inaktivering av animationerna också kan förbättra testens prestanda.
Om den här korrigeringen inte fungerar för dig, och du verkligen vill avbryta alla animationer, kolla in Den här fantastiska artikeln sammanställt av folket på Doctolib.
Capybara klickar bara på element om de är synliga, så om du har en navbar eller en popup som döljer ett element kan du få ett fel som detta:
Element är inte klickbart vid punkt (100, 200). Ett annat element skulle få klicket:... (Selen: :WebDriver: :Fel:: okänt fel)
För att hantera detta kan du stäng alla popup-fönster på sidan, och bläddra ner till elementet innan du klickar på den.
En enkel metod, som implementerar denna idé, skulle vara:
Chromes huvudlösa läge och ChromeDriver som följer med det har antagits starkt för testning och automatisering, särskilt sedan QtWebKit avvecklades, och med det projekt som baserades på det, till exempel PhantomJS och capybara-webkit.
Till och med underhållaren av PhantomJS, den en gång populära huvudlösa webbläsaren har avskrivit sitt projekt till förmån för ChromeDriver. Och thinkbot, skaparna av capybara-webkit, börjar leka med ChromeDriver likaså.
Medan capybara-webkit gjorde jobbet under ganska lång tid, kommer övergången till ett modernare alternativ (Chromes huvudlösa läge) att göra testerna mer pålitlig och stabil. Allt detta med den extra fördelen att använda samma webbläsarmotor som de flesta användare, vilket gör teståtgärderna mycket mer lika hur en verklig användarinteraktion skulle se ut.
Glad testning folk!
Hittade den här artikeln användbar? Du kanske gillar dessa också!
Entusiast av allt Front-End. I ett engagerat kärleks-/hatförhållande med CSS. Oftast ses skrapa data för sidoprojekt som han aldrig kommer att avsluta.
Människor som läste det här inlägget tyckte också att dessa var intressanta:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
