Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Carlos (you can also view the original English article)

Probar minuciosamente un sitio web que has creado es tan importante como desarrollarlo.

Digamos que tu empresa ha creado un sitio web de comercio electrónico. Si acabas de probar el botón de «Comprar ahora» en la categoría de electrónica y ha funcionado, quizá pienses que también está funcionando en todas las demás categorías. ¿Qué pasaría si más tarde descubres que un fallo impide a los usuarios hacer clic en ese mismo botón en todos los productos de la categoría de fitness? Algo como esto definitivamente va a reducir los ingresos de la empresa. No solamente se trata de los ingresos, sino que también afecta su reputación. Los usuarios pueden evitar por completo visitar tu sitio web en favor de la competencia.

En ocasiones, los desarrolladores y las empresas evitan probar a fondo su sitio web debido a dos limitaciones principales: tiempo y dinero. Aun si has realizado todas las pruebas posibles para tu sitio web en un solo dispositivo, no hay garantía de que también funcione en todos los demás. Existen muchos factores que se deben tener en cuenta como el navegador, el sistema operativo y el tamaño de la pantalla. Por otra parte, siguen surgiendo nuevos dispositivos con distintos tamaños de pantalla y capacidades. Además, hacer pruebas en más de mil combinaciones de navegadores, sistemas operativos y tamaños de pantalla es un proceso que requiere mucho tiempo. Como resultado, muchas empresas no prueban sus sitios web tan a fondo como deberían.

CrossBrowserTesting puede resolver estos dos problemas de forma muy refinada. Este servicio te permite realizar pruebas automatizadas en más de 1,500 dispositivos móviles y de escritorio reales sin que tengas que dejar nunca la comodidad de tu navegador principal de desarrollo. La depuración se realiza de manera remota, pero puedes interactuar con los sitios web exactamente como lo haría un usuario real. El proceso ya no va a ser tan prolongado como solía ser, ya que podrás ejecutar todas estas pruebas en paralelo.

Este tutorial te ayudará a que empieces con CrossBrowserTesting y te mostrará cómo realizar pruebas automatizadas en miles de dispositivos en paralelo. Debes inscribirte en una prueba gratuita para seguir con el resto del tutorial.

Automatiza las pruebas con Mocha y Selenium WebDriver

Mocha está lleno de funciones y es uno de los frameworks asíncronos de JavaScript para pruebas más populares para Node.js. Permite ejecutar múltiples pruebas en serie, lo que da como resultado unos informes precisos y el mapeo de excepciones no capturadas para corregir casos de prueba. El framework nos proporciona ganchos before, after, beforeEach, y afterEach. Puedes utilizar estos ganchos para configurar algunas condiciones previas para las pruebas y limpiar el entorno después de ejecutar cualquier prueba.

Si bien Mocha puede ayudarte a escribir pruebas, necesitarás la ayuda de una biblioteca de aserciones para comprobar si los resultados de una prueba son lo que esperas. En este tutorial vamos a utilizar Chai. La biblioteca de aserciones es muy flexible y te permite optar por una interfaz de tu elección para probar los resultados. Depende de ti utilizar aserciones de estilo should(), expect() o assert().

Mocha y Chai pueden utilizarse para realizar todo tipo de pruebas y verificar los valores resultantes. Si necesitas realizar pruebas como comprobar si una matriz (array) contiene un elemento específico, estas dos herramientas serán suficientes. No obstante, estamos interesados en realizar pruebas más sofisticadas, como comprobar 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 los botones hasta rellenar un formulario.

En cuanto tengas un entendimiento básico de estas herramientas, la parte difícil ya habrá pasado. Escribir pruebas automatizadas para CrossBrowserTesting es fácil. Supongo que ya tienes instalado Node.js.

Ve al directorio del proyecto y ejecuta los siguientes comandos:

1	npm install mocha --save-dev
2	npm install chai --save-dev
3	npm install selenium-webdriver --save-dev

Una vez que todos los paquetes hayan sido instalados, crea una carpeta llamada test (prueba) dentro de tu carpeta de proyectos. Esta carpeta contendrá todos nuestros archivos de prueba. Por ahora, crea un archivo llamado github.js dentro de la carpeta test. Escribe el siguiente código dentro de github.js.

var webdriver = require('selenium-webdriver');
var assert = require('chai').assert;

var remoteHub = 'http://hub.crossbrowsertesting.com:80/wd/hub';

var username = 'your.email@address.com';
var authkey = 'yourAuthKey';

var caps = {
    name: 'GitHub Search',
    build: '1.0.0',
    browserName: 'MicrosoftEdge',
    version: '15',
    platform: 'Windows 10',
    screen_resolution: '1366x768',
    record_video: 'true',
    record_network: 'true',
    username: username,
    password: authkey
};

