Tutorial de E / S del controlador web utilizando un sitio web en vivo y ejemplos de trabajo: 8 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:43

Tutorial de E / S del controlador web utilizando un sitio web en vivo y ejemplos de trabajo

Última actualización: 2015-07-26

(Vuelva a consultar con frecuencia ya que actualizo estos instructivos con más detalles y ejemplos)

Fondo

Recientemente se me presentó un desafío interesante. Necesitaba presentar las pruebas automatizadas a un departamento de preguntas y respuestas con muy poca experiencia técnica y sin conocimientos de programación.

Estos fueron realmente dos (2) desafíos separados. El primero fue identificar las tecnologías para realizar las pruebas automatizadas. El segundo fue capacitar al departamento de preguntas y respuestas.

El artículo solo abordará las tecnologías utilizadas y lo que aprendí en el proceso.

Las tecnologías funcionaron bien, pero realmente tuve que buscar información y pasé muchas horas resolviendo problemas.

Me costó mucho encontrar información en Internet sobre todas estas tecnologías trabajando juntas.

Quería compartir esta información, así que escribí este artículo junto con scripts de prueba de ejemplo y un sitio web de prueba para ejecutar los scripts.

Todos los scripts de prueba se pueden encontrar en github y el sitio de prueba de trabajo se encuentra en Web Driver IO Tutorial Test Site

Espero que les sea útil. Si lo haces, por favor, házmelo saber.

Objetivos Utilizar tecnologías para:

• Pruebe la funcionalidad del sitio web
• Prueba la funcionalidad de JavaScript
• Puede ejecutarse manualmente
• Se puede ejecutar automáticamente

• Lenguaje fácil de aprender para no programadores

  Personal de preguntas y respuestas con conocimientos básicos de HTML y JavaScript

• Utilice únicamente software de código abierto

Tecnologias

Lista de tecnologías que elijo:

• mocha - corredor de prueba - ejecuta los scripts de prueba
• shouldjs - biblioteca de aserciones
• webdriverio - enlaces de control del navegador (enlaces de idioma)
• selenium: abstracción del navegador y fábrica en ejecución

• Navegador / controladores móviles + navegadores

  • Firefox (solo navegador)
  • Chrome (navegador y controlador)
  • IE (navegador y controlador)
  • Safari (complemento de controlador y navegador)

Paso 1: instalación del software

Para comenzar, debe tener instalado el servidor independiente Node JS, Web Driver IO, Mocha, Should y Selenium.

Aquí están las instrucciones de instalación para Windows 7.

(Soy un usuario de Mac / Linux, pero tuve que instalar todo en máquinas con Windows 7, por eso lo he incluido para su referencia. El procedimiento para instalar en Mac / Linux es similar. Consulte las referencias en línea para obtener más información. información.)

Desde un navegador:

• Instalar el nodo que incluye NPM (Administrador de paquetes de nodo)
• vaya a
  • Haga clic en instalar
  • Guardar y ejecutar archivo
  • Establecer la ruta y la variable (NODE_PATH)
  • Vaya a Panel de control-> Sistema y seguridad-> Sistema
    • Configuración avanzada del sistema

    • Configuración del entorno (variables de usuario)

      • Agregar a RUTA

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

      • Agregue el NODE_PATH (variables del sistema)

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

Nota: instalé todo el software a continuación usando la opción global npm (-g). Normalmente, esto no se recomienda, pero para esta instalación necesitaba instalarlo globalmente, ya que se usaría en varios proyectos.

Abra el símbolo del sistema (cmd):

(administrador de usuarios local)

• Instale el "controlador web IO" de selenium

  • npm instalar webdriverio -g

    Esto instalará el controlador web IO globalmente en su máquina

• Instale el software de ejecución de pruebas "mocha"

  • npm install mocha -g

    Esto instalará mocha globalmente en su máquina

• Instalar la biblioteca de aserciones "debería"

  • npm install debería -g

    Esto instalará "debería" globalmente en su máquina

• Instalar Selenium Stand Alone Server

  • Vaya a
  • Descargue el archivo jar y muévase al directorio "selenium".

