Protractor es un marco de prueba de extremo a extremo desarrollado para aplicaciones AngularJS y Angular. Básicamente ejecuta las pruebas contra la aplicación que está interactuando con ella como lo haría un usuario real, ejecutándose en un navegador real. En el siguiente ejemplo, vamos a obtener las coordenadas x e y de un elemento y verificar si es como se esperaba o no.
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 las coordenadas x e y de un elemento son las esperadas o no.
- Todas las pruebas de Protractor tendrán un archivo que contiene la configuración y este archivo será el archivo inicial que iniciará la prueba.
- Vamos a crear este archivo con el nombre conf.js.
Ejemplo: Nombre de archivo: conf.js
Javascript
exports.config = {
// Capabilities values for
// webdriver instance
capabilities: {
'browserName': 'chrome'
},
// Framework value
framework: 'jasmine',
// The Spec patterns are relative to the
// current working directory when
// protractor is called.
specs: ['test.js'],
// Options which are passed to our
// framework ie. Jasmine.
jasmineNodeOpts: {
defaultTimeoutInterval: 30000
},
// File URL
baseUrl: 'file://' + __dirname + '/',
onPrepare: function () {
browser.resetUrl = 'file://';
}
};
Ahora vamos a crear nuestro archivo HTML llamado test.html que contendrá el elemento a probar.
Nombre de archivo: prueba.html
HTML
<!DOCTYPE html> <html lang="en"> <body> <!-- The element to be tested --> <div id="foo" style="position: absolute; top:20px; left: 15px"> Inner text </div> </body> </html>
Ahora vamos a crear nuestro archivo de prueba test.js. En este archivo, vamos a acceder a un archivo HTML y luego obtener las coordenadas x e y, y comprobaremos si está configurado en el archivo HTML o no. El navegador es un global creado por Transportador.
Jasmine framework proporciona la función describe() y la función it() donde describe es una descripción de su prueba mientras que son los pasos para la prueba.
Nombre de archivo: prueba.js
Javascript
describe('Protractor Demo App', function () {
it('should have a title', function () {
// Disabling waiting for angular
browser.waitForAngularEnabled(false)
// Get our html file for testing
browser.get('test.html');
// Test if the element have required coordinates
let foo = element(by.id('foo'));
expect(foo.getLocation()).toEqual(
jasmine.objectContaining({
x: 15,
y: 20
}));
});
});
Ejecute el archivo conf.js con el siguiente comando:
protractor conf.js
Producción:
