Controlador IO Tutorial usando un sitio Web de web y ejemplos de trabajo (5 / 8 paso)

Paso 5: Ejemplos concretos

Todo el código está disponible en github: Web controlador IO Tutorial en github

• Verificar el enlace y enlace de texto en una lista desordenada - "linkTextURL1.js"
  • La lista desordenada tiene un id = "mylist" y el enlace es el 4 º elemento de la lista.
  • La URL debe ser "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); }); }); 

• Verificar el texto de derechos de autor - "Copyright1.js"
  • Los derechos de autor está en el footerThis ejemplo muestra 2 formas diferentes para localizar el texto de derechos de autor:
    • por el id = "copyright" como el selector del elemento
    • mediante el uso de xpath como el selector del elemento

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

• Rellenar campos de formulario y enviar - "formFillSubmit1.js"
  • Rellene el nombre, apellidos y enviar, luego espere resultados.
  • Este ejemplo muestra 3 métodos de llenar el campo Nombre:
    • por id
    • por xpath de entrada
    • por xpath de forma -> entrada
  • También muestra cómo borrar un campo de entrada

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

• Haga clic en el botón de mostrar u ocultar y verificar el texto - "showHideVerify1.js"
  • El texto es un elemento de mostrar u ocultar. El botón controla el estado.
  • Este ejemplo se muestra:
    • Haga clic en el botón ampliar
    • Espere a que el elemento sea visible (ampliado)
    • Comprobar texto (copia cubierta)

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

• Validar formulario campo errores - "formFieldValidation.js"
  • Utilizar scripts de prueba para comprobar que se producen mensajes de error correcto.
  • Este ejemplo se muestra:
    • Verificar los mensajes de texto de error y verificar ubicación (posición de lista desordenada).

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

• Bucle de datos para validar URL página de texto de enlace - "LoopDataExample1.js"
  • Este ejemplo muestra: utilice una matriz de datos JSON para guardar el enlace y el nombre, luego iterar

• Verificar cada texto de la URL y el enlace
• Haz clic en el enlace y cargar la página

Vincular datos - link y texto var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "nombre": "tutorial1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js", "nombre": "linkTextURL1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/copyright1.js", "nombre": "copyright1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js", "nombre": "formFillSubmit1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js", "nombre": "showHideVerify1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js" "nombre": "dynamicBrowser.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/callbackPromise.js", "nombre": "callbackPromise.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js", "nombre": "debugExample1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js", "nombre": "formFieldValidation.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js", "nombre": "commonLib.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dataLoopExample1.js", "nombre": "dataLoopExample1.js"}]; ... / / bucle por cada linkArray.forEach(function(d) de linkArray {('debe contener la página de enlace de texto a continuación, goto -' + d.name, function() {controlador de retorno / / asegurarse de que estás en la página de inicio // 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 () entonces (función (título) {/ / comprobar título // 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 + "."); }); }); }); 

• Datos estáticos de bucle para rellenar campos de formulario - "loopDataExample2.js"
  • Este ejemplo muestra: utilice una matriz de datos JSON para almacenar el nombre primera/última
    • Recorrer los datos a rellenar campos de formulario, a continuación, enviar el formulario
    • Espere la página resultados
    • Verificar primero / último nombre en la página de resultados

matriz de datos - firstName y lastName < br > var dataArray = [{"nombre": "Tony", "apellido": "Keith"}, {"nombre": "John", "apellido": "Doe"}, {"nombre": "Jane", "apellido": "Doe"}, {"nombre": "Don", "apellido": "Johnson"}]; ... / / bucle por cada dataArray < br > dataArray.forEach(function(d) {('debe rellenar los campos, Enviar página', function() {conductor de retorno / / asegurarse de que estás en la página de inicio 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 () entonces (función (título) {/ / comprobar título 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'); }); }); 

• Validar CSS propiedades - "cssValidation1.js"
  • Este ejemplo muestra cómo:
    • Validar las siguientes propiedades CSS:
      • Color
      • acolchado (superior, inferior, derecha, izquierda)
      • color de fondo

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