Share
Het grondig testen van een website die u hebt gemaakt, is net zo belangrijk als het ontwikkelen ervan.
Stel dat uw bedrijf een e-commerce website heeft gemaakt. Als je zojuist de knop 'Nu kopen' voor de categorie elektronica hebt getest en het werkte, zou je denken dat deze ook voor alle andere categorieën werkt. Wat als u later ontdekt dat een glitch de gebruikers verhindert om op de knop "Nu kopen" te klikken voor alle producten onder de fitnesscategorie? Zoiets zal zeker een deuk in de inkomsten van het e-commerce bedrijf betekenen. Het gaat niet alleen om de inkomsten; het beïnvloedt ook de reputatie van het bedrijf. Gebruikers kunnen volledig vermijden om uw website te bezoeken ten gunste van de concurrentie.
Ontwikkelaars en bedrijven vermijden soms om hun website grondig te testen vanwege twee belangrijke beperkingen: tijd en geld. Zelfs als u alle mogelijke tests voor uw website op één apparaat hebt uitgevoerd, is er geen garantie dat deze ook op elk ander apparaat zal werken. Er zijn veel factoren zoals browser, besturingssysteem en schermgrootte waarmee rekening moet worden gehouden. Bovendien blijven er nieuwe apparaten met verschillende schermformaten en -mogelijkheden opduiken. Testen op meer dan duizend combinaties van browsers, besturingssystemen en schermformaten zal ook een tijdrovend proces worden. Als gevolg hiervan testen veel bedrijven hun websites niet zo grondig als zou moeten.
CrossBrowserTesting kan deze beide problemen zeer elegant oplossen. Met deze service kunt u geautomatiseerde tests uitvoeren op meer dan 1500 echte desktop- en mobiele apparaten zonder het comfort van uw hoofdontwikkelingsbrowser te verlaten. Het debuggen gebeurt op afstand, maar u kunt met websites communiceren zoals een echte gebruiker dat zou doen. Het proces zal niet langer zo tijdrovend zijn als vroeger, want u kunt al deze tests parallel uitvoeren.
Deze zelfstudie helpt u aan de slag te gaan met CrossBrowserTesting en laat u zien hoe u geautomatiseerde tests op duizenden apparaten tegelijkertijd kunt uitvoeren. U moet zich aanmelden voor een gratis proefperiode om de rest van de zelfstudie te volgen.
Mocha is rijk aan functies en is een van de meest populaire asynchrone JavaScript-testkaders voor Node.js. Hiermee kunt u meerdere tests serieel uitvoeren, wat resulteert in nauwkeurige rapportage en toewijzing van niet-afgevangen uitzonderingen om testcases te corrigeren. Het raamwerk biedt ons voor, na, beforeEach, en na elke haken. U kunt deze haken gebruiken om een aantal voorwaarden voor de tests in te stellen en de omgeving op te ruimen na het uitvoeren van een test.
Hoewel Mocha u kan helpen bij het schrijven van tests, heeft u de hulp van een assertiebibliotheek nodig om te controleren of de resultaten van een test zijn wat u van hen verwacht. We gaan Chai gebruiken in deze tutorial. De assertiebibliotheek is zeer flexibel en stelt u in staat om een interface van uw keuze te kiezen voor het testen van de resultaten. Het is aan jou om te gebruiken moet (), verwachten(), of gelden () stijl beweringen.
Mocha en Chai kunnen worden gebruikt om allerlei soorten tests uit te voeren en de resulterende waarden te controleren. Als u tests moet uitvoeren, zoals controleren of een array een specifiek element bevat, zijn deze twee hulpprogramma's voldoende. We zijn echter geïnteresseerd in het uitvoeren van geavanceerdere tests, zoals het controleren of een inlogpoging succesvol was of dat de gebruikers hun gebruikersnamen kunnen bijwerken, enz. Dit vereist dat we Selenium WebDriver installeren. Met Selenium WebDriver kunnen we veel dingen automatiseren, van klikken op links en knoppen tot het invullen van een formulier.
Als je eenmaal een basiskennis hebt van deze tools, is het moeilijke deel voorbij. Het schrijven van geautomatiseerde tests voor CrossBrowserTesting is eenvoudig. Ik ga ervan uit dat je Node.js al hebt geïnstalleerd.
Ga naar uw projectdirectory en voer de volgende opdrachten uit:
npm install moucha --save-dev npm install chai --save-dev npm install selenium-webdriver --save-dev
Nadat alle pakketten zijn geïnstalleerd, maakt u een map met de naam test in je projectmap. Deze map bevat al onze testbestanden. Maak voor nu een bestand met de naam github.js in de testmap. Schrijf de volgende code naar binnen github.js.
Accentsconagua
var webdriver = require ('selenium-webdriver'); var assert = require ('chai'). var remoteHub = 'http://hub.crossbrowsertesting.com:80/wd/hub'; var gebruikersnaam = '[email protected]'; var authkey = 'yourAuthKey'; var caps = name: 'GitHub Search', build: '1.0.0', browserName: 'MicrosoftEdge', versie: '15', platform: 'Windows 10', screen_resolution: '1366x768', record_video: 'true', record_network: 'true', gebruikersnaam: gebruikersnaam, wachtwoord: authkey; beschrijven ("Zoeken naar GitHub voor Mocha", function () this.timeout (5 * 1000 * 60); var driver = nieuwe webdriver.Builder () .usingServer (remoteHub) .withCapabilities (caps) .build (); before ( functie setupWebdriver (gereed) driver.get ("https://github.com/search/advanced") .then (done)); it ("Mochajs moet het topresultaat zijn", functie (gereed) var inputField = driver.findElement (webdriver.By.css (". search-form-fluid .search-page-input")); inputField.click () .then (function () inputField.sendKeys ("Mocha"); ); driver.findElement (webdriver.By.css ("# search_form knop")). klik () .then (function () return driver.wait (webdriver.until.elementLocated (webdriver.By.css (". repo -list h3 a ")), 10000)) .then (functie (element) return element.getText ();) .then (function (text) assert.deepEqual (text," mochajs / mocha "); ) .then (done);); it ("Zou een aanmeldingsprompt moeten tonen na het laden van de repositorypagina", function (done) driver.findElement (webdriver.By.css (". repo-list h3 a" )). klik () .then (functie ( ) return driver.wait (webdriver.until.elementLocated (webdriver.By.css (". signup-prompt h3.pt-2")), 10000)) .then (function (element) return element.getText ( ); ) .then (function (text) assert.deepEqual (text, "Join GitHub today");); driver.findElement (webdriver.By.css (". signup-prompt formulierknop")). klik () .then (voltooid); ); after (function quitWebdriver (done) driver.quit () .then (done);); );In de bovenstaande code moet je vervangen [email protected] met het e-mailadres dat u gebruikte om u aan te melden voor uw gratis proefperiode. Op dezelfde manier moet u uw eigen autorisatiesleutel ontvangen van de accountpagina. Kopieer die sleutel en plak deze in plaats van yourAuthKey.
De caps object wordt gebruikt om verschillende configuratie-opties op te geven om de test uit te voeren. U kunt uw test geven naam en een bouwen nummer om het te identificeren. De browserName property wordt gebruikt om de naam op te geven van de browser waarin u de tests wilt uitvoeren. U kunt ook een opgeven versie voor de browser, maar het is optioneel. Wanneer niets is opgegeven, wordt de nieuwste browserversie gebruikt.
U kunt over alle eigenschappen en hun geldige waarden lezen in het artikel Selenium automatiseringsmogelijkheden. U moet deze pagina grondig lezen om ten volle te kunnen profiteren van alle geautomatiseerde testfuncties van Selenium. Voor uw gebruiksgemak biedt CrossBrowserTesting ook een mogelijkhedenconfigurator op de startpagina van de automatisering.
Na het instellen van de juiste waarden voor onze testparameters, kunnen we de tests schrijven die we willen uitvoeren. Elke set tests die u wilt uitvoeren, is ingesloten in a beschrijven blok. Binnen in de beschrijven blokkeren, hebben we een time-out ingesteld voor verschillende tests en een webdriver-object gemaakt dat toegankelijk is voor elke test in het blok.
In de volgende stap hebben we de voor hook om toegang te krijgen tot de GitHub-zoekpagina voordat de tests in de het blokken. De code erin voor wordt maar een keer uitgevoerd, wat ik in mijn geval wil doen. Als u echter na elke succesvolle test naar een nieuwe term wilt zoeken, moet u keer op keer teruggaan naar de zoekpagina. In dergelijke situaties, met behulp van een beforeEach haak is logischer. U kunt deze haak gebruiken om alle gegevens opnieuw in te stellen, zoals cookies die u niet tussen de sessies wilt bewaren.
De eigenlijke test gaat naar binnen het blokken. In de eerste test identificeren we het invoerveld met een CSS-selector en stellen we de waarde in op "Mocha". Daarna klikken we op de zoekknop en wachten totdat de bestuurder een koppeling kan vinden die door de selector is geïdentificeerd .repolijst h3 a. We controleren de tekst in dat element om te zien of deze overeenkomt mochajs / mokka. De test binnen de seconde het blok gaat verder vanaf de eerste test en klikt op de link om de GitHub-repository te bezoeken.
De code in de na blok wordt uitgevoerd nadat we de tests allemaal hebben uitgevoerd het blokken. Zorg dat je belt driver.quit () in het volgende blok, anders blijft de sessie standaard 10 minuten open.
Misschien wilt u momentopnamen maken in verschillende stadia tijdens uw tests om de resultaten met anderen te delen. Dit kan gedaan worden door de API aan te roepen. Meer informatie over dit onderwerp is te vinden in de post CrossBrowserTesting over het uitvoeren van geautomatiseerde browsertests met Selenium en JavaScript.
Nadat u het bovenstaande testbestand hebt gemaakt, kunt u de tests uitvoeren op het apparaat en de browser van uw keuze door de volgende opdracht in de console op te geven vanuit de projectmap:
mokka test / github.js
Als alles naar behoren werkt, kunt u de testresultaten in uw CrossBrowserTesting-account hier bekijken. Ik heb de video gedownload die werd gemaakt nadat ik deze test met mijn account had uitgevoerd. Je zou ook iets vergelijkbaars moeten zien.
Het goede aan CrossBrowserTesting is dat u het eenvoudig kunt integreren met uw favoriete hulpprogramma's, zodat u snel tests kunt schrijven en kaders kunt gebruiken waarmee uw team al vertrouwd is.
In deze sectie zullen we enkele tests schrijven met behulp van WebdriverIO. Kort gezegd, het stuurt alleen verzoeken naar een Selenium-server en behandelt de reactie. Met dit framework kunt u asynchrone opdrachten synchroon schrijven, zodat u zich geen zorgen hoeft te maken over beloftes en raceomstandigheden. U kunt de API-documenten lezen om meer informatie over het framework te krijgen.
Laten we beginnen met het schrijven van onze tests nu. Deze keer proberen we in te loggen op een account dat ik op Pixabay heb gemaakt. We zullen de eerste keer willens en wetens verkeerde inloggegevens verstrekken om te testen of de website ons binnenlaat. De volgende keer zullen we de juiste inloggegevens gebruiken en verifiëren dat we zijn ingelogd.
Voordat u doorgaat, moet u WebdriverIO installeren door de volgende opdracht uit te voeren:
npm installeer webdriverio --save-dev
Maak nu een bestand binnen de test map en noem deze pixabay.js. Het bestand zou de volgende code moeten bevatten:
var webdriverio = require ('webdriverio'); var assert = require ('chai'). var gebruikersnaam = '[email protected]'; var authkey = 'yourAuthKey'; var devices = [browserName: 'Chrome', platform: 'Windows 10',, browserName: 'Firefox', platform: 'Windows 7',, browserName: 'Internet Explorer', platform: 'Windows 7 64 -Bit ',, browserName:' Safari ', platform:' Mac OSX 10.9 ',]; devices.forEach (function (device) var options = desiredCapabilities: name: 'Pixabay Log In Test (Multiple Devices)', build: '1.0', platform: device.platform, browserName: device.browserName, screen_resolution: ' 1366x768 ', recordvideo:' true ', record_network:' true ', host: "hub.crossbrowsertesting.com", poort: 80, gebruiker: gebruikersnaam, sleutel: authkey beschrijven (' Aanmelden bij Pixabay ', function () this.timeout (5 * 60 * 1000); var client; before (function () client = webdriverio.remote (opties); return client.init ();); it ('Verkeerde legitimatiegegevens moeten inloggen voorkomen', function () return client .url ('https://pixabay.com/en/accounts/login/') .setValue ('# id_username', 'pixa_username') .setValue ('# id_password', 'wrong_pixa_password') .klik ('# sign_in_out input.pure-button') .getText ('ul.errorlist li') .then (functie (resultaat) assert.equal (resultaat, 'Vul een correcte gebruikersnaam en wachtwoord in.) Merk op dat beide velden kan hoofdlettergevoelig zijn. '););); it (' Zou moeten kunnen inloggen met Rechts C redentials ', function () return client .url (' https://pixabay.com/en/accounts/login/ ') .setValue (' # id_username ',' pixa_username ') .setValue (' # id_password ',' correct_pixa_password ') .klik (' # sign_in_out input.pure-button ') .getText (' # my_images a.pure-button ') .then (functie (resultaat) assert.equal (resultaat,' Upload afbeeldingen '); ); ); after (function () return client.end ();); ); );Na het uitvoeren van de code in het vorige gedeelte, zou dit er heel bekend uit moeten zien. Net zoals het vorige voorbeeld, vervang [email protected] en yourAuthKey met uw CrossBrowserTesting-e-mailadres en verificatiesleutel.
Om de inlogpagina te testen, kunt u uw eigen Pixabay-account maken of inloggen op een aantal andere websites. Houd er rekening mee dat u de juiste invoervelden en knoppen moet kunnen selecteren met verschillende selectors.
Een belangrijk verschil is deze keer dat we een array met configuratie-objecten hebben gemaakt, en we kunnen elk van hen doorlopen om dezelfde tests op meerdere apparaten uit te voeren. Dit kan u en uw team veel tijd besparen. Het enige dat u hoeft te doen, is de tests één keer schrijven en vervolgens op zoveel apparaten uitvoeren als u wilt. Met CrossBrowserTesting kunt u video-opnames van al uw geautomatiseerde tests bekijken. Op deze manier kunt u eenvoudig zien wat er mis ging met een bepaald apparaat en een bepaalde browser.
De mogelijkheid om uw website op meer dan 1.500 verschillende apparaten op afstand te testen, is verbluffend. U hoeft zich geen zorgen meer te maken dat u klanten verliest omdat uw website niet werkt zoals verwacht op een apparaat dat u bent vergeten of niet kunt testen. Het grote aantal apparaten dat door CrossBrowserTesting wordt aangeboden, bestrijkt bijna elk apparaat en elke browsercombinatie die uw klanten kunnen gebruiken. Niet alleen dat, maar u verliest ook de enorme kosten van het onderhoud van zoveel apparaten.
Ik heb hier enkele standaard automatiseringstests gemaakt om u te helpen aan de slag te gaan met CrossBrowserTesting. Zodra u de basisbeginselen goed kent, kunt u allerlei soorten tests uitvoeren, van het invullen van grote formulieren tot het bezoeken van de ene productpagina na de andere. Omdat de tests geautomatiseerd zijn en u ze parallel kunt uitvoeren, bespaart u ook veel tijd, wat u kunt gebruiken om uw hoofdproduct nog beter te maken.
Je kunt je gratis aanmelden voor de service, dus probeer het eens en leer over de verschillende functies waardoor het een betere en kosteneffectievere optie is dan de concurrentie. Als het goed komt, eindigt u of uw bedrijf met het besparen van duizenden dollars en honderden waardevolle uren met behulp van CrossBrowserTesting.