• Instale navegadores y controladores de navegador para probar con

  • Desde el indicador de cmd:

    • Crear directorio de "selenio"
    • C: / Users {USERNAME} selenium

    • Comandos:

      • cd C: / Users {USERNAME}
      • selenio mkdir

    • Firefox

      • Instale el navegador Firefox, si aún no lo está.
      • La ruta debe configurarse para iniciar Firefox desde el símbolo del sistema (cmd).
      • Panel de control-> Sistema y seguridad-> Sistema
        • Configuración avanzada del sistema
        • Configuración del entorno
        • Agregue (agregue el uso de punto y coma) a la variable de ruta
        • C: / Archivos de programa (x86) Mozilla Firefox
      • No se necesita un controlador web especial para Firefox.

    • Cromo

      • Instale el navegador Chrome, si aún no lo está.
      • La ruta PUEDE configurarse para iniciar Chrome desde el símbolo del sistema (cmd).
      • Pruebe primero: chrome.exe desde el símbolo del sistema (cmd)
      • Si Chrome no se inicia, entonces:
      • Panel de control-> Sistema y seguridad-> Sistema
        • Configuración avanzada del sistema
        • Configuración del entorno
        • Agregue (agregue el uso de punto y coma) a la variable de ruta
        • C: / Archivos de programa (x86) Google / Chrome / Application / chrome.exe

      • Se necesita un controlador web especial para Chrome.

        Vaya a chromium.org y descomprima el controlador de 32 bits en el directorio "selenium"

    • Internet Explorer (solo para Windows; no funcionará en otras plataformas)

      • Se necesita un controlador web especial para IE.

        • Vaya a
        • Descargue y descomprima el controlador de 64 bits en el directorio "selenium".

Paso 2: secuencia de comandos de prueba básica

Comencemos con algunos conceptos básicos.

Aquí hay un simple script de moca que abrirá un sitio web y verificará el título.

// tutorial1.js

// // Este es un script de prueba simple para abrir un sitio web y // validar el título. // bibliotecas requeridas var webdriverio = require ('webdriverio'), should = require ('should'); // un bloque de script de prueba o una suite describe ('Prueba de título para el controlador web IO - Sitio web de la página de prueba del tutorial', function () {// establece el tiempo de espera en 10 segundos this.timeout (10000); var driver = {}; // gancho para ejecutar antes de las pruebas antes (función (hecho) {// cargar el controlador para el controlador del navegador = webdriverio.remote ({capacidades deseadas: {nombre del navegador: 'firefox'}}); controlador.init (hecho);}); // una especificación de prueba - "especificación" it ('debe cargar la página y el título correctos', function () {// cargar la página, luego llamar a function () return driver.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // obtenga el título, luego pase el título a function ().getTitle (). luego (function (title) {// verifique el título (title).should.be.equal ("Web Driver IO - Tutorial Test Page "); // descomentar para la depuración de la consola // console.log ('Título de la página actual:' + título);});}); // un" gancho "para ejecutar después de todas las pruebas en este bloque after (function (done) {driver.end (hecho);});});

Observaciones:

• Primero debe notar que el script de prueba está escrito en JAVASCRIPT (termina en la extensión.js).

