Trova elementi di dati attributi

Question

sto migliorando il mio test con RSpec e capybara-webkit, cercando di eliminare tutti i css e xpath selettori come

find('#edit_user > div:nth-child(7) > div > div > button').click 

e sto cercando la migliore opzione per sostituirli.

Stavo per usare il css class degli elementi ma alcuni tester "pro" capybara hanno detto che questa non è l'opzione migliore.

Quindi la mia domanda è: posso utilizzare gli attributi data nei miei test?
Se ho un elemento

<button name="button" type="submit" class="button last" data-test="edit.update">Update/button> 

sarò in grado di fare

find('edit.update').click 

?

E pensi che sia una buona idea? Se hai più idee/informazioni su questo argomento, sentiti libero di commentare!

Answer 1

Per individuare gli elementi tramite il loro attributo data- *, è necessario utilizzare un selettore CSS o XPath.

Per il CSS-selettore:

find('button[data-test="edit.update"]').click 

Per XPath:

find('//button[@data-test="edit.update"]').click 

Sia o non sia una buona idea in realtà dipende l'applicazione. Vuoi scegliere qualcosa che identifichi univocamente l'elemento. Se "edit.update" non sarà univoco, non sarebbe una buona scelta da usare. L'attributo class andrebbe bene se il pulsante avesse una classe univoca, che "pulsante" e "ultimo" non sono suscettibili di essere.

L'approccio migliore è proprio quello di utilizzare gli attributi statici id come dovrebbero essere univoci all'interno della pagina e sono meno propensi a cambiare. Il metodo find supporta anche l'individuazione degli elementi tramite id, il che significa che non è necessario scrivere selettori CSS o XPath.

Answer 2

La risposta data da Justin Ko è corretta, volevo solo aggiungere qualcosa di leggermente più avanzato che può aiutare con la leggibilità del test in alcune situazioni. Puoi aggiungere i tuoi "selettori" a Capybara, quindi se vuoi davvero selezionare le cose con un attributo di test dei dati (non è una grande idea dato che non vuoi davvero aggiungere attributi solo per i test) molto potresti fare

Capybara.add_selector(:dt) do 
    css { |v| "*[data-test=#{v}]" } 
end 

che consentirebbe

find(:dt, 'edit.update') 

questo può rendere i test comprensibile ma anche di limitare CSS o percorso query complesse a un singolo posto nel codice di prova. È quindi possibile definire un metodo come

def find_by_dt(value) 
find(:dt, value) 
end 

, se si preferisce il look di find_by_dt ...) per trovare (: dt, ...)

È inoltre possibile aggiungere filtri e le descrizioni alle proprie selezioni per una maggiore flessibilità, una migliore descrizioni degli errori, ecc - vedi https://github.com/jnicklas/capybara/blob/master/lib/capybara/selector.rb per il built-in selettori forniti da capibara