Share
Probar minuciosamente un sitio web que haya creado es tan importante como desarrollarlo..
Digamos que su empresa ha creado un sitio web de comercio electrónico. Si acaba de probar el botón "Comprar ahora" para la categoría electrónica y funcionó, podría pensar que también funciona para todas las demás categorías. ¿Qué pasaría si más tarde descubriera que una falla impide que los usuarios hagan clic en el botón "Comprar ahora" para todos los productos en la categoría de acondicionamiento físico? Algo como esto definitivamente afectará los ingresos de la empresa de comercio electrónico. Tampoco se trata solo de los ingresos; También afecta a la reputación de la empresa. Los usuarios pueden evitar por completo visitar su sitio web a favor de la competencia..
Los desarrolladores y las empresas a veces evitan probar a fondo su sitio web debido a dos limitaciones principales: el tiempo y el dinero. Incluso si ha ejecutado todas las pruebas posibles para su sitio web en un solo dispositivo, no hay garantía de que funcionará también en todos los demás dispositivos. Hay muchos factores como el navegador, el sistema operativo y el tamaño de la pantalla que deben tenerse en cuenta. Además, los nuevos dispositivos con diferentes tamaños de pantalla y capacidades siguen apareciendo. Probar en más de mil combinaciones de navegadores, sistemas operativos y tamaños de pantalla también va a ser un proceso lento. Como resultado, muchas empresas no prueban sus sitios web tan a fondo como deberían.
CrossBrowserTesting puede resolver estos dos problemas de manera muy elegante. Este servicio le permite ejecutar pruebas automatizadas en más de 1.500 dispositivos de escritorio y móviles reales sin tener que abandonar la comodidad de su navegador de desarrollo principal. La depuración se realiza de forma remota, pero puede interactuar con sitios web exactamente como lo haría un usuario real. El proceso ya no será tan largo como solía ser, ya que podrá ejecutar todas estas pruebas en paralelo..
Este tutorial lo ayudará a comenzar con CrossBrowserTesting y le mostrará cómo ejecutar pruebas automatizadas en miles de dispositivos en paralelo. Debes registrarte para una prueba gratuita para seguir el resto del tutorial..
Mocha tiene muchas funciones y es uno de los marcos de prueba de JavaScript asíncronos más populares para Node.js. Le permite ejecutar múltiples pruebas en serie, lo que resulta en informes precisos y mapeo de excepciones no detectadas para corregir casos de prueba. El marco nos proporciona antes de, después, antes de cada, y después de cada manos. Puede usar estos enlaces para configurar algunas condiciones previas para las pruebas y limpiar el entorno después de ejecutar cualquier prueba.
Si bien Mocha puede ayudarlo a escribir pruebas, necesitará la ayuda de una biblioteca de afirmaciones para verificar si los resultados de una prueba son los que espera que sean. Vamos a utilizar Chai en este tutorial. La biblioteca de afirmaciones es muy flexible y le permite elegir una interfaz de su elección para probar los resultados. Depende de usted utilizar debería(), esperar(), o afirmar() afirmaciones de estilo.
Mocha y Chai se pueden usar para ejecutar todo tipo de pruebas y verificar los valores resultantes. Si necesita realizar pruebas como verificar si una matriz contiene un elemento específico, estas dos herramientas serán suficientes. Sin embargo, estamos interesados en realizar pruebas más sofisticadas, como verificar si un intento de inicio de sesión fue exitoso o si los usuarios pueden actualizar sus nombres de usuario, etc. Esto requiere que instalemos Selenium WebDriver. Con Selenium WebDriver, podremos automatizar muchas cosas, desde hacer clic en los enlaces y botones hasta completar un formulario..
Una vez que tenga una comprensión básica de estas herramientas, la parte difícil habrá terminado. Escribir pruebas automatizadas para CrossBrowserTesting es fácil. Supongo que ya tiene instalado Node.js.
Vaya al directorio de su proyecto y ejecute los siguientes comandos:
npm install mocha --save-dev npm install chai --save-dev npm install selenium-webdriver --save-dev
Una vez que se hayan instalado todos los paquetes, cree una carpeta llamada prueba dentro de su carpeta de proyectos. Esta carpeta contendrá todos nuestros archivos de prueba. Por ahora, crea un archivo llamado github.js dentro de la carpeta de prueba. Escribe el siguiente código dentro github.js.
Accentsconagua
var webdriver = require ('selenium-webdriver'); var assert = require ('chai'). assert; var remoteHub = 'http://hub.crossbrowsertesting.com:80/wd/hub'; var username = '[email protected]'; var authkey = 'yourAuthKey'; var caps = nombre: 'GitHub Search', compilación: '1.0.0', browserName: 'MicrosoftEdge', versión: '15', plataforma: 'Windows 10', resolución de pantalla: '1366x768', record_video: 'true', record_network: 'true', nombre de usuario: nombre de usuario, contraseña: authkey; describe ("Buscando en GitHub for Mocha", function () this.timeout (5 * 1000 * 60); var driver = new webdriver.Builder () .usingServer (remoteHub) .withCapabilities (caps) .build (); before ( function setupWebdriver (done) driver.get ("https://github.com/search/advanced") .then (done)); ("Mochajs debería ser el resultado principal", función (done) var inputField = driver.findElement (webdriver.By.css (". search-form-fluid .search-page-input")); inputField.click () .then (function () inputField.sendKeys ("Mocha"); ); driver.findElement (webdriver.By.css ("# search_form button")). click () .then (function () return driver.wait (webdriver.until.elementLocated (webdriver.By.css (". repo -list h3 a ")), 10000)) .then (function (element) return element.getText ();) .then (function (text) assert.deepEqual (text," mochajs / mocha "); ) .then (done);); ("Debe mostrar una solicitud de registro después de cargar la página del repositorio", función (done) driver.findElement (webdriver.By.css (". repo-list h3 a" )). click () .then (function ( ) return driver.wait (webdriver.until.elementLocated (webdriver.By.css (". signup-prompt h3.pt-2")), 10000)) .then (function (element) return element.getText ( ); ) .then (function (text) assert.deepEqual (text, "Join GitHub today");); driver.findElement (webdriver.By.css (". signup-prompt form button")). click () .then (done); ); after (función quitWebdriver (done) driver.quit () .then (done);); );En el código anterior, debe reemplazar [email protected] con la dirección de correo electrónico que usó para registrarse para su prueba gratuita. Del mismo modo, tendrá que obtener su propia clave de autorización de la página de la cuenta. Copia esa llave y pégala en lugar de tuAuthKey.
los tapas objeto se utiliza para especificar diferentes opciones de configuración para ejecutar la prueba. Puedes dar tu prueba un nombre y un construir Número para identificarlo. los nombre del navegador La propiedad se utiliza para especificar el nombre del navegador en el que desea ejecutar las pruebas. También puede especificar un versión Para el navegador, pero es opcional. Cuando no se especifica nada, se usa la última versión del navegador.
Puede leer sobre todas las propiedades y sus valores válidos en el artículo titulado Capacidades de automatización de Selenium. Debe leer esa página detenidamente para aprovechar al máximo todas las funciones de pruebas automatizadas de Selenium. Para su facilidad de uso, CrossBrowserTesting también proporciona un configurador de capacidades en la página de inicio de automatización.
Después de establecer los valores apropiados para nuestros parámetros de prueba, podemos escribir las pruebas que queremos ejecutar. Cada conjunto de pruebas que desea ejecutar está incluido dentro de un describir bloquear. Dentro de describir bloque, hemos establecido un tiempo de espera para diferentes pruebas y hemos creado un objeto webdriver al que cada prueba accederá en el bloque.
En el siguiente paso, hemos utilizado el antes de enganche para acceder a la página de búsqueda de GitHub antes de ejecutar las pruebas dentro de eso bloques El código dentro antes de se ejecutará solo una vez, que es lo que quiero hacer en mi caso. Sin embargo, si desea buscar un nuevo término después de cada prueba exitosa, tendrá que volver una y otra vez a la página de búsqueda. En tales situaciones, utilizando un antes de cada gancho tiene más sentido Puede usar este enlace para restablecer cualquier información como las cookies que no desea conservar entre sesiones.
La prueba real va dentro de la eso bloques En la primera prueba, identificamos el campo de entrada utilizando un selector de CSS y luego establecemos su valor en "Mocha". Después de eso, hacemos clic en el botón de búsqueda y esperamos hasta que el conductor pueda encontrar un enlace identificado por el selector .repo-list h3 a. Verificamos el texto dentro de ese elemento para ver si coincide mochajs / mocha. La prueba dentro del segundo. eso el bloque continúa desde la primera prueba y hace clic en el enlace para visitar el repositorio de GitHub.
El código dentro de la después El bloque se ejecuta después de haber ejecutado las pruebas dentro de todos. eso bloques Asegúrate de llamar driver.quit () dentro del bloque posterior, de lo contrario, la sesión permanecerá abierta durante 10 minutos de forma predeterminada.
Es posible que desee tomar instantáneas en varias etapas durante sus pruebas para compartir los resultados con otros. Esto se puede hacer invocando la API. Puede encontrar más información relacionada con este tema en la publicación CrossBrowserTesting sobre la ejecución de pruebas de navegador automatizadas con Selenium y JavaScript.
Después de crear el archivo de prueba anterior, puede ejecutar las pruebas en el dispositivo y en el navegador de su elección ingresando el siguiente comando en la consola desde dentro del directorio del proyecto:
prueba de moca / github.js
Si todo funcionó como se esperaba, podrá ver los resultados de las pruebas dentro de su cuenta de prueba CrossBrowser aquí. He descargado el video que se creó después de ejecutar esta prueba con mi cuenta. Deberías ver algo similar también.
Lo bueno de CrossBrowserTesting es que puede integrarlo fácilmente con sus herramientas favoritas para ayudarlo a escribir pruebas rápidamente y usar marcos con los que su equipo ya está familiarizado..
En esta sección, escribiremos algunas pruebas usando WebdriverIO. Básicamente, simplemente envía solicitudes a un servidor Selenium y maneja la respuesta. El marco le permite escribir comandos asíncronos sincrónicamente para que no tenga que preocuparse por las promesas y las condiciones de las carreras. Puedes leer los documentos de la API para obtener más información sobre el marco.
Vamos a empezar a escribir nuestras pruebas ahora. Esta vez, intentaremos iniciar sesión en una cuenta que he creado en Pixabay. A sabiendas, proporcionaremos credenciales incorrectas la primera vez para comprobar si el sitio web nos permite ingresar. La próxima vez, usaremos las credenciales correctas y verificaremos que hayamos iniciado sesión.
Antes de continuar, deberá instalar WebdriverIO ejecutando el siguiente comando:
npm install webdriverio --save-dev
Ahora crea un archivo dentro del prueba carpeta y nombre pixabay.js. El archivo debe contener el siguiente código:
var webdriverio = require ('webdriverio'); var assert = require ('chai'). assert; var username = '[email protected]'; var authkey = 'yourAuthKey'; var devices = [browserName: 'Chrome', plataforma: 'Windows 10',, browserName: 'Firefox', plataforma: 'Windows 7',, browserName: 'Internet Explorer', plataforma: 'Windows 7 64 -Bit ',, browserName:' Safari ', plataforma:' Mac OSX 10.9 ',]; devices.forEach (función (device) var options = desiredCapabilities: name: 'Pixabay Log In Test (Multiple Devices)', compilación: '1.0', plataforma: device.platform, browserName: device.browserName, screen_resolution: ' 1366x768 ', record_video:' true ', record_network:' true ', host: "hub.crossbrowsertesting.com", puerto: 80, usuario: nombre de usuario, clave: authkey describe (' Logging Into Pixabay ', function () this.timeout (5 * 60 * 1000); var client; before (function () client = webdriverio.remote (options); return client.init ();); it ('Las credenciales incorrectas deben impedir el inicio de sesión', function () return client .url ('https://pixabay.com/en/accounts/login/') .setValue ('# id_username', 'pixa_username') .setValue ('# id_password', 'wrong_pixa_password') .Haga clic en ('# sign_in_out input.pure-button') .getText ('ul.errorlist li') .then (function (result) assert.equal (result, 'Introduzca un nombre de usuario y contraseña correctos. Tenga en cuenta que ambos campos puede ser sensible a las mayúsculas y minúsculas. '););); debe ser capaz de iniciar sesión con el botón derecho redentials ', function () return client .url (' https://pixabay.com/en/accounts/login/ ') .setValue (' # id_username ',' pixa_username ') .setValue (' # id_password ',' correct_pixa_password ') .click (' # sign_in_out input.pure-button ') .getText (' # my_images a.pure-button ') .then (function (result) assert.equal (result,' Upload images '); ); ); after (function () return client.end ();); ); );Después de ejecutar el código en la sección anterior, esto debería parecer muy familiar. Al igual que en el ejemplo anterior, reemplazar [email protected] y tuAuthKey con su dirección de correo electrónico y clave de autenticación de CrossBrowserTesting.
Para probar la página de inicio de sesión, puede crear su propia cuenta de Pixabay o intentar iniciar sesión en otros sitios web. Solo tenga en cuenta que debe poder seleccionar los campos de entrada y los botones correctos utilizando diferentes selectores.
Una diferencia importante esta vez es que hemos creado una serie de objetos de configuración, y podemos hacer un bucle sobre cada uno de ellos para ejecutar las mismas pruebas en varios dispositivos. Esto puede ahorrarle a usted y a su equipo mucho tiempo. Todo lo que tiene que hacer es escribir las pruebas una vez y luego ejecutarlas en tantos dispositivos como desee. CrossBrowserTesting le permite ver grabaciones de video de todas sus pruebas automatizadas. De esta manera, puede ver fácilmente qué fue lo que falló en un dispositivo y navegador en particular..
La capacidad de probar su sitio web en más de 1.500 dispositivos diferentes de forma remota es increíble. Ya no tiene que preocuparse por perder clientes porque su sitio web no estaba funcionando como se esperaba en un dispositivo que olvidó o no pudo probar. La gran cantidad de dispositivos provistos por CrossBrowserTesting cubre casi todas las combinaciones de dispositivos y navegadores que sus clientes podrían usar. No solo eso, sino que también se libra del enorme costo de mantener tantos dispositivos.
He creado algunas pruebas básicas de automatización aquí para ayudarlo a comenzar con CrossBrowserTesting. Una vez que tenga un buen conocimiento de los fundamentos, podrá realizar todo tipo de pruebas, desde completar formularios grandes hasta visitar una página de producto tras otra. Dado que las pruebas son automáticas y puede ejecutarlas en paralelo, también ahorra mucho tiempo, lo que se puede utilizar para mejorar aún más su producto principal.
Puede suscribirse al servicio de forma gratuita, así que pruébelo y conozca las diferentes funciones que lo convierten en una opción mejor y más rentable que la competencia. Si las cosas se resuelven, usted o su empresa terminarán de ahorrar miles de dólares y cientos de horas valiosas con la ayuda de CrossBrowserTesting.
