Web Driver IO Tutorial Een live website en werkvoorbeelden gebruiken: 8 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:18

Web Driver IO Tutorial Een live website en werkvoorbeelden gebruiken

Laatste update: 26-07-2015

(Kom vaak terug als ik deze instructables update met meer details en voorbeelden)

Achtergrond

Onlangs kreeg ik een interessante uitdaging voorgeschoteld. Ik moest geautomatiseerd testen introduceren bij een Q/A-afdeling met heel weinig technische ervaring en geen programmeerachtergrond.

Dit waren echt twee (2) afzonderlijke uitdagingen. De eerste was om de technologieën te identificeren om de geautomatiseerde tests uit te voeren. De tweede was om de Q/A-afdeling te trainen.

Het artikel gaat alleen in op de gebruikte technologieën en wat ik tijdens het proces heb geleerd.

De technologieën werkten goed, maar ik moest echt naar informatie zoeken en bracht vele uren door met het uitzoeken van problemen.

Ik vond het moeilijk om informatie op internet te vinden over deze technologieën die allemaal samenwerken.

Ik wilde deze informatie delen, dus schreef ik dit artikel samen met werkende voorbeeldtestscripts en een testwebsite om de scripts tegen uit te voeren.

Alle testscripts zijn te vinden op github en de werkende testsite bevindt zich op de Web Driver IO Tutorial Test Site

Ik hoop dat je het nuttig vindt. Als je dat doet, laat het me dan weten.

DoelstellingenGebruik technologieën om:

• Websitefunctionaliteit testen
• JavaScript-functionaliteit testen
• Kan handmatig worden uitgevoerd
• Kan automatisch worden uitgevoerd

• Makkelijk te leren taal voor niet-programmeurs

  Q/A-personeel met basiskennis van HTML en JavaScript

• Gebruik alleen open source-software

Technologieën

Lijst met technologieën die ik kies:

• mokka – testrunner - voert de testscripts uit
• Shouldjs – bewering bibliotheek
• webdriverio - browserbesturingsbindingen (taalbindingen)
• selenium – browserabstractie en draaiende fabriek

• Browser/mobiele stuurprogramma's + browsers

  • Firefox (alleen browser)
  • Chrome (browser en stuurprogramma)
  • IE (browser en stuurprogramma)
  • Safari (invoegtoepassing voor browser en stuurprogramma)

Stap 1: Software-installatie

Om te beginnen moet je Node JS, Web Driver IO, Mocha, Should en Selenium stand alone server geïnstalleerd hebben.

Hier zijn installatie-instructies voor Windows 7.

(Ik ben een Mac/Linux-gebruiker, maar ik moest alles op Windows 7-machines installeren, daarom heb ik het ter referentie bijgevoegd. De procedure voor het installeren op een Mac/Linux is vergelijkbaar. Raadpleeg de online referenties voor meer informatie informatie.)

Vanuit een browser:

• Installeer Node inclusief NPM (Node Package Manager)

• ga naar

  • Klik op installeren
  • Bestand opslaan en uitvoeren
  • Stel het pad en de variabele in (NODE_PATH)

  • Ga naar Configuratiescherm->Systeem en beveiliging->Systeem

    • Geavanceerde systeeminstellingen

    • Omgevingsinstelling (Gebruikersvariabelen)

      • Toevoegen aan PATH

        C:\Users\{USERNAME}\AppData\Roaming\npm;

      • Voeg de NODE_PATH toe (systeemvariabelen)

        C:\Users\{USERNAME}\AppData\Roaming\npm\node_modules

Opmerking: ik heb alle onderstaande software geïnstalleerd met de npm global-optie (-g). Dit wordt normaal gesproken niet aanbevolen, maar voor deze installatie moest ik het wereldwijd installeren omdat het voor meerdere projecten zou worden gebruikt.

Opdrachtprompt openen (cmd):

(lokale gebruikersbeheerder)

• Installeer selenium "web driver IO"

  • npm installeer webdriverio -g

    Hiermee wordt webstuurprogramma IO wereldwijd op uw machine geïnstalleerd

• Installeer "mokka" testrunner-software

  • npm installeer mokka -g

    Hiermee wordt mokka wereldwijd op uw machine geïnstalleerd

