Share
Å teste et nettsted som du har opprettet, er like viktig som å utvikle det.
La oss si at firmaet ditt har opprettet et e-handelsnettsted. Hvis du bare testet "Kjøp nå" -knappen for elektronikkategorien, og det fungerte, tror du kanskje at det også fungerer for alle andre kategorier. Hva om du senere fant ut at en feil ikke hindrer brukerne i å klikke på "Kjøp nå" -knappen for alle produkter under trenings kategorien? Noe som dette, kommer definitivt til å sette seg i inntektene til e-handelsselskapet. Det handler heller ikke om inntektene heller; det påvirker også omdømmet til selskapet. Brukere kan helt unngå å besøke nettstedet ditt til fordel for konkurransen.
Utviklere og bedrifter unngå noen ganger å teste deres nettsted grundig på grunn av to hovedbegrensninger: tid og penger. Selv om du har kjørt alle mulige tester for nettstedet ditt på en enkelt enhet, er det ingen garanti for at den vil fungere på alle andre enheter. Det er mange faktorer som nettleser, operativsystem og skjermstørrelse som må tas i betraktning. Videre fortsetter nye enheter med forskjellige skjermstørrelser og -kapasiteter. Testing på over tusen kombinasjoner av nettlesere, operativsystemer og skjermstørrelser vil også være en tidkrevende prosess. Som et resultat, tester mange bedrifter ikke sine nettsteder så grundig som de burde.
CrossBrowserTesting kan løse begge disse problemene veldig elegant. Med denne tjenesten kan du kjøre automatiserte tester på over 1500 ekte stasjonære og mobile enheter uten å forlate komforten til din viktigste utviklingsbrowser. Feilsøking skjer eksternt, men du kan samhandle med nettsteder akkurat som en ekte bruker ville. Prosessen blir ikke lenger så tidkrevende som det pleide å være fordi du vil kunne kjøre alle disse tester i parallell.
Denne opplæringen hjelper deg med å komme i gang med CrossBrowserTesting og viser deg hvordan du kjører automatiserte tester på tusenvis av enheter i parallell. Du bør registrere deg for en gratis prøveperiode for å følge resten av opplæringen.
Mokka er funksjonell og er en av de mest populære asynkrone JavaScript-testrammene for Node.js. Den lar deg kjøre flere tester serielt, noe som resulterer i nøyaktig rapportering og kartlegging av uncaught unntak for å korrigere testtilfeller. Rammen gir oss med før, etter, beforeEach, og afterEach kroker. Du kan bruke disse krokene til å sette opp noen forutsetninger for testene og rydde opp miljøet etter at du har testet.
Mens mokka kan hjelpe deg med å skrive tester, trenger du hjelp av et påstandsbibliotek for å sjekke om resultatene av en test er hva du forventer at de skal være. Vi skal bruke Chai i denne opplæringen. Påstandsbiblioteket er veldig fleksibelt og lar deg velge et grensesnitt av ditt valg for å teste resultatene. Det er opp til deg å bruke bør(), forvente (), eller hevde () stil påstander.
Mokka og Chai kan brukes til å kjøre alle typer tester og kontrollere de resulterende verdiene. Hvis du trenger å utføre tester som å sjekke om en matrise inneholder et spesifikt element, vil disse to verktøyene være tilstrekkelig. Vi er imidlertid interessert i å utføre mer sofistikerte tester som å sjekke om et påloggingsforsøk var vellykket, eller hvis brukerne kan oppdatere brukernavnene, etc. Dette krever at vi installerer Selenium WebDriver. Med Selen WebDriver kan vi automatisere mange ting, fra å klikke på linker og knapper for å fylle ut et skjema.
Når du har en grunnleggende forståelse av disse verktøyene, er den harde delen over. Å skrive automatiserte tester for CrossBrowserTesting er enkelt. Jeg antar at du allerede har Node.js installert.
Flytt til prosjektkatalogen din og kjør følgende kommandoer:
npm installere mocha - save-dev npm installere chai - save-dev npm installere selenium-webdriver - save-dev
Når alle pakkene er installert, opprett en mappe som heter test inne i prosjektmappen din. Denne mappen inneholder alle våre testfiler. For nå, opprett en fil som heter github.js inne i testmappen. Skriv følgende kode innvendig github.js.
Accentsconagua
var webdriver = krever ('selen-webdriver'); var hevder = krever ('chai'). hevder; var remoteHub = 'http://hub.crossbrowsertesting.com:80/wd/hub'; var brukernavn = '[email protected]'; var authkey = 'yourAuthKey'; var caps = navn: 'GitHub Search', bygge: '1.0.0', browserName: 'MicrosoftEdge', versjon: '15', plattform: 'Windows 10', screen_resolution: '1366x768', record_video: 'true' record_network: 'true', brukernavn: brukernavn, passord: authkey; beskrive ("Søke GitHub for mokka", funksjon () this.timeout (5 * 1000 * 60); var driver = ny webdriver.Builder () .usingServer (remoteHub) .withCapabilities (caps) .build (); før funksjon oppsettWebdriver (ferdig) driver.get ("https://github.com/search/advanced") .then (ferdig)); den ("Mochajs skal være det beste resultatet", funksjon (ferdig) 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 button")). Klikk () .then (funksjon () return driver.wait (webdriver.until.elementLocated (webdriver.By.css (". repo -list h3 a "), 10000)) .then (funksjon (element) return element.getText ();) .then (funksjon (tekst) assert.deepEqual (text," mochajs / mocha "); ) .then (ferdig);); den ("Skal vise oppmeldingsprompt etter å ha lagt inn arkivsiden", funksjon (ferdig) driver.findElement (webdriver.By.css ("repo-list h3 a" )). Klikk () .then (funksjon ( ) return driver.wait (webdriver.until.elementLocated (webdriver.By.css ("signup-prompt h3.pt-2")), 10000)) .then (funksjon (element) return element.getText ); ) .then (funksjon (tekst) assert.deepEqual (tekst, "Bli med GitHub idag");); driver.findElement (webdriver.By.css ("signup-prompt form button")). Klikk () .then (ferdig); ); etter (funksjon quitWebdriver (ferdig) driver.quit () .then (ferdig);); );I ovennevnte kode, bør du erstatte [email protected] med e-postadressen du pleide å registrere deg for gratis prøveversjon. På samme måte må du få din egen godkjenningsnøkkel fra kontosiden. Kopier den nøkkelen og lim den inn i stedet for yourAuthKey.
De caps objekt brukes til å angi forskjellige konfigurasjonsalternativer for å kjøre testen. Du kan gi testen a Navn og a bygge nummer for å identifisere det. De browserName Egenskapen brukes til å spesifisere navnet på nettleseren der du vil kjøre testene. Du kan også spesifisere a versjon for nettleseren, men det er valgfritt. Når ingenting er angitt, brukes den nyeste nettleserversjonen.
Du kan lese om alle egenskapene og deres gyldige verdier i artikkelen med tittelen Selenautomatisering. Du bør lese siden grundig for å kunne dra full nytte av alle Selena-automatiserte testfunksjoner. For enkel bruk, gir CrossBrowserTesting også en funksjonskonfigurator på automasjonens hjemmeside.
Etter at du har satt inn passende verdier for våre testparametre, kan vi skrive testene vi vil kjøre. Hvert sett med tester du vil kjøre er vedlagt i a beskrive blokkere. Inne i beskrive blokkere, vi har satt en timeout for forskjellige tester og opprettet et webdriverobjekt som vil bli åpnet av hver test i blokken.
I neste trinn har vi brukt før Krok for å få tilgang til GitHubs søkeside før du kjører testene inne i den blokker. Koden inne før vil løpe bare en gang, noe som jeg vil gjøre i mitt tilfelle. Men hvis du vil søke etter en ny periode etter hver vellykket test, må du gå tilbake til søkesiden igjen og igjen. I slike tilfeller bruker du en beforeEach krok gir mer mening. Du kan bruke denne kroken til å tilbakestille data som kaker du ikke vil fortsette mellom øktene.
Den faktiske testen går inn i den blokker. I den første testen identifiserer vi inntastingsfeltet ved hjelp av en CSS-velger og setter deretter verdien til "Mocha". Deretter klikker vi på søkeknappen og venter til føreren kan finne en kobling identifisert av väljeren .repo-liste h3 a. Vi sjekker teksten i det elementet for å se om det samsvarer mochajs / mocha. Testen inne i den andre den blokken fortsetter fra den første testen og klikk på koblingen for å besøke GitHub-depotet.
Koden inne i etter blokkering er utført etter at vi har testet tester inni alle den blokker. Pass på at du ringer driver.quit () inne i etterblokken, ellers vil økten forbli åpen i 10 minutter som standard.
Du vil kanskje ta stillbilder på ulike stadier i løpet av testene dine for å dele resultatene med andre. Dette kan gjøres ved å påkalle API. Mer informasjon relatert til dette emnet finnes i CrossBrowserTesting-innlegget om å kjøre automatiserte nettlesertester med Selen og JavaScript.
Etter å ha opprettet testfilen ovenfor, kan du kjøre testene på enheten og nettleseren etter eget valg ved å skrive inn følgende kommando i konsollen fra prosjektkatalogen:
mocha test / github.js
Hvis alt virket som forventet, vil du kunne se testresultatene i din CrossBrowserTesting-konto her. Jeg har lastet ned videoen som ble opprettet etter at jeg kjørte denne testen med kontoen min. Du bør se noe lignende også.
Det gode med CrossBrowserTesting er at du enkelt kan integrere det med favorittverktøyene dine for å hjelpe deg med å skrive tester raskt og bruke rammer som teamet ditt allerede er kjent med.
I denne delen skriver vi noen tester ved hjelp av WebdriverIO. I utgangspunktet sender den bare forespørsler til en Seleneserver og håndterer svaret. Rammeverket lar deg skrive asynkrone kommandoer synkront slik at du ikke trenger å bekymre deg for løfter og racingforhold. Du kan lese API-dokumentene for å få mer informasjon om rammen.
La oss begynne å skrive testene våre nå. Denne gangen vil vi prøve å logge inn på en konto som jeg har opprettet på Pixabay. Vi vil bevisst gi feil legitimasjon for første gang for å teste om nettstedet lar oss inn. Neste gang bruker vi de riktige legitimasjonene og bekrefter at vi har blitt logget inn.
Før du fortsetter, må du installere WebdriverIO ved å kjøre følgende kommando:
npm installere webdriverio - save-dev
Lag nå en fil inne i test mappe og navn den pixabay.js. Filen skal inneholde følgende kode:
var webdriverio = krever ('webdriverio'); var hevder = krever ('chai'). hevder; var brukernavn = '[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 (funksjon (enhet) var options = desiredCapabilities: navn: 'Pixabay Log In Test (flere enheter)', bygge: '1.0', plattform: device.platform, browserName: device.browserName, screen_resolution: ' 1366x768 ', record_video:' true ', record_network:' true ', vert: "hub.crossbrowsertesting.com", port: 80, bruker: brukernavn, nøkkel: authkey beskriv (' Logg inn i Pixabay ' this.timeout (5 * 60 * 1000); var klient; før (funksjon () klient = webdriverio.remote (alternativer); returner client.init ();); den ('Forskjellige legitimasjon skal forhindre logg inn' funksjon () returklient .url ('https://pixabay.com/no/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 (funksjon (resultat) assert.equal (result, 'Vennligst skriv inn riktig brukernavn og passord. kan være saksensitiv. '););); det (' Skal kunne logge inn med høyre C redials ', funksjon () retur klient .url (' https://pixabay.com/no/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 (funksjon (resultat) assert.equal (resultat,' Last opp bilder '); ); ); etter (funksjon () return client.end ();); ); );Etter å ha kjørt koden i forrige seksjon, bør dette se veldig kjent ut. Akkurat som i forrige eksempel, erstatt [email protected] og yourAuthKey med din CrossBrowserTesting-e-postadresse og autentiseringsnøkkel.
For å teste innloggingssiden kan du enten opprette din egen Pixabay-konto eller prøve å logge inn på noen andre nettsteder. Bare vær oppmerksom på at du skal kunne velge de riktige feltene og knappene ved hjelp av forskjellige velgere.
En viktig forskjell denne gangen er at vi har opprettet en rekke konfigurasjonsobjekter, og vi kan løse over hver av dem for å kjøre de samme testene på flere enheter. Dette kan spare deg og laget ditt mye tid. Alt du trenger å gjøre er å skrive testene en gang og deretter kjøre dem på så mange enheter som du vil. CrossBrowserTesting lar deg se videoopptak av alle dine automatiske tester. På denne måten kan du enkelt se hva som gikk galt med en bestemt enhet og nettleser.
Evnen til å teste ditt nettsted på over 1500 forskjellige enheter eksternt er fantastisk. Du trenger ikke lenger å bekymre deg for å miste kunder fordi nettstedet ditt ikke fungerte som forventet på en enhet som du glemte eller ikke kunne teste. Det store antallet enheter som tilbys av CrossBrowserTesting, dekker nesten alle enheter og nettleserkombinasjoner som kundene dine kan bruke. Ikke bare det, men du blir også kvitt den enorme kostnaden for å opprettholde så mange enheter.
Jeg har laget noen grunnleggende automatiseringstester her for å hjelpe deg med å komme i gang med CrossBrowserTesting. Når du har en god forståelse av grunnleggende, vil du kunne kjøre alle typer tester, fra å fylle ut store skjemaer for å besøke en produktside etter hverandre. Siden testene er automatiserte og du kan kjøre dem parallelt, sparer du også mye tid, noe som kan legges til for å gjøre ditt hovedprodukt enda bedre.
Du kan registrere deg for tjenesten gratis, så prøv det og lær om de forskjellige funksjonene som gjør det til et bedre og mer kostnadseffektivt alternativ enn konkurransen. Hvis ting trer ut, vil du eller din bedrift ende med å spare tusenvis av dollar og hundrevis av verdifulle timer ved hjelp av CrossBrowserTesting.