• La estructura básica es casi idéntica para todos los scripts de prueba.

  • Comentarios de encabezado (//)
  • Bibliotecas requeridas
  • Establecer opciones (opcional)
  • Hook: Cargar controlador del navegador
  • Conjunto de pruebas (describir)
  • Prueba de especificaciones (puede haber muchas especificaciones en una suite)
  • Gancho: Limpiar

• El conjunto de pruebas comienza con una función de descripción que toma dos parámetros:

  • Cadena: descripción del conjunto de pruebas

    • "Revise la página para ver la verborrea adecuada"
    • "Verificar las operaciones del botón de opción"

  • función - bloque de código para ejecutar

    describe ("Descripción del conjunto de pruebas", función () {});

• El conjunto de pruebas contendrá 1 o más especificaciones de prueba (especificación)

• Las especificaciones comienzan con su función, que toma dos parámetros:

  • Cadena: descripción de la especificación de la prueba
    • "Debe ser el texto del enlace y la URL del enlace correctos"
    • "Debe contener la verborrea correcta (documento de texto)
  • función - bloque de código para ejecutar
  • it ("Descripción de la especificación de la prueba", función () {});
• Una especificación contiene una o más expectativas que prueban el estado del código.

• Estos se llaman aserciones

  La biblioteca "debería" proporciona las afirmaciones

• En casi todos los casos, deberá ubicar uno o más elementos usando un selector y luego realizar alguna operación en el (los) elemento (s)

  • Ejemplos:

    • Encuentra texto en una página y verifica el texto
    • Complete un formulario y envíelo
    • Verificar CSS de un elemento

Echemos un vistazo más de cerca al ejemplo con comentarios

Cargue las bibliotecas necesarias: controlador web IO y should.

// bibliotecas requeridas

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

Defina la suite de pruebas. Esta suite se llama: "Prueba de título para el controlador web IO - Sitio web de la página de prueba del tutorial"

// un bloque o suite de script de prueba

describe ('Prueba de título para el controlador web IO - Sitio web de la página de prueba del tutorial', función () {…});

Establezca el tiempo de espera en 10 segundos para que la secuencia de comandos no se agote al cargar la página.

// establece el tiempo de espera en 10 segundos

this.timeout (10000);

Enganche para cargar el controlador del navegador antes de ejecutar las especificaciones "specs". El controlador de Firefox se carga en este ejemplo.

// gancho para ejecutar antes de las pruebas

before (function (done) {// cargar el controlador para el controlador del navegador = webdriverio.remote ({capacidades deseadas: {browserName: 'firefox'}}); driver.init (hecho);});

Defina la especificación de la prueba.

// una especificación de prueba - "especificación"

it ('debe cargar la página y el título correctos', función () {…});

Cargar la página del sitio web

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

Obtenga el título, luego pase el título a la función ()

.getTitle (). luego (función (título) {

… });

Verifique el título usando la biblioteca de afirmaciones should.

(título).should.be.equal ("Web Driver IO - Página de prueba del tutorial");

Enganche para salir y limpiar el controlador cuando haya terminado.

// un "gancho" para ejecutar después de todas las pruebas en este bloque

after (function (done) {driver.end (done);});

Paso 3: Ejecute el script de prueba

Ahora veamos qué hace el script de prueba cuando se ejecuta.

Primero inicie el servidor independiente de Selenium:

• Para Windows, use la línea de comando (cmd):

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

• Para Mac o Linux, abra la terminal:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Ver captura de pantalla arriba

A continuación, ejecute el script de prueba:

• Para Windows, use la línea de comando (cmd):

  • moca
  • # mocha tutorial1.js

• Para Mac o Linux, abra la terminal:

  • moca
  • $ mocha tutorial.js
• Ver captura de pantalla arriba

¿Entonces qué pasó?

Mocha invoca el script "tutorial1.js". El controlador inició el navegador (Firefox), cargó la página y verificó el título.

Paso 4: Ejemplo de sitio web

Todos los ejemplos se ejecutan en este sitio.

El sitio web de ejemplo se encuentra en: Web Driver IO Tutorial Test Page

Todos los scripts de prueba se pueden descargar desde github.

Paso 5: Ejemplos específicos

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

• Verifique el enlace y el texto del enlace en una lista desordenada: "linkTextURL1.js"

  • La lista desordenada tiene un y el enlace es el cuarto elemento de la lista.
  • La URL debe ser "https://tlkeith.com/contact.html"

// Verificar el texto del enlace Contáctenos

it ('debe contener el texto del enlace Contáctanos', function () {return driver.getText ("// ul [@ id = 'mylist'] / li [4] / a"). luego (función (enlace) {consola.log ('Enlace encontrado:' + enlace); (enlace).should.equal ("Contáctenos");});}); // Verifique la URL de contacto ('debe contener la URL de contacto', function () {return driver.getAttribute ("// ul [@ id = 'mylist'] / li [4] / a", "href").entonces (función (enlace) {(enlace).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL encontrada:' + enlace);});});

• Verificar texto de copyright: "Copyright1.js"

  • El copyright está en el pie de página Este ejemplo muestra 2 formas diferentes de localizar el texto de copyright:

    • por el como el selector de elementos
    • utilizando xpath como selector de elementos

// Verifica el texto de Copyright usando id como selector de elemento

it ('debe contener texto de Copyright', function () {return driver.getText ("# copyright"). then (function (link) {console.log ('Copyright found:' + link); (link).should. equal ("Tony Keith - tlkeith.com @ 2015 - Todos los derechos reservados.");});}); // Verifique el texto de Copyright usando xpath como selector de elementos it ('debe contener texto de Copyright', function () {return driver.getText ("// footer / center / p"). Then (function (link) {console.log ('Copyright encontrado:' + enlace); (enlace).should.equal ("Tony Keith - tlkeith.com @ 2015 - Todos los derechos reservados.");});});

• Complete los campos del formulario y envíe: "formFillSubmit1.js"

  • Complete el nombre, apellido y envíelo, luego espere los resultados.

  • Este ejemplo muestra 3 métodos para completar el campo de entrada del nombre:

    • por id
    • por xpath desde la entrada
    • por xpath desde formulario-> entrada
  • También muestra cómo borrar un campo de entrada

// Establece el primer nombre usando id a: Tony

it ('debe establecer el primer nombre en Tony', function () {return driver.setValue ("# fname", "Tony").getValue ("# fname"). luego (function (e) {(e).should.be.equal ("Tony"); console.log ("Nombre:" + e);});}); // Limpia el nombre usando id it ('debe borrar el nombre', function () {return driver.clearElement ("# fname").getValue ("# fname"). Luego (function (e) {(e).should.be.equal (""); console.log ("Nombre:" + e);});}); // Establece el primer nombre usando xpath desde la entrada a: Tony it ('debería establecer el primer nombre como Tony', function () {return driver.setValue ("// input [@ name = 'fname']", "Tony").getValue ("// input [@ name = 'fname']"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Nombre:" + e);});}); // Borrar el nombre usando xpath de input it ('debe borrar el nombre', function () {return driver.clearElement ("// input [@ name = 'fname']").getValue ("// input [@ name = 'fname'] "). then (function (e) {(e).should.be.equal (" "); console.log (" Nombre: "+ e);});}); // Establezca el primer nombre usando xpath de formulario a: Tony it ('debe establecer el primer nombre a Tony', function () {return driver.setValue ("// form [@ id = 'search-form'] / input [1] "," Tony ").getValue (" // formulario [@ id = 'formulario de búsqueda'] / input [1] "). Luego (función (e) {(e).should.be.equal ("Tony"); console.log ("Nombre:" + e);});}); // Establezca el apellido usando id en: Keith it ('debería establecer el apellido en Keith', function () {return driver.setValue ("# lname", "Keith").getValue ("# lname"). Luego (función (e) {(e).should.be.equal ("Keith"); console.log ("Apellido:" + e);});}); // Envíe el formulario y espere los resultados de la búsqueda ('debe enviar el formulario y esperar los resultados', function () {return driver.submitForm ("# search-form"). Luego (function (e) {console.log (' Enviar formulario de búsqueda ');}).waitForVisible ("# resultados de búsqueda", 10000). Then (function (e) {console.log (' Resultados de búsqueda encontrados ');});});

• Haga clic en el botón Mostrar / Ocultar y verificar el texto: "showHideVerify1.js"

  • El texto está en un elemento de mostrar / ocultar. El botón controla el estado.

  • Este ejemplo muestra:

    • Haga clic en el botón para expandir
    • Espere a que el elemento sea visible (expandido)
    • Verificar texto (plataforma de copia)

// haga clic en el botón "Más información" y verifique el texto en el elemento expandido

it ('debería hacer clic en el botón de más información y verificar el texto', 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 ("¡Todo lo bueno va aquí!");});});

