Web Driver IO Tutorial met behulp van een Live website en voorbeelden werken (5 / 8 stap)

Stap 5: Specifieke voorbeelden

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

• Controleer of Link en de tekst van de koppeling in een ongeordende lijst - "linkTextURL1.js"
  • De ongeordende lijst heeft een id = "mylist" en de koppeling is het 4e lijstitem.
  • De URL moet "http://tlkeith.com/contact.html"

 // Verify Contact Us link text it('should contain Contact Us link text', function () { return driver .getText("//ul[ (link) { console.log('Link found: ' + link); (link).should.equal("Contact Us"); }); }); // Verify Contact Us URL it('should contain Contact Us URL', function () { return driver .getAttribute("//ul[ "href").then(function (link) { (link).should.equal("http://tlkeith.com/contact.html"); console.log('URL found: ' + link); }); }); 

• Copyright tekst controleren - "Copyright1.js"
  • De copyright is in het footerThis-voorbeeld 2 verschillende manieren om te zoeken van de copyright tekst:
    • door de id = "copyright" als de element-selector
    • met behulp van xpath als de element-selector

 // Verify Copyright text using id as element selector it('should contain Copyright text', function () { return driver .getText("#copyright").then(function (link) { console.log('Copyright found: ' + link); (link).should.equal("Tony Keith - tlkeith.com @ 2015 - All rights reserved."); }); }); // Verify Copyright text using xpath as element selector it('should contain Copyright text', function () { return driver .getText("//footer/center/p").then(function (link) { console.log('Copyright found: ' + link); (link).should.equal("Tony Keith - tlkeith.com @ 2015 - All rights reserved."); }); }); 

• Formuliervelden vullen en verzenden - "formFillSubmit1.js"
  • Vul de voornaam, achternaam en indienen, dan wachten op resultaten.
  • In het volgende voorbeeld ziet u 3 methoden van het vullen van het invoerveld voornaam:
    • door id
    • door xpath van input
    • door xpath uit vorm -> input
  • Laat ook zien hoe duidelijk een invoerveld

 // Set the first name using id to: 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("First Name: " + e); }); }); // Clear the first name using id it('should clear first name', function () { return driver.clearElement("#fname") .getValue("#fname").then( function (e) { (e).should.be.equal(""); console.log("First Name: " + e); }); }); // Set the first name using xpath from input to: Tony it('should set first name to Tony', function () { return driver.setValue("//input[ "Tony") .getValue("//input[ function (e) { (e).should.be.equal("Tony"); console.log("First Name: " + e); }); }); // Clear the first name using xpath from input it('should clear first name', function () { return driver.clearElement("//input[ .getValue("//input[ function (e) { (e).should.be.equal(""); console.log("First Name: " + e); }); }); // Set the first name using xpath from form to: Tony it('should set first name to Tony', function () { return driver.setValue("//form[ "Tony") .getValue("//form[ function (e) { (e).should.be.equal("Tony"); console.log("First Name: " + e); }); }); // Set the last name using id to: Keith it('should set last name to Keith', function () { return driver.setValue("#lname", "Keith") .getValue("#lname").then( function (e) { (e).should.be.equal("Keith"); console.log("Last Name: " + e); }); }); // Submit form and wait for search results it('should submit form and wait for results', function () { return driver.submitForm("#search-form").then( function(e) { console.log('Submit Search Form'); }) .waitForVisible("#search-results", 10000).then(function (e) { console.log('Search Results Found'); }); }); 

• Knop weergeven/verbergen klikt u op en controleer of tekst - "showHideVerify1.js"
  • De tekst is in een element weergeven/verbergen. De knop bepaalt de staat.
  • Dit voorbeeld laat zien:
    • Klik op de knop uit te breiden
    • Wachten voor het element zichtbaar (uitgevouwen)
    • Controleer of tekst (kopie dek)

 // click "More Info" button and verify text in expanded element it('should click more info button and verify text', function () { return driver .click("#moreinfo").then (function () { console.log('Clicked More Info button'); }) .waitForVisible("#collapseExample", 5000) .getText("//div[ (function (e) { console.log('Text: ' + e); (e).should.be.equal("All things good go here!"); }); }); 

