Share
Att noggrant testa en webbplats som du skapat är lika viktig som att utveckla den.
Låt oss säga att ditt företag har skapat en e-handelswebbplats. Om du bara testat "Köp nu" -knappen för elektronikkategorin och det fungerade kanske du tror att det fungerar för alla andra kategorier också. Vad händer om du senare upptäckte att en glitch hindrar användarna från att klicka på "Köp nu" -knappen för alla produkter under fitnesskategorin? Någonting som detta kommer definitivt att sätta in sig i intäkterna hos e-handelsföretaget. Det handlar inte bara om intäkterna; det påverkar också företagets rykte. Användare kan helt undvika att besöka din webbplats till förmån för tävlingen.
Utvecklare och företag undviker ibland att noggrant testa sin hemsida på grund av två huvudbegränsningar: tid och pengar. Även om du har kört alla möjliga test för din webbplats på en enda enhet, finns det ingen garanti för att det kommer att fungera på alla andra enheter också. Det finns många faktorer som webbläsare, operativsystem och skärmstorlek som måste beaktas. Dessutom kommer nya enheter med olika skärmstorlekar och -kapacitet att dyka upp. Testning på över tusen kombinationer av webbläsare, operativsystem och skärmstorlekar kommer också att bli en tidskrävande process. Som ett resultat testa många företag inte sina webbplatser så noggrant som de borde.
CrossBrowserTesting kan lösa båda dessa problem mycket elegant. Med den här tjänsten kan du köra automatiska test på över 1 500 riktiga skrivbord och mobila enheter utan att någonsin lämna komforten i din huvudutvecklingsbläddrare. Felsökning sker på distans, men du kan interagera med webbplatser exakt som en riktig användare skulle. Processen är inte längre så tidskrävande som den brukade vara för att du kommer att kunna köra alla dessa test parallellt.
Denna handledning hjälper dig att komma igång med CrossBrowserTesting och visar hur du kör automatiska tester på tusentals enheter parallellt. Du bör anmäla dig till en gratis provperiod för att följa resten av handledningen.
Mocka är funktionell och är en av de mest populära asynkrona JavaScript-testramarna för Node.js. Det låter dig köra flera test seriellt, vilket resulterar i korrekt rapportering och kartläggning av oskattade undantag för att korrigera testfall. Ramverket ger oss med innan, efter, beforeEach, och afterEach krokar. Du kan använda dessa krokar för att ställa in några förutsättningar för testen och städa upp miljön efter att ha testat.
Medan Mocka kan hjälpa dig att skriva test, behöver du hjälp av ett påståendebibliotek för att kontrollera om resultaten av ett test är vad du förväntar dig att de ska vara. Vi ska använda Chai i denna handledning. Påståendebiblioteket är väldigt flexibelt och låter dig välja ett gränssnitt efter eget val för att testa resultaten. Det är upp till dig att använda skall(), förvänta(), eller hävda() stil påståenden.
Mocha och Chai kan användas för att köra alla typer av test och kontrollera de resulterande värdena. Om du behöver utföra test som att kontrollera om en array innehåller ett specifikt element, kommer dessa två verktyg att vara tillräckliga. Men vi är intresserade av att utföra mer sofistikerade tester som att kontrollera om ett inloggningsförsök lyckades eller om användarna kan uppdatera sina användarnamn etc. Det kräver att vi installerar Selenium WebDriver. Med Selen WebDriver kan vi automatisera många saker, från att klicka på länkar och knappar för att fylla i ett formulär.
När du har en grundläggande förståelse för dessa verktyg är den svåra delen över. Att skriva automatiska test för CrossBrowserTesting är enkelt. Jag antar att du redan har Node.js installerat.
Flytta till din projektkatalog och kör följande kommandon:
npm installera mocha --save-dev npm installera chai --save-dev npm installera selenium-webdriver --save-dev
När alla paket har installerats, skapa en mapp som heter testa inuti din projektmapp. Den här mappen innehåller alla våra testfiler. För nu, skapa en fil med namnet github.js inuti testmappen. Skriv följande kod inuti github.js.
Accentsconagua
var webdriver = kräver ("selen-webdriver"); var hävdar = kräver ("chai"). var remoteHub = 'http://hub.crossbrowsertesting.com:80/wd/hub'; var användarnamn = '[email protected]'; var authkey = 'yourAuthKey'; var caps = namn: 'GitHub Search', bygga: '1.0.0', browserName: 'MicrosoftEdge', version: '15', plattform: 'Windows 10', screen_resolution: '1366x768', record_video: 'true' record_network: 'true', användarnamn: användarnamn, lösenord: authkey; beskriva ("Söka GitHub för mocka", funktion () this.timeout (5 * 1000 * 60); var driver = ny webdriver.Builder () .usingServer (remoteHub) .withCapabilities (caps) .build (); före funktionen setupwebdriver (done) driver.get ("https://github.com/search/advanced") .then (done)); det ("Mochajs ska vara det bästa resultatet", funktionen (done) var inputField = driver.findElement (webdriver.By.css ("sök-form-fluid .search-page-input")); inputField.click () .then (funktion () inputField.sendKeys ("Mocha"); ); driver.findElement (webdriver.By.css ("# search_form button")). Klicka () .then (funktion () return driver.wait (webdriver.until.elementLocated (webdriver.By.css (". repo -list h3 a "), 10000)) .then (funktion (element) return element.getText ();) .then (funktion (text) assert.deepEqual (text," mochajs / mocha "); ), det här (gjort);); det ("Ska visa en registreringsprompt efter att ha laddat arkivsidan", funktionen (done) driver.findElement (webdriver.By.css (". repo-list h3 a" )). klicka () .then (funktion ( ) return driver.wait (webdriver.until.elementLocated (webdriver.By.css ("signup prompt h3.pt-2")), 10000)) .then (funktion (element) return element.getText ); ) .then (funktion (text) assert.deepEqual (text, "Gå med GitHub idag");); driver.findElement (webdriver.By.css (". signup-prompt form button")). klicka () .then (gjort); ); efter (funktion quitWebdriver (done) driver.quit () .then (done);); );I ovanstående kod ska du ersätta [email protected] med den e-postadress som du brukade anmäla dig till din kostnadsfria provperiod. På samma sätt måste du få din egen behörighetsnyckel från kontosidan. Kopiera den nyckeln och klistra in den istället för yourAuthKey.
De caps objekt används för att ange olika konfigurationsalternativ för att köra testet. Du kan ge ditt test a namn och a bygga nummer för att identifiera det. De browserName egendom används för att ange namnet på webbläsaren där du vill köra testen. Du kan också ange a version för webbläsaren, men det är valfritt. När inget anges anges den senaste webbläsarversionen.
Du kan läsa om alla egenskaper och deras giltiga värden i artikeln titeln Selenium automation kapacitet. Du borde läsa den här sidan noggrant för att dra full nytta av alla Selena-automatiserade testfunktioner. För din användarvänlighet, erbjuder CrossBrowserTesting också en kapacitetskonfigurator på automationshemsidan.
Efter att ha ställt in lämpliga värden för våra testparametrar kan vi skriva de test som vi vill köra. Varje uppsättning test som du vill köra är bifogad i a beskriva blockera. Inuti beskriva block, har vi satt en timeout för olika test och skapat ett webdriverobjekt som kommer att nås av varje test i blocket.
I nästa steg har vi använt innan krok för att komma åt GitHubs söksida innan du kör testen inuti Det block. Koden inuti innan kommer endast att köras en gång, vilket är vad jag vill göra i mitt fall. Om du vill söka efter en ny term efter varje framgångsrikt test måste du dock gå tillbaka till söksidan om och om igen. I sådana situationer använder du en beforeEach krok är mer meningsfullt. Du kan använda den här kroken för att återställa alla data som kakor som du inte vill fortsätta mellan sessionerna.
Det faktiska testet går in i Det block. I det första testet identifierar vi inmatningsfältet med en CSS-väljare och ställer sedan in sitt värde på "Mocha". Därefter klickar vi på sökknappen och väntar tills föraren kan hitta en länk som identifierats av väljaren .repo-lista h3 a. Vi kontrollerar texten inom det här elementet för att se om det matchar mochajs / mocka. Testet inuti den andra Det blocket fortsätter från det första testet och klickar på länken för att besöka GitHub-förvaret.
Koden inuti efter blocket körs efter att vi har kört testen inuti allt Det block. Se till att du ringer driver.quit () inuti det efterblock, annars kommer sessionen att vara öppen under 10 minuter som standard.
Du kanske vill ta ögonblicksbilder på olika stadier under dina test för att dela resultaten med andra. Detta kan göras genom att anropa API. Mer information om detta ämne finns i CrossBrowserTesting-inlägget om att köra automatiska webbläsartest med Selen och JavaScript.
När du har skapat ovanstående testfil kan du köra testen på enheten och webbläsaren efter eget val genom att ange följande kommando i konsolen från insidan av projektkatalogen:
mocka test / github.js
Om allt fungerade som förväntat kommer du att kunna se testresultaten i ditt CrossBrowserTesting-konto här. Jag har laddat ner videon som skapades efter att jag körde testet med mitt konto. Du borde se något liknande också.
Det bra med CrossBrowserTesting är att du enkelt kan integrera det med dina favoritverktyg för att hjälpa dig skriva test snabbt och använda ramar som ditt team redan är bekant med.
I det här avsnittet kommer vi att skriva några tester med WebdriverIO. I grund och botten skickar det bara förfrågningar till en selservern och hanterar svaret. Ramverket låter dig skriva asynkrona kommandon synkront så att du inte behöver oroa sig för löften och racingförhållandena. Du kan läsa API-dokumenten för att få mer information om ramverket.
Låt oss börja skriva våra test nu. Den här gången försöker vi logga in på ett konto som jag har skapat på Pixabay. Vi kommer medvetet att ge felaktiga uppgifter för första gången för att testa om webbplatsen låter oss in. Nästa gång använder vi rätt uppgifter och kontrollerar att vi är inloggade.
Innan du fortsätter måste du installera WebdriverIO genom att köra följande kommando:
npm installera webdriverio - save-dev
Skapa nu en fil inuti testa mapp och namnge den pixabay.js. Filen ska innehålla följande kod:
var webdriverio = kräver ('webdriverio'); var hävdar = kräver ("chai"). var användarnamn = '[email protected]'; var authkey = 'yourAuthKey'; var devices = [browserName: 'Chrome', plattform: 'Windows 10',, browserName: 'Firefox', plattform: 'Windows 7',, browserName: 'Internet Explorer', plattform: 'Windows 7 64 -Bit ',, browserName:' Safari ', plattform:' Mac OSX 10.9 ',]; devices.forEach (funktion (enhet) var options = desiredCapabilities: namn: "Pixabay Inloggningstest (flera enheter)", bygg: "1.0", plattform: device.platform, browserName: device.browserName, screen_resolution: ' 1366x768 ', record_video:' true ', record_network:' true ', värd: "hub.crossbrowsertesting.com", port: 80, användarnamn: användarnamn, nyckel: authkey describe (' Logga in i Pixabay ' this.timeout (5 * 60 * 1000); var klient; före (funktion () klient = webdriverio.remote (alternativ); returnera client.init ();); den ("Felaktiga uppgifter bör förhindra inloggning" funktion () return client .url ('https://pixabay.com/en/accounts/login/') .setValue ('# id_username', 'pixa_username') .setValue ('# id_password', 'wrong_pixa_password') .click ('# sign_in_out input.pure-button') .getText ('ul.errorlist li') .then (funktion (resultat) assert.equal (result, 'Vänligen ange ett korrekt användarnamn och lösenord. Observera att båda fälten kan vara skiftlägeskänslig. '););); det (' Skulle kunna logga in med rätt C redials ', funktion () return client .url (' https://pixabay.com/en/accounts/login/ ') .setValue (' # id_username ',' pixa_username ') .setValue (' # id_password ' correct_pixa_password ') .click (' # sign_in_out input.pure-button ') .getText (' # my_images a.pure-button ') .then (funktion (resultat) assert.equal (result,' Ladda upp bilder '); ); ); efter (funktion () return client.end ();); ); );Efter att ha kört koden i föregående avsnitt ska detta se väldigt bekant ut. Precis som i föregående exempel, ersätt [email protected] och yourAuthKey med din CrossBrowserTesting-e-postadress och autentiseringsnyckel.
För att testa inloggningssidan kan du antingen skapa ditt eget Pixabay-konto eller försöka logga in på några andra webbplatser. Tänk bara på att du borde kunna välja rätt inmatningsfält och knappar med olika valörer.
En viktig skillnad den här gången är att vi har skapat en rad konfigurationsobjekt, och vi kan slingra över var och en för att köra samma test på flera enheter. Detta kan spara dig och ditt team mycket tid. Allt du behöver göra är att skriva testen en gång och köra dem på så många enheter som du vill. CrossBrowserTesting låter dig se videoinspelningar av alla dina automatiska test. På detta sätt kan du enkelt se vad som gick fel med en viss enhet och webbläsare.
Möjligheten att testa din webbplats på över 1500 olika enheter på distans är fantastisk. Du behöver inte längre oroa dig för att förlora kunder eftersom din webbplats inte fungerade som förväntat på en enhet som du glömde eller kunde inte testa. Det stora antalet enheter som tillhandahålls av CrossBrowserTesting täcker nästan alla enheter och webbläsarkombinationer som dina kunder kan använda. Inte bara det, men du blir också av med den enorma kostnaden för att behålla så många enheter.
Jag har skapat några grundläggande automationstester här för att hjälpa dig att komma igång med CrossBrowserTesting. När du väl förstår grunden kommer du att kunna köra alla typer av test, från att fylla i stora formulär för att besöka en produktsida efter en annan. Eftersom testerna är automatiska och du kan köra dem parallellt sparar du också mycket tid, vilket kan sättas i att göra din huvudprodukt ännu bättre.
Du kan anmäla dig gratis till tjänsten, så försök att lära dig om de olika funktionerna som gör det till ett bättre och mer kostnadseffektivt alternativ än tävlingen. Om sakerna tränar, kommer du eller ditt företag att sluta spara tusentals dollar och hundratals värdefulla timmar med hjälp av CrossBrowserTesting.