• Validar errores de campo de formulario: "formFieldValidation.js"

  • Utilice scripts de prueba para verificar que se produzcan los mensajes de error correctos.

  • Este ejemplo muestra:

    Verifique los mensajes de texto de error y verifique la ubicación (posición de lista desordenada)

it ('debe contener 5 errores: primero / último / dirección / ciudad / estado', función () {

return driver.getText ("// ul [@ class = 'alerta alerta-peligro'] / li [1]"). then (function (e) {console.log ('Error encontrado:' + e); (e).should.be.equal ('Por favor ingrese el nombre');}).getText ("// ul [@ class = 'alerta alerta-peligro'] / li [2]"). luego (función (e) {console.log ('Error encontrado:' + e); (e).should.be.equal ('Ingresa el apellido');}).getText ("// ul [@ class = 'alerta alerta-peligro '] / li [3] "). then (function (e) {console.log (' Error encontrado: '+ e); (e).should.be.equal (' Por favor ingrese la dirección ');}). getText ("// ul [@ class = 'alert alert-danger'] / li [4]"). then (function (e) {console.log ('Error found:' + e); (e).should.be.equal ('Por favor ingrese la ciudad');}).getText ("// ul [@ class = 'alert alert-danger'] / li [5]"). luego (function (e) {console.log ('Error encontrado:' + e); (e).should.be.equal ('Por favor ingrese el estado');}); });

