Introducción: 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 se ha desvanecido por completo o no.
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 elemento se ha desvanecido por completo 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;">
Inner text
</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 se desvanezca por completo. El navegador es un global creado por Protractor, que se utiliza para los comandos a nivel del navegador, como la navegación con browser.get( ) método. La descripción y su sintaxis provienen 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", async function () {
// 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"));
// Wait for the fade in process to complete
await browser.driver.wait(
async function () {
return (await element.getCssValue("opacity")) === "1";
},
30000,
"Taking too long to fade in"
);
expect(hiddenDiv.isDisplayed()).toBe(true);
});
});
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