describe("Searching 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)
    });

    it("Mochajs Should be the Top Result", function (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);

    });

    it("Should Show a Sign Up Prompt after Loading the Repository Page", function (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(function quitWebdriver(done) {
        driver.quit()
            .then(done);
    });
});

En el código anterior, debes sustituir your.email@address.com por la dirección de correo electrónico que utilizaste para inscribirse en tu prueba gratuita. De igual modo, tendrás que obtener tu propia clave de autorización de la página de la cuenta. Copia esa clave y pégala en lugar de yourAuthKey.

El objeto caps se utiliza para especificar diferentes opciones de configuración para ejecutar la prueba. Puedes darle a tu prueba un nombre (name) y un número de versión (build) para identificarla. La propiedad browserName se utiliza para especificar el nombre del navegador en el que deseas realizar las pruebas. También puedes especificar una versión (version) para el navegador, pero es opcional. Cuando no se especifica nada, se utiliza la versión más reciente del navegador.

Puedes leer acerca de todas las propiedades y sus valores válidos en el artículo titulado: Capacidades de automatización de Selenium. Deberías leer esa página detenidamente para aprovechar al máximo todas las funciones de las pruebas automatizadas de Selenio. Para facilitar el uso, CrossBrowserTesting también ofrece un configurador de capacidades en la página de inicio de automatización.

Después de ajustar los valores apropiados para nuestros parámetros de prueba, podemos escribir las pruebas que deseamos realizar. Cada conjunto de pruebas quieras ejecutar está encerrado dentro de un bloque describe. Dentro del bloque describe, hemos establecido un tiempo de espera para distintas pruebas y hemos creado un objeto webdriver al que se accederá por cada prueba en el bloque.

En el siguiente paso, hemos usado el gancho before para acceder a la página de búsqueda de GitHub antes de ejecutar las pruebas dentro de los bloques it. El código dentro de before se ejecutará solomente una vez, que es lo que quiero hacer en mi caso. No obstante, si deseas buscar un nuevo término después de cada prueba exitosa, tendrás que regresar a la página de búsqueda una y otra vez. En tales casos, usar un gancho beforeEach tiene más sentido. Puedes utilizar este gancho para restablecer cualquier dato, como las cookies, que no quieres que continúen entre sesiones.

La prueba real va dentro de los bloques it. En la primera prueba, identificamos el campo de entrada utilizando un selector CSS y luego ajustamos su valor a «Mocha». Después de eso, hacemos clic en el botón de búsqueda y esperamos hasta que el controlador pueda localizar un enlace identificado por el selector .repo-list h3 a. Comprobamos el texto dentro de ese elemento para ver si coincide con mochajs/mocha. La prueba dentro del segundo bloque it continúa desde la primera prueba y hace clic en el enlace para visitar el repositorio GitHub.

El código dentro del bloque after se ejecuta después de que hayamos hecho las pruebas dentro de todos los bloques it. Asegúrate de llamar a driver.quit() dentro del bloque after, de lo contrario la sesión permanecerá abierta durante 10 minutos de forma predeterminada .

Es posible que desees tomar instantáneas en varias etapas durante sus pruebas para compartir los resultados con otros. Esto puede hacerse invocando la API. Se puede encontrar más información relacionada con este tema en el artículo CrossBrowserTesting sobre cómo ejecutar pruebas automatizadas de navegadores con Selenium y JavaScript.

Después de crear el archivo de prueba anterior, puedes ejecutar las pruebas en el dispositivo y el navegador de tu elección introduciendo el siguiente comando en la consola desde dentro del directorio del proyecto:

1	mocha test/github.js

Si todo ha funcionado como se esperaba, podrás ver los resultados de las pruebas dentro de tu cuenta de CrossBrowserTesting aquí. He descargado el video que se creó después de que ejecuté esta prueba con mi cuenta. Deberías ver algo similar también.

Automatiza las pruebas usando Mocha y WebdriverIO

Lo bueno de CrossBrowserTesting es que puedes integrarlo fácilmente con tus herramientas favoritas para ayudarte a escribir pruebas rápidamente y utilizar frameworks de trabajo con los que tu equipo ya esté familiarizado.

En esta sección, escribiremos algunas pruebas utilizando WebdriverIO. Básicamente, solo envía solicitudes a un servidor de Selenium y se encarga de la respuesta. El framework te permite escribir comandos asíncronos de manera sincronizada para que no tengas que preocuparte por promises y racing conditions. Puedes leer los documentos de la API para obtener más información acerca del framework.