• Bucle de datos para validar el enlace de URL / texto / página - "LoopDataExample1.js"

  • Este ejemplo muestra: Use una matriz de datos JSON para almacenar el enlace y el nombre, luego itere

    • Verifique el texto y el enlace de cada URL
    • Haga clic en el enlace y cargue la página

// Datos de enlace: enlace y texto

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 "," nombre ":" copyright1.js "}, {" enlace ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js "," nombre ":" 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 "," nombre ": "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 "," nombre ":" dataLoopExample1.js "}]; … // recorrer cada linkArray linkArray.forEach (function (d) {it ('debe contener texto / link luego ir a la página -' + d.name, function () {return driver // asegúrese de estar en la página de inicio.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). then (function (title) {// verificar el título (title).should.be.equal ("Web Driver IO - Página de prueba del tutorial ");}) // busque la URL.getAttribute ('a =' + d.name," href "). Then (function (link) {(link).should.equal (d.link); console.log ('URL encontrada:' + d.link);}) // ve a la página URL y verifica que exista.click ('a =' + d.name).waitForVisible ("# js-repo-pjax- contenedor ", 10000). then (function () {console.log ('Página de Github encontrada');});});});

• Bucle de datos estáticos para completar campos de formulario: "loopDataExample2.js"

  • Este ejemplo muestra: Use una matriz de datos JSON para almacenar el nombre / apellido

    • Recorra los datos para completar los campos del formulario y luego envíe el formulario
    • Espere la página de resultados
    • Verifique el nombre / apellido en la página de resultados

// matriz de datos - firstName y lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // recorrer cada dataArray dataArray.forEach (function (d) {it ('debe completar campos, página sumbit', function () {return driver // asegúrese de estar en la página de inicio.url ('http: / /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). then (function (title) {// verificar el título (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 ("Primero Nombre: "+ e);}).setValue (" # lname ", d.lastName).getValue (" # lname "). Luego (function (e) {(e).should.be.equal (d.lastName); console.log ("Apellido:" + e);}).submitForm ("# formulario de búsqueda"). then (function () {console.log ('Enviar formulario de búsqueda');}).waitForVisible ("# resultados de búsqueda", 10000). then (function () {console.log ('Página de resultados encontrada');}).getText ("// h1"). then (function (link) {console.log ('Texto encontrado:' + enlace); (enlace).should.equal ("Bienvenido" + d.firstName + "" + d.lastName + ".");});});});

• Validar propiedades CSS - "cssValidation1.js"

  • Este ejemplo muestra cómo:

    • Valide las siguientes propiedades CSS:

      • color
      • relleno (arriba, abajo, derecha, izquierda)
      • color de fondo

it ('debe contener el color correcto del texto de error', function () {return driver.getCssProperty ("// ul [@ class = 'alert alert-danger'] / li [1]", "color"). luego (function (resultado) {console.log ('Color encontrado:' + result.parsed.hex + "o" + result.value); (result.parsed.hex).should.be.equal ('# a94442'); });});