• Installeer de beweringbibliotheek "zou moeten"

  • npm installatie moet -g

    Dit zal "zou moeten" globaal op uw machine installeren

• Selenium stand-alone server installeren

  • Ga naar
  • Download jar-bestand en ga naar de map "selenium".

• Installeer browsers en browserstuurprogramma's om mee te testen

  • Vanaf cmd-prompt:

    • Maak de map "selenium" aan
    • C:\Gebruikers\{GEBRUIKERSNAAM}\selenium

    • Commando's:

      • cd C:\Gebruikers\{GEBRUIKERSNAAM}
      • mkdir selenium

    • Firefox

      • Installeer Firefox-browser, indien nog niet geïnstalleerd.
      • Het pad moet worden ingesteld om Firefox te starten vanaf de opdrachtprompt (cmd).

      • Configuratiescherm->Systeem en beveiliging->Systeem

        • Geavanceerde systeeminstellingen
        • Omgevingsinstellingen
        • Toevoegen (voeg puntkomma toe) aan Padvariabele
        • C:\Program Files (x86)\Mozilla Firefox
      • Geen speciaal webstuurprogramma nodig voor Firefox.

    • Chroom

      • Installeer de Chrome-browser, als deze nog niet is geïnstalleerd.
      • Het pad KAN worden ingesteld om Chrome te starten vanaf de opdrachtprompt (cmd).
      • Test eerst: chrome.exe vanaf de opdrachtprompt (cmd)
      • Als Chrome niet start:

      • Configuratiescherm->Systeem en beveiliging->Systeem

        • Geavanceerde systeeminstellingen
        • Omgevingsinstellingen
        • Toevoegen (voeg puntkomma toe) aan Padvariabele
        • C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

      • Voor Chrome is een speciale webdriver nodig.

        Ga naar chromium.org en pak het 32-bits stuurprogramma uit in de map "selenium"

    • Internet Explorer (alleen voor Windows - werkt niet op andere platforms)

      • Voor IE is een speciale webdriver nodig.

        • Ga naar
        • Download en pak het 64-bits stuurprogramma uit in de map "selenium".

Stap 2: Basistestscript

Laten we beginnen met enkele basisprincipes.

Hier is een eenvoudig mokka-script dat een website opent en de titel verifieert.

// tutorial1.js

// // Dit is een eenvoudig testscript om een website te openen en // de titel te valideren. // vereiste bibliotheken var webdriverio = required('webdriverio'), should = required('should'); // een testscriptblok of -suite description('Title Test for Web Driver IO - Tutorial Test Page Website', function() { // stel time-out in op 10 seconden this.timeout (10000); var driver = {}; // hook om vóór tests uit te voeren (functie (klaar) {// laad het stuurprogramma voor browserstuurprogramma = webdriverio.remote ({gewenste Mogelijkheden: {browsernaam: 'firefox'} }); driver.init (gereed); }); // een testspecificatie - "specificatie" it('moet de juiste pagina en titel laden', function () { // laad pagina, bel dan function() return driver.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html') // haal titel op en geef titel door aan function().getTitle().then(function (title) { // verifieer titel (titel).should.be.equal("Web Driver IO - Tutorial Test Page "); // uncomment for console debug // console.log('Current Page Title: ' + title); }); }); // een "hook" om uit te voeren na alle tests in dit blok after(function(done)) { driver.end (gedaan); }); });

waarnemingen:

• U zou eerst moeten opmerken dat het testscript is geschreven in JAVASCRIPT (eindigt op de extensie.js).

