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 comprobar cómo podemos esperar a que el texto esté presente en un elemento.
Requisito previo: instalación y configuración del transportador
Planteamiento: Vamos a crear un programa de prueba básico en el que vamos a comprobar si el texto está presente en un elemento 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.
A continuación se muestra la implementación paso a paso del enfoque anterior.
Paso 1: primero debemos crear un archivo conf.js que contenga la configuración que se usará con Protractor.
conf.js
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"],
SELENIUM_PROMISE_MANAGER: false,
// 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.
test.html
<!DOCTYPE html>
<html>
<head>
<title>
fade-in effect on page load using JavaScript
</title>
<script type="text/javascript">
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn() {
setInterval(show, 200);
}
function show() {
var body = document.getElementById("fade-in");
opacity = Number(window.getComputedStyle(body)
.getPropertyValue("opacity"));
if (opacity < 1) {
opacity = opacity + 0.1;
body.style.opacity = opacity
} else {
clearInterval(intervalID);
}
}
</script>
</head>
<body>
<!-- The element to be tested -->
<div id="fade-in"
style="opacity: 0;">
GFG
</div>
</body>
</html>
Paso 3: Crearemos el archivo test.js. En este archivo, vamos a acceder al archivo HTML anterior y luego vamos a esperar a que el elemento tenga un texto en particular. El navegador es un global creado por Protractor, que se usa para comandos a nivel de navegador, como la navegación con el método browser.get(). La descripción y la sintaxis son del marco Jasmine, donde describe es una descripción de su prueba mientras define los pasos para la prueba.
test.js
describe('Protractor Demo App', function () {
it('should have a title', async function () {
var EC = protractor.ExpectedConditions;
// Disable waiting for Angular render update
browser.waitForAngularEnabled(false)
// Get the HTML file that has to be tested
browser.get('test.html');
// Get the fade in element
let fadeIn = element(by.id('fade-in'));
// Waits for the element with id 'myInput' to contain the input 'foo'.
browser.wait(EC.textToBePresentInElementValue(fadeIn, 'GFG'), 5000);
expect(fadeIn.getText()).toEqual('GFG');
});
});
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:
Publicación traducida automáticamente
Artículo escrito por shahbazalam75508 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA