¿Cómo usar el transportador para esperar a que el atributo del elemento cambie a un valor particular?

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 usar Transportador para verificar cómo podemos esperar a que el atributo del elemento cambie a un valor particular.

Requisito previo: instalación y configuración del transportador

Enfoque: Vamos a crear un programa de prueba básico en el que vamos a comprobar cómo podemos esperar a que el atributo del elemento cambie a un valor particular. 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.

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"],
  
  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 creará una nueva pestaña.

Javascript

<!DOCTYPE html>
<html>
  
<body>
    <input type="text" id="text" name="name" 
        placeholder="Enter your Name" required>
  
    <script>
        setTimeout(() => {
            document.getElementsByName('name')[0]
                .placeholder = 'Test text change';
        }, 5000)
    </script>
</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 atributo del elemento cambie a un valor 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 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 wait for attribute's value to change to a particular value",
         async function () {
        
        var EC = protractor.ExpectedConditions;
        // Disable waiting for Angular render update
        await browser.waitForAngularEnabled(false)
    
        // Get the HTML file that has to be tested
        await browser.get('test.html');
           
        // Get the test Element
        var testElement = element(by.id('text'));
  
        // Waits for the attribute's value to change
        // to a particular value
        await browser.wait(async function() {
            return await testElement.getAttribute('placeholder') ===
            'Test text change';}, 10000, 'Takes time to load');
    });
});

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *