Protractor es un marco de prueba de extremo a extremo desarrollado para aplicaciones AngularJS, sin embargo, también funciona para aplicaciones no Angular JS. Ejecuta pruebas contra la aplicación interactuando con ella como lo haría un usuario real, ejecutándose en un navegador real. En este artículo, vamos a utilizar Transportador para verificar si un elemento está visible u oculto.
Requisito previo: instalación y configuración del transportador
Acercarse:
- Vamos a crear un programa de prueba básico en el que vamos a comprobar si el elemento está visible o no.
- Todas las pruebas de Protractor tendrán un archivo que contendrá la configuración y este será el archivo inicial que iniciará la prueba.
Los pasos que hay que seguir son:
Paso 1: primero debemos crear un archivo conf.js que contenga la configuración que se usará con Protractor.
Javascript
exports.config = {
// Define the capabilities to be passed
// to the webdriver instance
capabilities: {
browserName: "chrome",
},
// Define the framework to be use
framework: "jasmine",
// Define the Spec patterns. This is relative
// to the current working directory when
// protractor is called
specs: ["test.js"],
// Define the options to be used with Jasmine
jasmineNodeOpts: {
defaultTimeoutInterval: 30000,
},
// Define the baseUrl for the file
baseUrl: "file://" + __dirname + "/",
onPrepare: function () {
browser.resetUrl = "file://";
},
};
Paso 2: Crearemos el archivo HTML llamado test.html que contendrá el elemento a probar.
HTML
<!DOCTYPE html> <html> <body> <!-- The element to be tested --> <div id="hidden-div" style="display: none;"> Inner text </div> </body> </html>
Paso 3: Crearemos el archivo test.js. En este archivo, accederemos al archivo HTML anterior y luego verificaremos si el elemento está oculto o no. El navegador es un global creado por Protractor, que se utiliza para los comandos a nivel de navegador, como la navegación con el método browser.get() . La sintaxis describe e it proviene del marco Jasmine, donde describe es una descripción de su prueba mientras define los pasos para la prueba.
Javascript
describe('Protractor Demo App', function () {
it('should have a title', function () {
// Disable waiting for Angular render update
browser.waitForAngularEnabled(false)
// Get the HTML file that has to be tested
browser.get('test.html');
// Test if the element is hidden
let hiddenDiv = element(by.id('hidden-div'));
// This test will pass only when
// element is hidden
expect(hiddenDiv.isDisplayed()).toBe(false);
});
});
Paso 4: Finalmente, ejecutaremos el archivo de configuración usando el comando que se indica a continuación. Esto ejecutará el archivo de configuración y la prueba se ejecutará como se muestra en el resultado a continuación.
protractor conf.js
Producción:
