2013-08-05 3 views
5

Vorrei contare il numero di, diciamo, elementi div con classe 'nice'. Ho il selettore div.nice, ma non so quale classe/metodo casperjs usare.phantomjs/casperjs conteggio elementi DOM

Esiste un metodo tester.assertElementCount, ma c'è qualcosa che restituisce semplicemente il numero di elementi?

+0

Penso che devi creare la tua funzione per questo. Sembra che il modo più semplice per farlo sia controllare se l'elemento esiste e usare il css ": nth-of-type (i)". Ho postato una risposta qui sotto per questo. –

risposta

4

Se è possibile utilizzare jQuery sua abbastanza semplice:

var count = $('div.classname').length; 

Trovato un SO Post che sembra spiegare utilizzando jQuery con casperjs, non ho alcuna esperienza con casperjs quindi non posso aiutare molto lì.

+0

'FAIL ReferenceError: Impossibile trovare la variabile: $'. come posso "installare" jquery in casperjs? – ducin

+0

@tkoomzaaskz ha modificato la risposta, spero che aiuti. –

+0

sì, ha aiutato, grazie! – ducin

5

Proprio

document.querySelectorAll("div.nice").length 
+0

hmm, quindi non devo farlo all'interno della funzione 'evaluate'? – ducin

+0

No, questo è il 'documento' all'interno del contesto di valutazione della pagina. –

+5

Restituisce '0' per me. – StockB

3

Uno degli esempi per CasperJS 1.1-beta3 coinvolge checking the number of Google search results for CasperJS. Si riferisce a __utils__.findAll(), che accetta un selettore come argomento. Esso consente di controllare il numero di elementi restituiti utilizzando la proprietà length disponibile a qualsiasi oggetto JS:

test.assertEval(function() { 
    return __utils__.findAll("h3.r").length >= 10; 
}, "google search for \"casperjs\" retrieves 10 or more results"); 

non l'ho mai provato, ma sembra che questa funzione di utilità può essere utilizzato al di fuori di un condizionale, ed è ti permetterà di riportare il numero di elementi senza usare jQuery, come una risposta precedente raccomandata.

+0

Tuttavia, le funzioni '__utils__' sono iniettate _ nell'ambiente DOM remoto_, quindi possono essere lette solo all'interno di una funzione passata come parametro a' casper.evaluate() 'o' test.assertEval() '. – lfurini

+1

Sì, è vero. Quello che intendevo è che usare '__utils__' al di fuori di un condizionale va bene (cioè come un meccanismo generale di logging/debugging). Non intendevo implicare che potresti usarlo al di fuori dei blocchi 'evaluate' o' assertEval'. Posso aggiornare la mia risposta in qualche modo per renderla più chiara? –

+1

Forse potresti aggiungere un piccolo esempio, come questo: 'var count = this.evaluate (function() {return __utils __. FindAll (" h3.r "). Length;});' – lfurini

0

è anche possibile utilizzare assertElementCount per affermare il conteggio del elment

test.assertElementCount("div.nice", 1) 
+0

Questo non risponde alla domanda "come posso contare questi elementi". – lfurini

3

Casper fornisce getElementsInfo, è possibile utilizzare l'attributo lunghezza per ottenere il numero di elementi. ad es.

casper.getElementsInfo('myElement').length 
+1

dovrebbe essere un commento –

0

Non ho trovato le risposte sopra per essere utile alla mia causa.

Penso che l'obiettivo fosse contare il numero di elementi senza dover valutare il codice js nel contesto della pagina, il che potrebbe essere frustrante per gli straordinari e avere variabili e funzioni in conflitto.

Invece, sarebbe bello sfruttare il contesto di automazione di Casper. Questo può essere fatto con una combinazione di ".exists()" e il css pseudo-selettore ": nth-of-type (i)"

Il seguente codice fa ...

var counter = 1;   //set to one, for css selector setup 

casper.then(function() { //wait your turn 
    //loop through our element 
    while(casper.exists('div span:nth-of-type(' + counter + ')')) { 
     counter++;  //count the results 
    } 
}); 

Potresti rendere questa una funzione e passare tutti gli argomenti, o semplicemente copiarla e incollarla come un passo.

La parte migliore, è possibile seguirla con un'istruzione ripetuta per un ciclo piuttosto interessante.

casper.then(function(){ 
    this.repeat(counter, function() { 
     console.log("Another one - item #" + counter); 
    }); 
});