Posso selezionare un elemento in base alla posizione dell'array in nightwatch.js?

Question

Sto cercando di automatizzare alcuni dei miei processi di test e sono relativamente nuovo a Nightwatch.js e javascript. C'è un modo in cui posso fare clic su un elemento in base alla sua classe e posizione nell'array successivo che verrà restituito se ci sono più elementi con la stessa classe.

Per esempio prendere il seguente codice HTML: -

<div class="clickable-button"><p>Some Text</p></div> 
<div class="clickable-button"><p>Some Text 2</p></div> 
<div class="clickable-button"><p>Some Text 3</P></div> 

Se io uso gli strumenti di sviluppo di cromo ed eseguire il seguente comando nella console: -

$('.clickable-button') 

Si restituisce un array di tre elementi elencati sopra.

Vorrei fare clic sul primo elemento <div> e voglio sapere se esiste un modo per farlo utilizzando un selettore CSS? Non riesco a selezionare tramite il testo visualizzato all'interno del tag <p> poiché si tratta di dati dinamici.

ho provato i seguenti comandi in Nightwatch: -

browser.click('.clickable-button'[0]) 

browser.click('clickable-button[0]') 

Nessuna di queste opzioni funzionano. Ogni aiuto o consiglio sarebbe apprezzato.

Answer 1

Si potrebbe forse usare :nth-of-type

browser.click('.clickable-button:nth-of-type(1)'); 

BTW :nth-of-type fa parte del CSS3 in modo che non è supportato dai browser più vecchi.

Answer 2

Oltre a utilizzare selettore CSS, XPath è un'altra opzione, si può fare

browser .useXpath() //ignore this line if you already selected xpath as strategy .click('(//div[@class="clickable-button"])[1]')

per individuare il primo pulsante. Reference