Modo corretto per ottenere un conteggio degli elementi corrispondenti in Nightwatch?

Question

Sto provando a verificare se un'app di Todo ha il numero giusto di elementi.

I documenti sembrano trattare quasi esclusivamente di singoli elementi, quindi ho dovuto utilizzare le funzioni del protocollo selenio. Questo sarebbe il modo giusto per testare il conteggio dei selettori corrispondenti (in questo caso, verificando la presenza di 2 elementi li)?

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

Questo funziona nel mio test, ma non ero sicuro se ci fossero grattacapi intorno utilizzando un callback per questo. Inoltre non sono sicuro del perché Nightwatch non abbia funzioni di supporto che si occupano di più di un elemento.

Answer 1

Giusto per rassicurarvi che faccio una cosa simile quando si cerca di afferrare tutti gli elementi corrispondenti, ad esempio:

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 2

In alternativa, se si vuole essere sicuri che n numero di elementi esiste, è possibile utilizzare una combinazione di :nth-of-type/:nth-child selettori e nightwatch expect.

Per esempio, se si desidera verificare se #foo ha nove figli diretti:

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

O se #bar ha tre diretti article figli:

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

Answer 3

ho trovato la seguente soluzione molto elegante all'interno un modello VueJS. Mostra come aggiungere uno custom assertion a Nightwatch che conta il numero di elementi restituiti da un selettore. Vedi http://nightwatchjs.org/guide#writing-custom-assertions per dettagli su come scrivere asserzioni personalizzate in Nightwatch.

Una volta installato, l'utilizzo è semplice come:

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

Il 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); 
    }); 
    } 
} 

Questo codice è stato aggiunto al vuejs-templates by yyx990803 nel 2016. Così pieno credito va a yyx990803.

Answer 4

mi sono adattato Chris K's answer per supportare le espressioni XPath utilizzando il metodo built-in 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) 
    } 
} 

Per le istruzioni d'uso e crediti vedere his answer