Come trovare elementi html specifici, AngularJS, goniometro

Question

Sono nuovo di AngularJS/goniometro quindi qualsiasi consiglio su questo è molto apprezzato. Poiché Angular JS istanzia elementi html tramite le direttive ng, non ci sono "id" che mi consentono di localizzare elementi specifici. (Ovviamente voglio fare questo contenuto per convalidare, clic su di essi, ecc) miei js angolari snippet assomiglia:

<div ng-repeat="item in myList"> 
    <span ng-if="item.category == 'lights'"> 
     <img src="../../../{{item.icon}}"/> 
     &nbsp<span id="foo">{{item.name}}</span>&nbsp 
    </span> 
</div> 

che sto cercando di individuare gli elementi {{}} item.name come ho iterare la lista con questo:

element.all(by.repeater('item in myList')).then(function(rows) { 
    noOfItems = rows.length; 
    for (i = 0; i < noOfItems; i++) { 
     row = element.all(by.repeater('item in myList')).get(i); 
     row.isElementPresent(By.id('foo')).then(function (isP) { 
      if (isP) { 
       console.log("foo exists?" + isP); 
       row.findElement(By.id('foo')).then(function (el) { 
        el.getText(txt).then(function (txt) { 
         console.log("Item name " + txt); 
        }); 
       }); 
      } 
     }); 
    } 
}); 

Dalla ispezione l'elemento 'riga' sembra essere oggetto di selenio così invoco 'isElementPresent (...) e questo funziona alla grande. Rileva il numero corretto di elementi "pippo". Tuttavia, quando viene eseguito row.findElement (...), la specifica del test termina prematuramente. (Nessun errore, finisce)

So che ci saranno più elementi "pippo" nel documento, ma speravo che dal momento che vengano interrogati all'interno di un elemento sub html, (riga) questo potrebbe funzionare.

Eventuali suggerimenti/soluzioni alternative?

Answer 1

Prima di rispondere alla tua domanda specifica, un paio di cose sembrano essere sfortunate qui.

1) Non penso che la linea 4 di cui sopra sia ciò che si vuole fare. Tornerà al browser per ogni riga, rieseguendo la query by.repeater ogni volta. Tutto ciò che devi veramente fare è row = rows[i].

2) Meglio ancora si può semplicemente sostituire le prime quattro righe con element.all(by.repeater('item in myList')).each(function(row){

Per quanto riguarda la questione di trovare l'arco foo nel contesto, si potrebbe provare a trovare by.css(':scope #foo'). Questo dovrebbe darti una ricerca per id = 'pippo' nell'ambito dell'elemento corrente.

Answer 2

Un altro approccio per trovare gli elementi angolari generati correttamente è utilizzare il localizzatore by.js. Questo non è un localizzatore specifico di Goniometro ma uno fornito dal WebDriverJS sottostante, quindi devi guardare there per i documenti.

In sostanza by.js consente di fornire una funzione javascript che verrà eseguita sul browser per trovare l'elemento che si sta cercando. A sua volta, il javascript può interrogare gli elementi DOM per trovare e ispezionare gli ambiti $ Angular che sono stati collegati a loro e quindi trovare elementi che hanno specifici valori di scope. Ad esempio, si può quindi trovare un elemento associato a un recordId reale che è presente nell'oscilloscopio ma non è mai stato reso in HTML. Questo è molto utile perché, dato il funzionamento angolare, raramente hai bisogno di rendere questi tipi di ID in HTML, ma i test devono ancora essere in grado di trovare gli elementi che li rappresentano!

Answer 3

var eleB = element(by.css('.ui-grid-render-container.ng-isolate-scope.ui-grid-render-container-body')); 

eleB.element(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index').row(10)).$('.ui-grid-cell.ng-scope.ui-grid-coluiGrid-000B').getText().then(function(arr){ 
      console.log("-------------------\n" + arr); 
});