Skriv Bulletproof Multi-Browser Test Suites med CrossBrowserTesting
Posted: Sun Dec 15, 2024 4:20 am
Leadfeeders system består av flera applikationer, huvudsakligen skrivna i Ruby. Vi vill vara säkra på att var och en av dessa komponenter fungerar som förväntat, så vi täcker koden med enhetstester och, i fallet med Rails-applikationer, med kontrollerspecifikationer.
Men ibland kan det inte vara tillräckligt att ha en bra enhetstesttäckning och det kan fortfarande leda till den klassiska situationen "2 enhetstester, 0 integrationstester" som den i meme nedan:
Testmeme för webbläsare
För att förhindra sådana situationer, vid mer kritiska delar Köp telefonnummerlista av systemet skriver vi UI-tester som täcker hela funktionaliteten från topp till botten.
Ett av de stora problemen som vi måste hantera är att våra appar kan besökas från potentiellt vilken enhet/webbläsare som helst. Även om utvecklarna av webbläsare försöker hålla sig till standarderna beter sig var och en av webbläsarna något annorlunda.
Åh, och det finns Internet Explorer också...
Som du säkert kan föreställa dig kör vi inte manuella tester på alla webbläsare som finns på marknaden. Vad vi gjorde istället är att vi har utvecklat vår egen testverktygssats som kör en uppsättning tester på en uppsättning riktiga enheter på CrossBrowserTesting-plattformen .
I det här inlägget skulle jag vilja visa dig steg för steg hur vi integrerade alla rörliga delar för att skapa en sådan verktygslåda — Förhoppningsvis kommer du att kunna sätta upp något liknande i dina egna projekt.
Steg 2 - Använda ngroktunnlar
Bra, vi har en fungerande Capybara-inställning och en godkänd testsvit. Många människor skulle stanna här, men inte vi! Så småningom skulle vi vilja att CrossBrowserTestings webbläsare kör våra tester, så vi måste på något sätt tillåta deras datorer att komma åt LinkShortener-appen.
CrossBrowserTestings hjälpdokument föreslår att du använder SmartBear SecureTunnel CLI som skapar en HTTP-tunnel mellan deras servrar och din dator. Jag har testat att använda det och jag måste säga att det var en ganska dålig upplevelse... Många gånger misslyckades testerna på grund av anslutningsfel. Vissa CBT-enheter (mest Mac/iOS) kunde inte komma åt localhost:7654och jag var tvungen att komma åt programmet genom att ringa local:7654. Lyckligtvis har vi inte fastnat för CLI som föreslagits av crossbrowsertesting.com, eftersom ngrok kommer till undsättning!
Om du ännu inte känner till ngrok - det är ett verktyg som gör det möjligt att ställa in en HTTP(s)-tunnel till önskad port på din dator. När du har kört det får du HTTP- och HTTPS-URL:er som dirigerar trafik från Internet till din lokala värd.
Prova själv genom att springa $ ngrok HTTP 7654. Som du kan se skapar den två webbadresser som pekar på localhost:7654. Var inte rädd för vår "Pro"-plan - funktionerna som vi behöver i den här handledningen är också tillgängliga i den kostnadsfria nivån.
Exempel på ngrok Leadfeeder-kod
Nu ska vi konfigurera RSpec för att sätta upp en sådan tunnel före varje test och berätta för Capybara att få tillgång till testsidor via webbadresserna som tillhandahålls av ngrok. Vi kommer att göra det genom att använda ngrok-tunnel - en pärla som omsluter ngroks CLI.
Lägg till gem "ngrok-tunnel" till Gemfilen och se till att du har ngrok installerat i en mapp listad i din $PATH-variabel. Annars kommer ngrok-tunnel inte att kunna komma åt ngrok binär och skapa tunnlar.
Skapa senare en ny fil: spec/ngrok_helper.rbmed följande innehåll:
end
Inkludera nu den nya filen spec_helper.rbgenom att lägga till require_relative "ngrok_helper" och run bundle exec rspec. Du bör märka att webbläsaren nu besöker webbadresser från ngrok.io-domänen istället förlocalhost:
Men ibland kan det inte vara tillräckligt att ha en bra enhetstesttäckning och det kan fortfarande leda till den klassiska situationen "2 enhetstester, 0 integrationstester" som den i meme nedan:
Testmeme för webbläsare
För att förhindra sådana situationer, vid mer kritiska delar Köp telefonnummerlista av systemet skriver vi UI-tester som täcker hela funktionaliteten från topp till botten.
Ett av de stora problemen som vi måste hantera är att våra appar kan besökas från potentiellt vilken enhet/webbläsare som helst. Även om utvecklarna av webbläsare försöker hålla sig till standarderna beter sig var och en av webbläsarna något annorlunda.
Åh, och det finns Internet Explorer också...
Som du säkert kan föreställa dig kör vi inte manuella tester på alla webbläsare som finns på marknaden. Vad vi gjorde istället är att vi har utvecklat vår egen testverktygssats som kör en uppsättning tester på en uppsättning riktiga enheter på CrossBrowserTesting-plattformen .
I det här inlägget skulle jag vilja visa dig steg för steg hur vi integrerade alla rörliga delar för att skapa en sådan verktygslåda — Förhoppningsvis kommer du att kunna sätta upp något liknande i dina egna projekt.
Steg 2 - Använda ngroktunnlar
Bra, vi har en fungerande Capybara-inställning och en godkänd testsvit. Många människor skulle stanna här, men inte vi! Så småningom skulle vi vilja att CrossBrowserTestings webbläsare kör våra tester, så vi måste på något sätt tillåta deras datorer att komma åt LinkShortener-appen.
CrossBrowserTestings hjälpdokument föreslår att du använder SmartBear SecureTunnel CLI som skapar en HTTP-tunnel mellan deras servrar och din dator. Jag har testat att använda det och jag måste säga att det var en ganska dålig upplevelse... Många gånger misslyckades testerna på grund av anslutningsfel. Vissa CBT-enheter (mest Mac/iOS) kunde inte komma åt localhost:7654och jag var tvungen att komma åt programmet genom att ringa local:7654. Lyckligtvis har vi inte fastnat för CLI som föreslagits av crossbrowsertesting.com, eftersom ngrok kommer till undsättning!
Om du ännu inte känner till ngrok - det är ett verktyg som gör det möjligt att ställa in en HTTP(s)-tunnel till önskad port på din dator. När du har kört det får du HTTP- och HTTPS-URL:er som dirigerar trafik från Internet till din lokala värd.
Prova själv genom att springa $ ngrok HTTP 7654. Som du kan se skapar den två webbadresser som pekar på localhost:7654. Var inte rädd för vår "Pro"-plan - funktionerna som vi behöver i den här handledningen är också tillgängliga i den kostnadsfria nivån.
Exempel på ngrok Leadfeeder-kod
Nu ska vi konfigurera RSpec för att sätta upp en sådan tunnel före varje test och berätta för Capybara att få tillgång till testsidor via webbadresserna som tillhandahålls av ngrok. Vi kommer att göra det genom att använda ngrok-tunnel - en pärla som omsluter ngroks CLI.
Lägg till gem "ngrok-tunnel" till Gemfilen och se till att du har ngrok installerat i en mapp listad i din $PATH-variabel. Annars kommer ngrok-tunnel inte att kunna komma åt ngrok binär och skapa tunnlar.
Skapa senare en ny fil: spec/ngrok_helper.rbmed följande innehåll:
end
Inkludera nu den nya filen spec_helper.rbgenom att lägga till require_relative "ngrok_helper" och run bundle exec rspec. Du bör märka att webbläsaren nu besöker webbadresser från ngrok.io-domänen istället förlocalhost: