nightwatch.js - marvel - ¿Forma correcta de obtener un recuento de elementos coincidentes en Nightwatch?

nightwatch js tutorial

Question

Estoy tratando de probar si una aplicación de todo tiene el número correcto de elementos.

Los documentos parecen tratar casi exclusivamente con elementos individuales, así que tuve que usar las funciones del Protocolo de Selenium. ¿Sería esta la manera correcta de probar el recuento de los selectores coincidentes (en este caso, verificar los elementos de 2 li)?

client.elements(''css selector'',''#todo-list li'', function (result) {
    client.assert.equal(result.value.length, 2);
});

Esto funciona en mi prueba, pero no estaba seguro de si había errores al usar una devolución de llamada para esto. Tampoco estoy seguro de por qué Nightwatch no tiene funciones de ayuda que traten más de un elemento.

Answer 1

Alternativamente, si desea asegurarse de que n existe una cantidad de elementos, puede usar una combinación de :nth-of-type / :nth-child selectores y expect de nightwatch.

Por ejemplo, si desea probar si #foo tiene nueve hijos directos:

function(browser) {
  browser
    .url(''http://example.com'')
    .expect.element(''#foo > *:nth-child(9)'').to.be.present;
  browser.end();
}

O si #bar tiene tres hijos directos del article :

function(browser) {
  browser
    .url(''http://example.com'')
    .expect.element(''#bar > article:nth-of-type(3)'').to.be.present;
  browser.end();
}

Answer 2

Encontré la siguiente solución muy elegante dentro de una plantilla VueJS. Muestra cómo agregar una aserción personalizada en Nightwatch que cuenta el número de elementos devueltos por un selector. Consulte http://nightwatchjs.org/guide#writing-custom-assertions para obtener detalles sobre cómo escribir aserciones personalizadas dentro de Nightwatch.

Una vez instalado, el uso es tan simple como:

browser.assert.elementCount(''#todo-list li'', 2)

El plugin:

// A custom Nightwatch assertion.
// the name of the method is the filename.
// can be used in tests like this:
//
//   browser.assert.elementCount(selector, count)
//
// for how to write custom assertions see
// http://nightwatchjs.org/guide#writing-custom-assertions
exports.assertion = function (selector, count) {
  this.message = ''Testing if element <'' + selector + ''> has count: '' + count;
  this.expected = count;
  this.pass = function (val) {
    return val === this.expected;
  }
  this.value = function (res) {
    return res.value;
  }
  this.command = function (cb) {
    var self = this;
    return this.api.execute(function (selector) {
      return document.querySelectorAll(selector).length;
    }, [selector], function (res) {
      cb.call(self, res);
    });
  }
}

Este código fue agregado a vuejs-templates por yyx990803 en 2016. Por lo tanto, el crédito completo va a yyx990803 .

Answer 3

Solo para tranquilizarte, hago algo similar cuando intento agarrar todos los elementos coincidentes, por ejemplo:

    browser.elements("xpath","//ul[@name=''timesList'']/h6", function(result){
        els = result.value;
        var i = 0;
        els.forEach(function(el, j, elz){
            browser.elementIdText(el.ELEMENT, function(text) {
                dates[i] = text.value;
                i++;
            });
        });
    });

Answer 4

this.api.elements la respuesta de Chris K para admitir expresiones XPath utilizando el método this.api.elements :

exports.assertion = function elementCount(selector, count) {
  this.message = ''Testing if element <'' + selector + ''> has count: '' + count

  this.expected = count

  this.pass = function pass(val) {
    return val === this.expected
  }

  this.value = function value(res) {
    return res.value.length
  }

  this.command = function command(callback) {
    return this.api.elements(this.client.locateStrategy, selector, callback)
  }
}

Para instrucciones de uso y créditos ver su respuesta.