• De basisstructuur is vrijwel identiek voor alle testscripts.

  • Koptekst Opmerkingen (//)
  • Vereiste bibliotheken
  • Opties instellen (optioneel)
  • Haak: browserstuurprogramma laden
  • Testsuite (beschrijf)
  • Testspecificaties (kunnen veel specificaties in een suite zijn)
  • Haak: opruimen

• De testsuite begint met een functie beschrijven waarvoor twee parameters nodig zijn:

  • String - Beschrijving van testsuite

    • "Controleer de pagina op de juiste woordenstroom"
    • "Controleer de bewerkingen van de keuzerondjes"

  • functie - blok code om uit te voeren

    beschrijven(‘Beschrijving van testsuite', function() { });

• De testsuite bevat 1 of meer testspecificaties (specificatie)

• De specificaties beginnen met de functie waarvoor twee parameters nodig zijn:

  • String - Beschrijving van testspecificatie

    • "Moet de juiste linktekst en link-URL zijn"
    • "Moet de juiste woordenstroom bevatten (kopieerdeck)
  • functie - blok code om uit te voeren
  • it(‘Beschrijving van testspecificatie', function() { });
• Een specificatie bevat een of meer verwachtingen die de staat van de code testen

• Dit worden beweringen genoemd

  De bibliotheek "zou moeten" biedt de beweringen

• In bijna alle gevallen moet u een of meer elementen lokaliseren met behulp van een selector en vervolgens een bewerking uitvoeren op het/de element(en)

  • Voorbeelden:

    • Zoek tekst op een pagina en verifieer de tekst
    • Een formulier invullen en verzenden
    • CSS van een element verifiëren

Laten we het voorbeeld met opmerkingen eens nader bekijken

Laad de vereiste bibliotheken: webstuurprogramma IO en zou moeten.

// vereiste bibliotheken

var webdriverio = required('webdriverio'), should = required('should');

Definieer de testsuite. Deze suite heet: "Title Test for Web Driver IO - Tutorial Test Page Website"

// een testscriptblok of -suite

beschrijven('Titel Test voor Web Driver IO - Tutorial Test Pagina Website', function() { … });

Stel de time-out in op 10 seconden zodat het script geen time-out krijgt bij het laden van de pagina.

// stel time-out in op 10 seconden

deze.time-out (10000);

Hook om het browserstuurprogramma te laden voordat u de specificaties "specificaties" uitvoert. In dit voorbeeld wordt de Firefox-driver geladen.

// hook om uit te voeren voor tests

before (functie (klaar) { // laad het stuurprogramma voor browserstuurprogramma = webdriverio.remote ({gewenste Mogelijkheden: {browsernaam: 'firefox'} }); driver.init (gereed); });

Definieer de testspecificatie.

// een testspecificatie - "specificatie"

it('zou de juiste pagina en titel moeten laden', function () { … });

Laad de websitepagina

.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html')

Titel ophalen en vervolgens titel doorgeven aan functie()

.getTitle().then(functie (titel) {

… });

Controleer de titel met behulp van de moet-bevestigingsbibliotheek.

(title).should.be.equal("Web Driver IO - Tutorial Test Page");

Haak om te stoppen en het stuurprogramma op te ruimen wanneer u klaar bent.

// een "hook" om uit te voeren na alle tests in dit blok

after(functie(gedaan) { driver.end(gedaan);});

Stap 3: Voer het testscript uit

Laten we nu eens kijken wat het testscript doet wanneer het wordt uitgevoerd.

Start eerst de Selenium Stand Alone Server:

• Gebruik voor Windows de opdrachtregel (cmd):

  • java -jar
  • # java -jar selenium-server-standalone-2.46.0.jar

• Voor Mac of Linux, open terminal:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Zie screenshot hierboven

Voer vervolgens het testscript uit:

• Gebruik voor Windows de opdrachtregel (cmd):

  • mokka
  • # mokka tutorial1.js

• Voor Mac of Linux, open terminal:

  • mokka
  • $ mokka tutorial.js
• Zie screenshot hierboven

Dus wat gebeurde er?

Mocha roept het script "tutorial1.js" aan. Het stuurprogramma startte de browser (Firefox), laadde de pagina en verifieerde de titel.

Stap 4: Voorbeeldwebsite

Alle voorbeelden worden uitgevoerd tegen deze site.

De voorbeeldwebsite bevindt zich op: Web Driver IO Tutorial Test Page

Alle testscripts kunnen worden gedownload van github.

Stap 5: Specifieke voorbeelden

Alle code is beschikbaar op github: Web Driver IO Tutorial op github

• Verifieer link en linktekst in een ongeordende lijst - "linkTextURL1.js"

  • De ongeordende lijst heeft een en de link is het 4e lijstitem.
  • De URL moet "https://tlkeith.com/contact.html" zijn

// Controleer de linktekst van Contact opnemen

het('zou moeten bevatten Contact Us link text', function () { return driver.getText("//ul[@id='mylist']/li[4]/a").then(function (link) { console.log('Link gevonden: ' + link); (link).should.equal("Contact"); }); }); // Controleer de contact-URL it('zou de contact-URL moeten bevatten', function () { return driver.getAttribute("//ul[@id='mylist']/li[4]/a", "href").then(function (link) { (link).should.equal("https://tlkeith.com/contact.html"); console.log('URL gevonden: ' + link); }); });

• Auteursrechttekst verifiëren - "Copyright1.js"

  • Het copyright staat in de footer. Dit voorbeeld toont 2 verschillende manieren om de copyrighttekst te vinden:

    • door de als de elementselector
    • door xpath als elementselector te gebruiken

// Verifieer copyrighttekst met id als elementselector

it('zou copyrighttekst moeten bevatten', function () { return driver.getText("#copyright").then(function (link) { console.log('Copyright gevonden: ' + link); (link).should. equal("Tony Keith - tlkeith.com @ 2015 - Alle rechten voorbehouden."); }); }); // Verifieer Copyright-tekst met xpath als elementselector it('zou copyrighttekst moeten bevatten', function () { return driver.getText("//footer/center/p").then(function (link) { console.log('Copyright gevonden: ' + link); (link).should.equal("Tony Keith - tlkeith.com @ 2015 - Alle rechten voorbehouden."); }); });

• Formuliervelden invullen en verzenden - "formFillSubmit1.js"

  • Vul de voornaam, achternaam in en verzend, wacht dan op de resultaten.

  • Dit voorbeeld toont 3 methoden om het invoerveld voor de voornaam in te vullen:

    • door id
    • door xpath van invoer
    • door xpath van formulier->invoer
  • Laat ook zien hoe u een invoerveld kunt wissen

// Stel de voornaam met id in op: Tony

it('should set first name to Tony', function () { return driver.setValue("#fname", "Tony").getValue("#fname").then(function (e) { (e).should.be.equal("Tony"); console.log("Voornaam: " + e); }); }); // Wis de voornaam met id it('should clear first name', function () { return driver.clearElement("#fname").getValue("#fname").then(function (e) { (e).should.be.equal(""); console.log("Voornaam: " + e); }); }); // Stel de voornaam in met xpath from input to: Tony it('should set first name to Tony', function () { return driver.setValue("//input[@name='fname']", "Tony").getValue("//input[@name='fname']").then(function (e) { (e).should.be.equal("Tony"); console.log("Voornaam: " + e); }); }); // Wis de voornaam met xpath van input it('should clear first name', function () { return driver.clearElement("//input[@name='fname']").getValue("//input[@name='fname']").then(function (e) { (e).should.be.equal(""); console.log("Voornaam: " + e); }); }); // Stel de voornaam in met xpath from form to: Tony it('should set first name to Tony', function () { return driver.setValue("//form[@id='search-form']/input[1]", "Tony").getValue("//form[@id='search-form']/input[1]").then(function (e) { (e).should.be.equal("Tony"); console.log("Voornaam: " + e); }); }); // Stel de achternaam in met id om: Keith it('should set last name to Keith', function () { return driver.setValue("#lname", "Keith").getValue("#lname").then (functie (e) { (e).should.be.equal("Keith"); console.log("Achternaam: " + e); }); }); // Formulier indienen en wachten op zoekresultaten it('moet formulier indienen en wachten op resultaten', function () { return driver.submitForm("#search-form").then(function(e) { console.log(' Zoekformulier indienen'); }).waitForVisible("#search-results", 10000).then(function (e) { console.log('Search Results Found'); }); });

• Klik op de knop Tonen/verbergen en tekst verifiëren - "showHideVerify1.js"

  • De tekst staat in een show/hide-element. De knop regelt de staat.

  • Dit voorbeeld toont:

    • Klik op de knop om uit te vouwen
    • Wacht tot het element zichtbaar is (uitgevouwen)
    • Tekst verifiëren (deck kopiëren)

// klik op de knop "Meer info" en verifieer de tekst in het uitgevouwen element

it('moet op de knop meer info klikken en de tekst verifiëren', function () { return driver.click("#moreinfo").then (function () { console.log('Clicked More Info button'); }).waitForVisible ("#collapseExample", 5000).getText("//div[@id='collapseExample']/div").then (function (e) { console.log('Text: ' + e); (e).should.be.equal("Alle goede dingen gaan hier!"); }); });

• Formulierveldfouten valideren - "formFieldValidation.js"

  • Gebruik testscripts om te controleren of de juiste foutmeldingen worden geproduceerd.

  • Dit voorbeeld toont:

    Controleer de foutmeldingen en verifieer de locatie (ongeordende lijstpositie)

it('moet 5 fouten bevatten: eerste/laatste/adres/stad/staat', function () {

return driver.getText("//ul[@class='alert alert-danger']/li[1]").then(function (e) { console.log('Fout gevonden: ' + e); (e).should.be.equal('Voer voornaam in'); }).getText("//ul[@class='alert alert-danger']/li[2]").then(function (e) { console.log('Fout gevonden: ' + e); (e).should.be.equal('Voer achternaam in'); }).getText("//ul[@class='alert alert-danger ']/li[3]").then(function (e) { console.log('Fout gevonden: ' + e); (e).should.be.equal('Voer adres in'); }). getText("//ul[@class='alert alert-danger']/li[4]").then(function (e) { console.log('Fout gevonden: ' + e); (e).should.be.equal('Voer plaats in'); }).getText("//ul[@class='alert alert-danger']/li[5]").then(function (e) { console.log ('Fout gevonden: ' + e); (e).should.be.equal('Voer status in'); }); });

• Gegevens herhalen om URL-link/tekst/pagina te valideren - "LoopDataExample1.js"

  • Dit voorbeeld toont: Gebruik een array van JSON-gegevens om de link en naam op te slaan, en herhaal dan

    • Verifieer elke URL-tekst en link
    • Klik op link en laad pagina

// Linkgegevens - link en tekst

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "name": "tutorial1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js", "name": "linkTextURL1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/ master/copyright1.js", "name": "copyright1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js", "name": " formFillSubmit1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js", "name": "showHideVerify1.js"}, {"link": " https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js", "name": "dynamicBrowser.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/ blob/master/callbackPromise.js", "name": "callbackPromise.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js", "name": "debu gExample1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js", "name": "formFieldValidation.js"}, {"link": " https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js", "name": "commonLib.js"}, {"link": "https://github.com/onewithhammer/ WebDriverIOTutorial/blob/master/dataLoopExample1.js", "name": "dataLoopExample1.js"}]; … // loop door elke linkArray linkArray.forEach(function(d) { it('moet tekst/link bevatten en ga dan naar pagina - ' + d.name, function() { return driver // zorg ervoor dat je op de startpagina bent.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle().then(function (title) { // verifieer titel (titel).should.be.equal("Web Driver IO - Tutorial Test Page"); }) // zoek de URL.getAttribute('a=' + d.name, "href").then(function (link) { (link).should.equal(d.link); console.log('URL gevonden: ' + d.link); }) // ga naar de URL-pagina en controleer of deze bestaat.click('a=' + d.name).waitForVisible("#js-repo-pjax- container", 10000).then(function () { console.log('Github-pagina gevonden'); }); }); });

• Statische gegevens in een lus plaatsen om formuliervelden te vullen - "loopDataExample2.js"

  • Dit voorbeeld toont: Gebruik een array van JSON-gegevens om voor-/achternaam op te slaan

    • Loop door de gegevens om formuliervelden in te vullen en verzend vervolgens het formulier
    • Wacht op resultatenpagina
    • Verifieer voor-/achternaam op de resultatenpagina

// data array - firstName en lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ": "Jane", "achternaam": "Doe"}, {"firstName": "Don", "lastName": "Johnson"}]; … // loop door elke dataArray dataArray.forEach(function(d) { it('should fields, sumbit page', function() { return driver // zorg ervoor dat u zich op de startpagina bevindt.url('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle().then(function (titel) { // verifieer titel (titel).should.be.equal("Web Driver IO - Tutorial Test Page");}).setValue("#fname", d.firstName).getValue("#fname").then(function (e) { (e).should.be.equal(d.firstName); console.log("First Naam: " + e); }).setValue("#lname", d.lastName).getValue("#lname").then(function (e) { (e).should.be.equal(d.lastName)); console.log("Achternaam: " + e); }).submitForm("#search-form").then(function() { console.log('Submit Search Form'); }).waitForVisible("#search-results", 10000).then(function () { console.log('Result Page Found'); }).getText("//h1").then(function (link) { console.log('Tekst gevonden: ' + link); (link).should.equal("Welkom " + d.firstName + " " + d.lastName + "."); }); }); });

• Valideer CSS-eigenschappen - "cssValidation1.js"

  • Dit voorbeeld laat zien hoe u:

    • Valideer de volgende CSS-eigenschappen:

      • kleur
      • opvulling (boven, onder, rechts, links)
      • Achtergrond kleur

it('zou de juiste kleur van de fouttekst moeten bevatten', function () { return driver.getCssProperty("//ul[@class='alert alert-danger']/li[1]", "color").then(function (resultaat) { console.log('Kleur gevonden: ' + resultaat.parsed.hex + " of " + resultaat.waarde); (result.parsed.hex).should.be.equal('#a94442'); }); });

it('zou de juiste opvulling in tabelcel moeten bevatten', function () {

return driver // padding: rechtsboven linksonder.getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding-top").then(function (resultaat) { console.log('padding-top found: ' + result.value); (result.value).should.be.equal('10px'); }).getCssProperty("//table[@id= 'filelist']/thead/tr[1]/td[1]", "padding-bottom").then(function (resultaat) { console.log('padding-bottom found: ' + result.value); (result.value).should.be.equal('10px'); }).getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding- rechts").then(function (resultaat) { console.log('padding-right gevonden: ' + result.value); (result.value).should.be.equal('5px'); }).getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding-left").then(function (resultaat) { console.log('padding-left gevonden: ' + resultaat.waarde); (resultaat.waarde).should.be.equal('5px'); }); });

it('zou de juiste achtergrondkleur in de tabelkop moeten bevatten', function () {

return driver.getCssProperty("//table[@id='filelist']/thead", "background-color").then(function (result) { console.log('background color found: ' + result.parsed. hex); (resultaat.geparseerd.hex).should.be.equal('#eeeeee'); }); });

Stap 6: Tips en trucs

• Debuggen:

  • Schakel logboekregistratie in op stuurprogrammaniveau voor meer foutopsporing en om logboeken te maken.

    • Stel logLevel in op 'uitgebreid'
    • Stel logOutput in op mapnaam ('logs')

driver = webdriverio.remote(loglevel: 'uitgebreid', logOutput: 'logs', {desiredCapabilities: {browserName: 'firefox'} });

• Gebruik console.log(), debug(), getText() om te debuggen.

  • console.log() - Gebruik om informatie weer te geven om de status te bepalen.
  • debug() - Pauzeer browser/script totdat enter wordt ingedrukt op de opdrachtregel.

  • getText() - Gebruik om te controleren of u met het juiste element communiceert.

    Vooral handig met xpath-expressies

// Klik op item 3 uit de lijst

it('should click on Item 3 from list', function () { // gebruik getText() om te controleren of het xpath correct is voor het element return driver.getText("//ul[@id='mylist']/li [3]/div/div/a").then(function (link) { // use console.log() om informatie uit te voeren console.log('Link gevonden: ' + link); (link).should.equal ("Item 3"); }) // gebruik debug() om actie te stoppen om te zien wat er in de browser gebeurt.debug().click("//ul[@id='mylist']/li[3] /div/div/a").then (function () { console.log('Link geklikt'); }) // wacht tot het Google-zoekformulier verschijnt.waitForVisible("#tsf", 20000).then(function (e) { console.log('Zoekresultaten gevonden'); }); });

• Gebruik omgevingsvariabele om de browser dynamisch te wijzigen:

  • Gebruik omgevingsvariabele SELENIUM_BROWSER om een andere browser aan te roepen zonder het testscript telkens te wijzigen.
  • Vereist een kleine coderingswijziging om te ondersteunen.

Codewijzigingen:

// laad het stuurprogramma voor de browser

driver = webdriverio.remote ({gewenste Mogelijkheden: {browserName: process.env. SELENIUM_BROWSER || 'chrome'} });

Ondersteunde browsers:

• Internet Explorer - IE 8+ (alleen Windows)

  SELENIUM_BROWSER=ie mokka

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER=firefox mokka

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER=chroom mokka

• Opera 12+

  SELENIUM_BROWSER=opera mokka

• Safari

  SELENIUM_BROWSER=safari mokka

Testen:

• Gebruik voor Windows git bash shell:

  • SELENIUM_BROWSER=chroom mokka
  • $ SELENIUM_BROWSER=chrome mokka DynamicBrowser.js

• Voor Mac of Linux, open terminal:

  • SELENIUM_BROWSER=chroom mokka
  • $ SELENIUM_BROWSER=chrome mokka DynamicBrowser.js

• Responsieve testen:

  • Bepaal breekpunten op basis van project of raamwerk (bv. bootstrap).

  • Definieer omgevingsvariabelen voor elk breekpunt:

    • BUREAUBLAD - 1200 px
    • TABLET - 992 px
    • MOBIEL - 768 pixels

  • Ontwikkel een herbruikbare opdracht om de omgevingsvariabele te lezen en de browsergrootte in te stellen.

    Zie voorbeeld hieronder

  • Roep de herbruikbare opdracht in uw testscript aan.

// herbruikbare code - bibliotheek // codefragment if (bp == "DESKTOP") { obj.width = 1200; obj.hoogte = 600; obj.naam = bp; } else if(bp == "TABLET") { obj.width = 992; obj.hoogte = 600; obj.naam = bp; } else if(bp == "MOBIEL") { obj.width = 768; obj.hoogte = 400; obj.naam = bp; }

// Testscript

before(function(done) { winsize = common.getWindowSizeParams(); … driver.addCommand('setWindowSize', common.setWindowSize.bind(driver)); } // stel de venstergrootte it('should set window size', function (gereed) {// alleen de breedte is van belang driver.setWindowSize(winsize.width, winsize.height, function () {}).call(done); });

• Herbruikbare opdrachten (aangepaste opdrachten):

  • Web Driver IO is eenvoudig uitbreidbaar.
  • Ik vind het leuk om alle herbruikbare commando's in een bibliotheek te plaatsen. (misschien is dit old school, maar het werkt!)

common/commonLib.js

// verifiërenLastNameCheckError()

// // Beschrijving: // Verifieert het foutbericht voor de validatie van de achternaam // // Invoer: // nummer - index van fout (1-5) // Uitvoer: // geen // var verifiërenLastNameCheckError = function () { var idx = argumenten[0], callback = argumenten[argumenten.lengte - 1]; this.getText("//ul[@class='alert alert-danger']/li[" + idx + "]", function(err, e) { console.log('Fout gevonden: ' + e); (e).should.be.equal('Voer a.u.b. achternaam in'); }).call(callback); }; // exporteer de functie module.exports.verifyLastNameCheckError = verifieerLastNameCheckError;

Dit zijn de specifieke wijzigingen die nodig zijn om een herbruikbare functie aan te roepen:

Zie formFieldValidation.js voor een volledig werkvoorbeeld

// vereisen de herbruikbare opdracht - CommonLib

common = vereisen('./Common/CommonLib'); … // bind de opdrachten driver.addCommand('verifyFirstNameError', common.verifyFirstNameCheckError.bind(driver)); driver.addCommand('verifyLastNameError', common.verifyLastNameCheckError.bind(driver)); it('zou 2 fouten moeten bevatten: voornaam/achternaam', functie () { // bel het herbruikbare functiestuurprogramma.verifyFirstNameError(1);.verifyLastNameError(2); });

• Projectbestand/mapstructuur:

  • Hier is een typische projectstructuur:

    • "Project" - hoofdprojectmap

      • README.md - readme voor globaal project

      • "Common" - directory voor algemene functies die voor alle projecten gelden

        • common-lib.js - globale functiebibliotheek
        • README.md - readme voor globale functies

      • "Product1" - directory voor product 1

        • test-script1.js
        • test-script2.js

        • "Common" - directory voor lokale functies om te projecteren 1

          • prod1-lib.js - lokale functiebibliotheek voor project 1
          • README.md - readme voor lokale functies om te projecteren 1

      • "Product2" - directory voor product 2test-script1.jstest-script2.js

        • "Common" - directory voor lokale functies om te projecteren 2

          • prod2-lib.js - lokale functiebibliotheek voor project 2
          • README.md - readme voor lokale functies om te projecteren 2

• Breek testscripts in meerdere bestanden:

  • Hier is een voorbeeld van het gebruik van meerdere bestanden:

    • Sanity Check - basis testscript om te controleren of alles werkt
    • Statische element- en tekstvalidatie - verifieer alle elementen en tekst
    • Formulier-/paginafoutvalidatie - foutvalidatie
    • Zoekresultaten - test dynamische inhoud

• Terugbellen VS. Beloften:

  • Versie 3 van Web Driver IO ondersteunt zowel terugbellen als beloften.

    Beloften hebben de voorkeur, omdat het de foutafhandelingscode vermindert. Zie hieronder hetzelfde voorbeeld geschreven met callbacks en beloften.

Terugbellen

// Voor-/achternaam instellen/verifiëren met terugbellen

it('should set/verify first/ last name using Callbacks', function (done) { driver.setValue("#fname", "Tony", function (e) { driver.getValue("#fname", function (err, e) { (e).should.be.equal("Tony"); console.log("Voornaam: " + e); driver.setValue("#lname", "Keith", functie (e) { driver.getValue("#lname", function (err, e) { (e).should.be.equal("Keith"); console.log("Achternaam: " + e); done(); }); }); }); }); });

Beloften

// Voor-/achternaam instellen/verifiëren met Beloftes

it('should set/verify first/ last name using Promises', function () { return driver.setValue("#fname", "Tony").getValue("#fname").then(function (e) { (e).should.be.equal("Tony"); console.log("Voornaam: " + e); }).setValue("#lname", "Keith").getValue("#lname"). then(functie (e) { (e).should.be.equal("Keith"); console.log("Achternaam: " + e); }); });

Stap 7: Meer bronnen

Hier zijn enkele aanvullende bronnen ter referentie:

• Discussiegroepen (Gitter)

  • Web Driver IO-discussiegroep
  • Mokka-discussiegroep

• Andere interessante projecten

  • Supertest -
  • Chai - beweringen

Stap 8: Conclusie

Ik heb wat tijd besteed aan het onderzoeken van de technologieën die ik voor mijn project zou gebruiken. Ik ben oorspronkelijk begonnen met Selenium Web Driver, maar ben overgestapt op het gebruik van Web Driver IO. Web Driver IO leek gemakkelijker te gebruiken en veel gemakkelijker uit te breiden (tenminste de documentatie voor uitbreiding - herbruikbare commando's was beter).

Toen ik voor het eerst naar de technologieën begon te kijken, was het moeilijk om goede voorbeelden te vinden die betrekking hadden op alles wat ik probeerde te doen. Dit is de reden waarom ik deze informatie en kennis met u wilde delen.

De technologieën werkten veel beter dan ik had verwacht, maar er was een leercurve. Toen ik eenmaal begreep hoe alle componenten samenwerkten, kon ik in zeer korte tijd ingewikkelde testscripts schrijven. De moeilijkste scripts waren op JavaScript gebaseerde componenten zoals een datumkiezer en modale selectors.

Ik heb mezelf nooit als JavaScript-ontwikkelaar bestempeld en ik wilde ook niet allemaal JavaScript-expert zijn, maar het gebruik van deze technologieën heeft me zeker gemotiveerd om mijn JS-vaardigheden aan te scherpen.

Ik hoop dat dit artikel nuttig is en dat de voorbeelden duidelijk en informatief zijn.

Laat het me weten als je vragen of opmerkingen hebt.

Bedankt, Tony Keith