Il più grande ostacolo nel testare ExtJS con Selenium è che ExtJS non esegue il rendering di elementi HTML standard e l'IDE Selenium genererà ingenuamente (e giustamente) comandi mirati a elementi che agiscono solo come decorazioni - elementi superflui che aiutano ExtJS con l'intero desktop- guardare e sentire. Ecco alcuni suggerimenti e trucchi che ho raccolto durante la scrittura del test automatico del selenio su un'app ExtJS.
Suggerimenti generali
Individuazione degli elementi
Quando si generano casi di test Selenium registrando le azioni dell'utente con Selenium IDE su Firefox, Selenium baserà le azioni registrate sugli ID degli elementi HTML. Tuttavia, per la maggior parte degli elementi cliccabili, ExtJS utilizza ID generati come "ext-gen-345" che probabilmente cambieranno in una visita successiva alla stessa pagina, anche se non sono state apportate modifiche al codice. Dopo aver registrato le azioni dell'utente per un test, è necessario uno sforzo manuale per eseguire tutte queste azioni che dipendono dagli ID generati e per sostituirli. Esistono due tipi di sostituzioni che possono essere effettuate:
Sostituzione di un localizzatore di ID con un localizzatore di CSS o XPath
I localizzatori CSS iniziano con "css =" e i localizzatori XPath iniziano con "//" (il prefisso "xpath =" è facoltativo). I localizzatori CSS sono meno dettagliati e più facili da leggere e dovrebbero essere preferiti rispetto ai localizzatori XPath. Tuttavia, ci possono essere casi in cui è necessario utilizzare i localizzatori XPath perché un localizzatore CSS semplicemente non può tagliarlo.
Esecuzione di JavaScript
Alcuni elementi richiedono più delle semplici interazioni mouse / tastiera a causa del complesso rendering eseguito da ExtJS. Ad esempio, un Ext.form.CombBox non è realmente un <select>elemento ma un input di testo con un elenco a discesa separato che si trova da qualche parte nella parte inferiore dell'albero del documento. Per simulare correttamente una selezione ComboBox, è possibile simulare prima un clic sulla freccia del menu a tendina e poi fare clic sull'elenco che compare. Tuttavia, localizzare questi elementi tramite CSS o XPath locator può essere complicato. Un'alternativa è individuare il componente ComoBox stesso e chiamare i metodi su di esso per simulare la selezione:
var combo = Ext.getCmp('genderComboBox'); // returns the ComboBox components
combo.setValue('female'); // set the value
combo.fireEvent('select'); // because setValue() doesn't trigger the event
In Selenium il runScriptcomando può essere utilizzato per eseguire l'operazione di cui sopra in una forma più concisa:
with (Ext.getCmp('genderComboBox')) { setValue('female'); fireEvent('select'); }
Affrontare AJAX e rendering lento
Selenium ha versioni "* AndWait" per tutti i comandi per l'attesa del caricamento della pagina quando un'azione dell'utente si traduce in transizioni o ricariche della pagina. Tuttavia, poiché i recuperi AJAX non comportano caricamenti di pagine effettivi, questi comandi non possono essere utilizzati per la sincronizzazione. La soluzione consiste nell'utilizzare indizi visivi come la presenza / assenza di un indicatore di avanzamento AJAX o l'aspetto di righe in una griglia, componenti aggiuntivi, collegamenti ecc. Ad esempio:
Command: waitForElementNotPresent
Target: css=div:contains('Loading...')
A volte un elemento apparirà solo dopo un certo periodo di tempo, a seconda della velocità con cui ExtJS esegue il rendering dei componenti dopo che un'azione dell'utente si traduce in una modifica della vista. Invece di usare ritardi arbitrari con il pausecomando, il metodo ideale è quella di aspettare fino a quando l'elemento di interesse viene alla nostra portata. Ad esempio, per fare clic su un elemento dopo aver atteso che venga visualizzato:
Command: waitForElementPresent
Target: css=span:contains('Do the funky thing')
Command: click
Target: css=span:contains('Do the funky thing')
Affidarsi a pause arbitrarie non è una buona idea poiché le differenze di temporizzazione che derivano dall'esecuzione dei test in browser diversi o su macchine diverse renderanno i casi di test instabili.
Elementi non cliccabili
Alcuni elementi non possono essere attivati dal clickcomando. È perché il listener di eventi si trova effettivamente sul contenitore, a guardare gli eventi del mouse sui suoi elementi figli, che alla fine si espandono fino al genitore. Il controllo struttura a schede è un esempio. Per fare clic su una scheda, è necessario simulare un mouseDownevento sull'etichetta della scheda:
Command: mouseDownAt
Target: css=.x-tab-strip-text:contains('Options')
Value: 0,0
Validazione sul campo
I campi modulo (componenti Ext.form. *) Che hanno associato espressioni regolari o tipi v per la convalida attiveranno la convalida con un certo ritardo (vedere la validationDelayproprietà che è impostata su 250 ms per impostazione predefinita), dopo che l'utente ha inserito il testo o immediatamente quando il campo perde focus - o sfoca (vedere la validateOnDelayproprietà). Per attivare la convalida del campo dopo aver emesso il comando di tipo Selenium per inserire del testo all'interno di un campo, è necessario eseguire una delle seguenti operazioni:
Attivazione della convalida ritardata
ExtJS attiva il timer del ritardo di convalida quando il campo riceve eventi di keyup. Per attivare questo timer, è sufficiente emettere un evento keyup fittizio (non importa quale chiave usi poiché ExtJS lo ignora), seguito da una breve pausa che è più lunga del validationDelay:
Command: keyUp
Target: someTextArea
Value: x
Command: pause
Target: 500
Attivazione della convalida immediata
Puoi iniettare un evento di sfocatura nel campo per attivare la convalida immediata:
Command: runScript
Target: someComponent.nameTextField.fireEvent("blur")
Verifica dei risultati della convalida
Dopo la convalida, è possibile verificare la presenza o l'assenza di un campo di errore:
Command: verifyElementNotPresent
Target: //*[@id="nameTextField"]/../*[@class="x-form-invalid-msg" and not(contains(@style, "display: none"))]
Command: verifyElementPresent
Target: //*[@id="nameTextField"]/../*[@class="x-form-invalid-msg" and not(contains(@style, "display: none"))]
Notare che il controllo "display: none" è necessario perché una volta che un campo di errore è mostrato e quindi deve essere nascosto, ExtJS nasconderà semplicemente il campo di errore invece di rimuoverlo completamente dall'albero DOM.
Suggerimenti specifici per elemento
Fare clic su un pulsante Ext. Form
opzione 1
Comando: click Target: css = button: contains ('Save')
Seleziona il pulsante in base alla sua didascalia
opzione 2
Comando: fai clic su Target: css = # pulsante save-options
Seleziona il pulsante in base al suo ID
Selezione di un valore da un Ext.form.ComboBox
Command: runScript
Target: with (Ext.getCmp('genderComboBox')) { setValue('female'); fireEvent('select'); }
Per prima cosa imposta il valore e quindi attiva in modo esplicito l'evento select nel caso in cui siano presenti osservatori.