it ('debe contener el relleno correcto en la celda de la tabla', function () {

return driver // padding: top right bottom left.getCssProperty ("// tabla [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding-top"). luego (function (resultado) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// tabla [@ id = 'filelist'] / thead / tr [1] / td [1] "," padding-bottom "). then (function (result) {console.log ('padding-bottom found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// tabla [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding- right "). then (function (result) {console.log ('padding-right found:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// tabla [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding-left"). luego (función (resultado) {console.log ('padding-left encontrado: '+ result.value); (result.value).should.be.equal (' 5px ');}); });

it ('debe contener el color de fondo correcto en el encabezado de la tabla', function () {

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

Paso 6: consejos y trucos

• Depuración:

  • Active el registro en el nivel del controlador para obtener más depuración y crear registros.

    • Establezca logLevel en 'verbose'
    • Establezca logOutput en el nombre del directorio ('registros')

driver = webdriverio.remote (nivel de registro: 'detallado', logOutput: 'registros', {capacidades deseadas: {nombre del navegador: 'firefox'}});

• Utilice console.log (), debug (), getText () para depurar.

  • console.log (): se usa para mostrar información para determinar el estado.
  • debug (): use el navegador / script en pausa hasta que se presione Intro en la línea de comando.

  • getText (): utilícelo para verificar que está interactuando con el elemento correcto.

    Especialmente útil con expresiones xpath

// Haga clic en el elemento 3 de la lista

it ('debe hacer clic en el elemento 3 de la lista', function () {// use getText () para verificar que xpath sea correcto para el controlador de retorno del elemento.getText ("// ul [@ id = 'mylist'] / li [3] / div / div / a "). Luego (función (enlace) {// use console.log () para generar información console.log ('Enlace encontrado:' + enlace); (enlace).should.equal ("Item 3");}) // use debug () para detener la acción y ver qué está sucediendo en el navegador.debug ().click ("// ul [@ id = 'mylist'] / li [3] /div/div/a").then (function () {console.log ('Link clicked');}) // espera a que aparezca el formulario de búsqueda de Google.waitForVisible ("# tsf", 20000). then (function (e) {console.log ('Resultados de búsqueda encontrados');});});

• Utilice la variable de entorno para cambiar el navegador de forma dinámica:

  • Utilice la variable de entorno SELENIUM_BROWSER para invocar un navegador diferente sin modificar el script de prueba cada vez.
  • Requiere un ligero cambio de codificación para admitir.

Cambios de código:

// carga el controlador para el navegador

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

Navegadores compatibles:

• Internet Explorer: IE 8+ (solo Windows)

  SELENIUM_BROWSER = es decir, moca

• Firefox 10+ (Windows / Max / Linux)

  SELENIUM_BROWSER = firefox mocha

• Chrome 12+ (Windows / Max / Linux)

  SELENIUM_BROWSER = moca cromado

• Opera 12+

  SELENIUM_BROWSER = ópera moca

• Safari

  SELENIUM_BROWSER = safari moca

Pruebas:

• Para Windows, use git bash shell:

  • SELENIUM_BROWSER = moca cromado
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Para Mac o Linux, abra la terminal:

  • SELENIUM_BROWSER = moca cromado
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Prueba de respuesta:

  • Determine los puntos de interrupción según el proyecto o el marco (es decir, bootstrap).

  • Defina las variables de entorno para cada punto de interrupción:

    • ESCRITORIO - 1200 px
    • TABLETA - 992 px
    • MÓVIL - 768 px

  • Desarrolle un comando reutilizable para leer la variable de entorno y establecer el tamaño del navegador.

    Vea el ejemplo a continuación

  • Llame al comando reutilizable en su secuencia de comandos de prueba.

// código reutilizable - biblioteca // fragmento de código if (bp == "DESKTOP") {obj.width = 1200; obj.altura = 600; obj.name = bp; } else if (bp == "TABLETA") {obj.width = 992; obj.altura = 600; obj.name = bp; } más si (bp == "MÓVIL") {obj.width = 768; obj.altura = 400; obj.name = bp; }

// Probar script

before (function (done) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // establece el tamaño de la ventana it ('should set window size', function (done) {// solo importa el ancho driver.setWindowSize (winsize.width, winsize.height, function () {}). call (done);});

• Comandos reutilizables (comandos personalizados):

  • Web Driver IO se puede ampliar fácilmente.
  • Me gusta poner todos los comandos reutilizables en una biblioteca. (¡tal vez esto sea de la vieja escuela, pero funciona!)

common / commonLib.js

// verificarLastNameCheckError ()

// // Descripción: // Verifica el apellido del mensaje de error de validación // // Entrada: // número - índice de error (1-5) // Salida: // ninguno // var verifyLastNameCheckError = function () { var idx = argumentos [0], devolución de llamada = argumentos [argumentos.longitud - 1]; this.getText ("// ul [@ class = 'alerta alerta-peligro'] / li [" + idx + "]", function (err, e) {console.log ('Error encontrado:' + e); (e).should.be.equal ('Introduzca el apellido');}).call (devolución de llamada); }; // exportar la función module.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Estos son los cambios específicos necesarios para llamar a una función reutilizable

Consulte formFieldValidation.js para obtener un ejemplo de trabajo completo

// requiere el comando reutilizable - CommonLib

common = require ('./ Common / CommonLib'); … // enlazar los comandos driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (controlador)); it ('debe contener 2 errores: nombre / apellido', function () {// llamar al controlador de función reutilizable.verifyFirstNameError (1);.verifyLastNameError (2);});

• Estructura de directorio / archivo de proyecto:

  • Aquí está la estructura típica del proyecto:

    • "Proyecto" - directorio principal del proyecto

      • README.md - Léame para proyecto global

      • "Común": directorio de funciones globales común a todos los proyectos

        • common-lib.js: biblioteca de funciones globales
        • README.md - Léame para funciones globales

      • "Producto1": directorio del producto 1

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

        • "Común": directorio para funciones locales del proyecto 1

          • prod1-lib.js: biblioteca de funciones locales para el proyecto 1
          • README.md - Léame para funciones locales para el proyecto 1

      • "Product2": directorio para el producto 2test-script1.jstest-script2.js

        • "Común": directorio para funciones locales del proyecto 2

          • prod2-lib.js: biblioteca de funciones locales para el proyecto 2
          • README.md - Léame para funciones locales para el proyecto 2

• Divida los scripts de prueba en varios archivos:

  • Aquí hay una muestra del uso de varios archivos:

    • Sanity Check: secuencia de comandos de prueba básica para verificar que todo funciona
    • Validación de texto y elementos estáticos: verifique todos los elementos y el texto
    • Validación de errores de formulario / página: validación de errores
    • Resultados de búsqueda: prueba de contenido dinámico

• Devolución de llamada VS. Promesas:

  • La versión 3 de Web Driver IO admite tanto devoluciones de llamada como promesas.

    Las promesas son el método preferido ya que reduce el código de manejo de errores. Vea a continuación el mismo ejemplo escrito con devoluciones de llamada y promesas.

Devoluciones de llamada

// Establecer / verificar el nombre / apellido usando Callback

it ('debería establecer / verificar el nombre / apellido usando Callbacks', función (hecho) {driver.setValue ("# fname", "Tony", function (e) {driver.getValue ("# fname", function (err, e) {(e).should.be.equal ("Tony"); console.log ("Nombre:" + e); driver.setValue ("# lname", "Keith", función (e) { driver.getValue ("# lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Apellido:" + e); done ();});});});});});

Promesas

// Establecer / verificar el nombre / apellido usando Promesas

it ('debe establecer / verificar el nombre / apellido usando Promesas', function () {return driver.setValue ("# fname", "Tony").getValue ("# fname"). luego (function (e) {(e).should.be.equal ("Tony"); console.log ("Nombre:" + e);}).setValue ("# lname", "Keith").getValue ("# lname"). then (function (e) {(e).should.be.equal ("Keith"); console.log ("Apellido:" + e);});});

Paso 7: más recursos

Aquí hay algunos recursos adicionales para su referencia:

• Grupos de discusión (Gitter)

  • Grupo de discusión de E / S del controlador web
  • Grupo de discusión Mocha

• Otros proyectos interesantes

  • Supertest: afirmaciones
  • Chai - afirmaciones

Paso 8: Conclusión

Pasé algún tiempo investigando las tecnologías que usaría para mi proyecto. Originalmente comencé con Selenium Web Driver, pero pasé a usar Web Driver IO. Web Driver IO parecía ser más fácil de usar y mucho más fácil de extender (al menos la documentación para extender - los comandos reutilizables era mejor).

Cuando comencé a mirar las tecnologías, fue difícil encontrar buenos ejemplos que fueran relativos a cualquier cosa que estuviera tratando de hacer. Esta es la razón por la que quería compartir esta información y conocimiento con ustedes.

Las tecnologías funcionaron mucho mejor de lo que esperaba, sin embargo, hubo una curva de aprendizaje involucrada. Una vez que entendí cómo funcionaban todos los componentes juntos, pude escribir scripts de prueba complicados en muy poco tiempo. Los scripts más difíciles fueron los componentes basados en JavaScript, como un selector de fecha y selectores modales.

Nunca me he etiquetado como un desarrollador de JavaScript ni quería ser un experto en JavaScript, pero el uso de estas tecnologías definitivamente me ha motivado a perfeccionar mis habilidades de JS.

Espero que este artículo sea útil y que los ejemplos sean claros e informativos.

Por favor avíseme si tiene alguna pregunta o comentario.

Gracias, Tony Keith