• Valideren formulier veld fouten - "formFieldValidation.js"
  • Testscripts gebruiken om te controleren of de juiste foutberichten worden geproduceerd.
  • Dit voorbeeld laat zien:
    • Controleer of de tekst van de foutberichten en controleer of de locatie (de positie van de niet-geordende lijst).

 it('should contain 5 errors: first/last/address/city/state', function () { return driver .getText("//ul[ alert-danger']/li[1]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Please enter first name'); }) .getText("//ul[ alert-danger']/li[2]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Please enter last name'); }) .getText("//ul[ alert-danger']/li[3]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Please enter address'); }) .getText("//ul[ alert-danger']/li[4]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Please enter city'); }) .getText("//ul[ alert-danger']/li[5]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Please enter state'); }); }); 

• Gegevens valideren URL Link/tekst/pagina in een lus - "LoopDataExample1.js"
  • Dit voorbeeld laat zien: gebruik een array van JSON-gegevens voor het opslaan van de link en naam, vervolgens iterate

• Controleer of elke URL-tekst en koppeling
• Klik op link en laden van de pagina

Koppelen van de data - link en de tekst var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "naam": "tutorial1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js", "naam": "linkTextURL1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/copyright1.js", "naam": "copyright1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js", "naam": "formFillSubmit1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js", "naam": "showHideVerify1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js" "naam": "dynamicBrowser.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/callbackPromise.js", "naam": "callbackPromise.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js", "naam": "debugExample1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js", "naam": "formFieldValidation.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js", "naam": "commonLib.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dataLoopExample1.js", "naam": "dataLoopExample1.js"}]; ... / / loop via elke linkArray linkArray.forEach(function(d) {het ("moet bevatten tekst/link dan goto pagina -" + d.name, function {return stuurprogramma / / zorg ervoor dat u op de beginpagina // Link data - link and text 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" : "debugExample1.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 through each linkArray linkArray.forEach(function(d) { it('should contain text/link then goto page - ' + d.name, function() { return driver // make sure you are on the starting page .url('http://www.tlkeith.com/WebDriverIOTutorialTest.html') .getTitle().then( function (title) { // verify title (title).should.be.equal("Web Driver IO - Tutorial Test Page"); }) // find the URL .getAttribute('a=' + d.name, "href").then(function (link) { (link).should.equal(d.link); console.log('URL found: ' + d.link); }) // go to URL page and verify it exists .click('a=' + d.name) .waitForVisible("#js-repo-pjax-container", 10000).then(function () { console.log('Github Page Found'); }); }); }); .getTitle () .en (functie (titel) {/ / verifiëren van de titel // data array - firstName and lastName<br>var dataArray = [ {"firstName" : "Tony", "lastName" : "Keith"}, {"firstName" : "John", "lastName" : "Doe"}, {"firstName" : "Jane", "lastName" : "Doe"}, {"firstName" : "Don", "lastName" : "Johnson"} ]; ... // loop through each dataArray <br> dataArray.forEach(function(d) { it('should populate fields, sumbit page', function() { return driver // make sure you are on the starting page .url('http://www.tlkeith.com/WebDriverIOTutorialTest.html') .getTitle().then( function (title) { // verify title (title).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 Name: " + e); }) .setValue("#lname", d.lastName) .getValue("#lname").then( function (e) { (e).should.be.equal(d.lastName); console.log("Last Name: " + 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('Text found: ' + link); (link).should.equal("Welcome " + d.firstName + " " + d.lastName + "."); }); }); }); 

• Looping statische gegevens aan formuliervelden vullen - "loopDataExample2.js"
  • Dit voorbeeld laat zien: gebruik een array van JSON gegevens op te slaan van de eerste/laatste naam
    • Doorlopen van de gegevens kunnen formuliervelden vullen vervolgens het formulier in te dienen
    • Wachten op resultatenpagina
    • Controleer of de eerste / laatste naam op de resultatenpagina

data matrix - voornaam en achternaam < br > var dataArray = [{"voornaam": "Tony", "lastName": "Keith"}, {"voornaam": 'John', 'Achternaam': "Doe"}, {"voornaam": "Jane", "lastName": "Doe"}, {"voornaam": "Don", "lastName": "Johnson"}]; ... / / loop via elke dataArray < br > dataArray.forEach(function(d) {het ('moet vullen velden, sumbit pagina', function {return stuurprogramma / / zorg ervoor dat u op de beginpagina it('should contain correct color of error text', function () {<br> return driver .getCssProperty("//ul[ alert-danger']/li[1]", "color").then(function (result) { console.log('Color found: ' + result.parsed.hex + " or " + result.value); (result.parsed.hex).should.be.equal('#a94442'); }); }); .getTitle () .en (functie (titel) {/ / verifiëren van de titel it('should contain correct padding in table cell', function () { return driver // padding: top right bottom left .getCssProperty("//table[ "padding-top").then(function (result) { console.log('padding-top found: ' + result.value); (result.value).should.be.equal('10px'); }) .getCssProperty("//table[ "padding-bottom").then(function (result) { console.log('padding-bottom found: ' + result.value); (result.value).should.be.equal('10px'); }) .getCssProperty("//table[ "padding-right").then(function (result) { console.log('padding-right found: ' + result.value); (result.value).should.be.equal('5px'); }) .getCssProperty("//table[ "padding-left").then(function (result) { console.log('padding-left found: ' + result.value); (result.value).should.be.equal('5px'); }); }); 

• Eigenschappen voor CSS valideren - "cssValidation1.js"
  • Dit voorbeeld ziet u hoe:
    • Valideren de volgende CSS-eigenschappen:
      • Kleur
      • opvulling (boven, onder, rechts, links)
      • achtergrondkleur

 it('should contain correct background color in table header', function () { return driver .getCssProperty("//table[ "background-color").then(function (result) { console.log('background color found: ' + result.parsed.hex); (result.parsed.hex).should.be.equal('#eeeeee'); }); }); 

 driver = webdriverio.remote(loglevel: 'verbose', logOutput: 'logs', {desiredCapabilities: {browserName: 'firefox'} });<br> 

 // Click on the Item 3 from list it('should click on Item 3 from list', function () { // use getText() to verify the xpath is correct for the element return driver .getText("//ul[ (link) { // use console.log() to output information console.log('Link found: ' + link); (link).should.equal("Item 3"); }) // use debug() to stop action to see what is happening on the browser .debug() .click("//ul[ (function () { console.log('Link clicked'); }) // wait for google search form to appear .waitForVisible("#tsf", 20000).then(function (e) { console.log('Search Results Found'); }); });