¿Cómo probar si un elemento tiene clase usando Transportador?

Protractor es un marco de prueba de extremo a extremo desarrollado para aplicaciones Angular y AngularJS. 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 probar si un elemento tiene una clase dada 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 un elemento tiene una clase determinada 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.

Vamos a crear este archivo con el nombre conf.js.

conf.js:

JavaScript

exports.config = {
  
    // Capabilities to be passed to the
    // webdriver instance.
    capabilities: {
        'browserName': 'chrome'
    },
  
    // Framework to use. Jasmine is recommended.
    framework: 'jasmine',
  
    // Spec patterns are relative 
    // to the current working directory when
    // protractor is called.
    specs: ['test.js'],
  
    // Options to be passed to Jasmine.
    jasmineNodeOpts: {
        defaultTimeoutInterval: 30000
    },
  
    // Url for the file
    baseUrl: 'file://' + __dirname + '/',
  
    onPrepare: function () {
        browser.resetUrl = 'file://';
    }
};

Ahora vamos a crear nuestro archivo HTML llamado test.html que contendrá el elemento a probar.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Testing</title>
</head>
  
<body>
  
    <!-- The element to be tested -->
    <div id="sample-div" class="geeksforgeeks">
        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 verificar si un elemento tiene una clase dada geeksforgeeks o no.
Browser es un global creado por Protractor, que se utiliza para los comandos de nivel de navegador, como la navegación con browser.get .

describe y su sintaxis es del marco de Jasmine, donde describe es una descripción de su prueba, mientras que son los pasos para la prueba.

El archivo de especificaciones llamado test.js:

JavaScript

describe('Protractor Demo App', function () {
    it('should have a class', function () {
      
        // Disabling waiting for angular
        browser.waitForAngularEnabled(false)
  
        // Get our html file for testing
        browser.get('test.html');
  
        // Test if the element with id 'sample-div'
        // has a class called 'geeksforgeeks'
        let sampleDiv = element(by.id('sample-div'));
          
        expect(sampleDiv.getAttribute('class'))
            .toContain("geeksforgeeks");
    });
});

Finalmente, estamos listos para ejecutar nuestro archivo usando el siguiente comando:
```
protractor conf.js
```

Esto ejecutará el archivo de configuración y la prueba se ejecutará como se muestra en la siguiente captura de pantalla:

Producción:

Publicación traducida automáticamente

Artículo escrito por gurrrung y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

JavaScript

HTML

JavaScript

Deja una respuesta Cancelar la respuesta