Site Web pilote IO tutoriel à l’aide d’un Site en ligne et exemples de travail (5 / 8 étapes)

Étape 5: Exemples concrets

Tout le code est disponible sur github : Web Driver IO tutoriel sur github

• Vérifier les lien et lien texte dans une liste non ordonnée - "linkTextURL1.js"
  • La liste non ordonnée possède un id = « maListe » et le lien est le 4e élément de liste.
  • L’URL doit être « 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); }); }); 

• Vérifier les droits d’auteur texte - "Copyright1.js"
  • Le droit d’auteur est dans le footerThis exemple montre 2 façons différentes pour repérer le texte d’auteur :
    • par l’id = « copyright » comme le sélecteur d’élément
    • en utilisant xpath comme le sélecteur d’élément

 // 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."); }); }); 

• Remplir les champs de formulaire et soumettre - "formFillSubmit1.js"
  • Renseignez le prénom, nom de famille et soumettre, puis attendre les résultats.
  • Cet exemple montre les 3 méthodes de remplir le champ de saisie de prénom :
    • par id
    • par xpath de l’entrée
    • par xpath de forme -> entrée
  • Montre également comment faire pour effacer un champ de saisie

 // 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'); }); }); 

• Cliquez sur le bouton afficher/masquer et texte vérifier - "showHideVerify1.js"
  • Le texte est dans un élément d’afficher/masquer. Le bouton de contrôle de l’État.
  • Cet exemple montre :
    • Cliquez sur le bouton pour développer
    • Attendez que l’élément soit visible (élargi)
    • Vérifier le texte (pont de copie)

 // 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!"); }); }); 

• Valider formulaire champ Erreurs - "formFieldValidation.js"
  • Scripts de test permet de vérifier les messages d’erreur correct sont produites.
  • Cet exemple montre :
    • Vérifiez les messages d’erreur texte et vérifier l’emplacement (position de la liste non ordonnée).

 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'); }); }); 

• Une boucle de données afin de valider l’URL lien/texte/Page - "LoopDataExample1.js"
  • Cet exemple montre : utilisez un tableau de données JSON pour stocker le lien et le nom, puis itérer

• Vérifier chaque texte de l’URL et le lien
• Cliquez sur le lien et charger la page

Lier des données - lien et texte var linkArray = [{« lien »: « https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js », « nom »: « tutorial1.js »}, {« lien »: « https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js », « nom »: « linkTextURL1.js »}, {« link »: « https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/copyright1.js », « nom »: « copyright1.js »}, {« lien »: « https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js », « nom »: « formFillSubmit1.js »}, {« lien »: « https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js », « nom »: « showHideVerify1.js »}, {« lien »: « https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js » "nom": "dynamicBrowser.js"}, {"lien": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/callbackPromise.js", "nom": "callbackPromise.js"}, {"lien": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js", "nom": "debugExample1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js", "nom": "formFieldValidation.js"}, {"lien": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js", "nom": "commonLib.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dataLoopExample1.js", "nom": "dataLoopExample1.js"}] ; ... / / effectuer une boucle sur chaque linkArray.forEach(function(d) linkArray {il (« doit contenir le texte/lien puis goto page - » + d.name, function() {pilote de retour / / Assurez-vous que vous êtes sur la page de démarrage // 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 () .alors (fonction (titre) {/ / vérifier le titre // 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 + "."); }); }); }); 

• Une boucle de données statiques à remplir les champs de formulaire - "loopDataExample2.js"
  • Cet exemple montre : utilisez un tableau de données JSON pour stocker le nom premier/dernier
    • Parcourir les données pour remplir les champs du formulaire, puis envoyer le formulaire
    • Attendez que la page de résultats
    • Vérifier le premier / dernier nom sur la page de résultats

Tableau de données - firstName et lastName < br > dataArray var = [{« firstName »: "Tony", "lastName": « Keith »}, {« prénom »: "John", "lastName": « Doe »}, {« prénom »: "Jane", "lastName": « Doe »}, {« firstName »: "Don", "lastName": « Johnson »}] ; ... / / effectuer une boucle sur chaque dataArray.forEach(function(d) dataArray < br > {il (« doit remplir les champs, page sumbit », function() {pilote de retour / / Assurez-vous que vous êtes sur la page de démarrage 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 () .alors (fonction (titre) {/ / vérifier le titre 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'); }); }); 

• Valider les propriétés CSS - "cssValidation1.js"
  • Cet exemple montre comment :
    • Valider les propriétés CSS suivantes :
      • Couleur
      • rembourrage (haut, bas, droite, gauche)
      • couleur d’arrière-plan

 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'); }); });