Ahora empecemos a escribir nuestras puebas. Esta vez, intentaremos iniciar sesión en una cuenta que he creado en Pixabay. Deliberadamente proporcionaremos credenciales equivocadas la primera vez para probar si el sitio web nos permite ingresar. La próxima vez, usaremos las credenciales correctas y verificaremos que hemos iniciado sesión.

Antes de proceder, tendrás que instalar WebdriverIO ejecutando el siguiente comando:

1	npm install webdriverio --save-dev

Ahora crea un archivo dentro de la carpeta test y nómbralo pixabay.js. El archivo debe contener el siguiente código:

var webdriverio = require('webdriverio');
var assert = require('chai').assert;

var username = 'your.email@address.com';
var authkey = 'yourAuthKey';

var devices = [{
        browserName: 'Chrome',
        platform: 'Windows 10',
    },
    {
        browserName: 'Firefox',
        platform: 'Windows 7',
    },
    {
        browserName: 'Internet Explorer',
        platform: 'Windows 7 64-Bit',
    },
    {
        browserName: 'Safari',
        platform: 'Mac OSX 10.9',
    }
];

devices.forEach(function (device) {
    var options = {
        desiredCapabilities: {
            name: 'Pixabay Log In Test (Multiple Devices)',
            build: '1.0',
            platform: device.platform,
            browserName: device.browserName,
            screen_resolution: '1366x768',
            record_video: 'true',
            record_network: 'true'
        },
        host: "hub.crossbrowsertesting.com",
        port: 80,
        user: username,
        key: authkey
    }

    describe('Logging Into Pixabay', function () {

        this.timeout(5 * 60 * 1000);
        var client;

        before(function () {
            client = webdriverio.remote(options);
            return client.init();
        });

        it('Wrong Credentials Should Prevent Log In', function () {
            return client
                .url('https://pixabay.com/en/accounts/login/')
                .setValue('#id_username', 'pixa_username')
                .setValue('#id_password', 'wrong_pixa_password')
                .click('#sign_in_out input.pure-button')
                .getText('ul.errorlist li')
                .then(function (result) {
                    assert.equal(result, 'Please enter a correct username and password. Note that both fields may be case-sensitive.');
                });
        });

        it('Should be Able to Log In with Right Credentials', 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 debe parecer muy familiar. Al igual que en el ejemplo anterior, sustituye your.email@address.com y yourAuthKey por tu dirección de correo electrónico de CrossBrowserTesting y tu clave de autenticación.

Para probar la página de inicio de sesión, puedes crear tu propia cuenta de Pixabay o intentar iniciar sesión en otros sitios web. Solo recuerda que debes poder seleccionar los campos y botones de entrada correctos utilizando diferentes selectores.

Una diferencia importante esta vez es que hemos creado una array de objetos de configuración, y podemos crear un bucle sobre cada uno de ellos para realizar las mismas pruebas en múltiples dispositivos. Esto puede ahorrarle tu equipo y a ti mucho tiempo. Todo lo que tienes que hacer es escribir las pruebas una vez y luego ejecutarlas en tantos dispositivos como desees. CrossBrowserTesting te permite ver grabaciones de video de todas tus pruebas automatizadas. De esta forma puedes ver fácilmente lo que salió mal con un dispositivo y un navegador en particular.

Reflexiones finales

La capacidad de probar tu sitio web en más de 1,500 dispositivos diferentes de manera remota es increíble. Ya no tienes que preocuparte por perder clientes porque tu sitio web no funciona como se esperaba en un dispositivo que olvidaste o no pudiste probar. El gran número de dispositivos que proporciona CrossBrowserTesting abarca casi todas las combinaciones de dispositivos y navegadores que tus clientes podrían usar. No solamente eso, sino que también te libras del enorme costo de mantener tantos dispositivos.

Aquí he creado algunas pruebas de automatización básicas para ayudarte a empezar con CrossBrowserTesting. En cuanto tengas una buena comprensión de los fundamentos, podrás realizar todo tipo de pruebas, desde completar formularios grandes hasta visitar las páginas de los productos, una tras otra. Puesto que las pruebas son automatizadas y las puedes realizar en paralelo, también ahorras mucho tiempo, que lo puedes dedicar para mejorar tu producto principal aún más.

Puedes suscribirte al servicio de manera gratuita, así que pruébalo y conoce sus diferentes funciones que lo convierten en una opción más rentable y mejor que la competencia. Si las cosas funcionan, tu empresa o tú terminarán ahorrando miles de dólares y cientos de horas valiosas con la ayuda de CrossBrowserTesting.

Realiza pruebas automatizadas de un sitio web en miles de dispositivos utilizando CrossBrowserTesting

Automatiza las pruebas con Mocha y Selenium WebDriver

Automatiza las pruebas usando Mocha y WebdriverIO

Reflexiones finales