Flakiness beim Versuch, Tabellenzeilendaten nach einer asynchronen Operation zu lesen

Question

Ich habe eine Testsuite, die Auswahl von einigen ausgewählten Eingaben (unter Verwendung von Angular Material) umfasst, die wiederum eine Tabelle auslösen, um einige Ergebnisse nach einer asynchronen Operation zu rendern schließt ab.

Sobald der Vorgang abgeschlossen ist, ich bin versucht, die Werte einer einzelnen Tabellenzeile zu lesen, so ich einige Behauptungen auf den Werten in der Tabellenzelle durchführen kann.

I Verwendung von ein paar Helfer mache, von denen einer einen Wert Zeichenfolge nimmt und verwendet XPath-Abfrage, um zu versuchen eine Tabellenzeile zu extrahieren, wo eine Zeile findet Tabellenzelle enthält, die in den übergebenen enthält Zeichenfolge.

Das Problem, das ich bin vor ist, dass ich expect(cells).toBeDefined() meine Erwartung undefiniert zurückkehrt. Dies passiert intermittierend, aber ich würde sagen, dass es 75% der Zeit fehlschlägt, also denke ich, dass der xpath-Ansatz wahrscheinlich nicht geeignet ist, oder ich zumindest versuchen sollte, auf mindestens eine Tabellenzeile von Daten zu warten, bevor Assertions versucht werden. Es ist am schlechtesten auf unserem ci-Server (Jenkins), wo es sehr selten passiert, also fühlt es sich für mich wie ein Zeitproblem an.

Der Screenshot von Transporteur auf dem Testfehler gemacht ist wie folgt:

Hier wird die Vergleichsperiode Eingabe aus und die Tabelle ausgewählt hat einen einzelnen Datensatz zeigen, so also, warum ich das Gefühl, Dies ist ein Timing-Problem, bei dem die Datenzeile in der Tabelle zwischen dem Zeitpunkt, zu dem das asynchrone Abrufen von Daten abgeschlossen ist, und der erwarteten Ausführung nicht ordnungsgemäß gerendert wurde.

Hat jemand irgendwelche Vorschläge von Dingen, die ich hier ausprobieren könnte? Irgendwelche empfohlenen Rezepte, denen ich folgen sollte?

Answer 1

Ich schlage use cssContainingText as locator. Es scheint viel besser geeignet für Ihren Fall

Sie können einmal diese Weise nur durch das Element-Chaining die gewünschte Zeile erhalten.

Es wird so etwas wie dieses:

cells = element(by.cssContainingText('td span', 'TAYSIDE')).element(by.xpath('ancestor::tr')).all(by.css('td')); 
//first part selects the element of the desired row 
//second part of the chain selects the next <tr>-parent-element above 
//third part selects all td-elements below the selected <tr>-element 

//alternatives: 
cells = element(by.cssContainingText('td span', value)).element(by.xpath('..')).$$('td'); 
//by.xpath('..') to select direct parent 
//"$$()" is short for "element.all(by.css())" 

Insgesamt es würde wie folgt aussehen:

describe("full scenario", function(){ 
    var cells; 

    beforeAll(function(){ 
     common.selectComparisonPeriod(initialPeriod); 
     //probably no need to use "then()" here. 
     browser.wait(helper.waitForElementToHide(common.spinner), 5000); 
     cells = element(by.cssContainingText('td span', value)) 
      .element(by.xpath('ancestor::tr')) 
      .$$('td'); 
    }); 
    it("executes test", function(){ 
     expect(cells).toBeDefined(); 
    }); 
}); 

weitere Optionen:

• Verwendung it() statt beforeAll()
• verwenden, um eine browser.wait() -condition Zellen-Definition

in Code zu gewährleisten:

describe("full scenario", function(){ 
    var cells; 

    //instead beforeAll, use another it()-block 
    it("shall load the correct grid", function(done){ 
     common.selectComparisonPeriod(initialPeriod); 
     //probably no need to use "then()" here. 
     browser.wait(helper.waitForElementToHide(common.spinner), 5000); 
     cells = element(by.cssContainingText('td span', value)) 
      .element(by.xpath('ancestor::tr')) 
      .$$('td'); 
     done(); 
    }); 
    it("executes test", function(){ 
     //simplest to just wait for all promises to be resolved (if controlFlow enabled) 
     browser.waitForAngular(); 
     //waits until cells is defined, but for max 5 secs 
     browser.wait(typeof(cells) != 'undefined', 5000); 
     expect(cells).toBeDefined(); 
    }); 
});