Verwendung von document.getElementsByClassName in Testcafe

Question

Ich habe ein Menü, das immer die gleiche Struktur hat, aber die IDs können von einer Installation zu einer anderen wechseln. Das einzige, was gleich bleibt, ist die Überschrift (in meinem Fall "Plugins"). Ich nenne die document.getElementsByClassName Funktion mit einem Selector in meinem Test:

var slides = Selector(() =>{ 
    return document.getElementsByClassName("c-p-header-text"); 
}); 

Jede Überschrift eines Menüelement die c-p-header-text Klasse. Hier ist, was ein Menüelement Überschrift wie folgt aussieht:

<div id="ext-comp-1002" class="c-p c-tree c-p-collapsed" style="width: auto;"> 
    <div class="c-p-header c-unselectable c-accordion-hd" id="ext-gen135" style="cursor: pointer;"> 
     <div class="c-tool c-tool-toggle" id="ext-gen140">&nbsp;</div> 
     <img src="/backEnd/images/s.gif" class="c-p-inline-icon order"><span class="c-p-header-text" id="ext-gen150">Plugins</span> 
    </div> 

Es wäre leicht await t.click("#ext-gen150") zu verwenden, aber es ist nicht sicher, dass es immer diese ID.

hier ist, was ich versuche:

await t 
    .click('#sites__db'); 
var slides = Selector(() =>{ 
    return document.getElementsByClassName("c-p-header-text"); 
}); 
console.log("[DEBUG]" + slides); 
console.log("[DEBUG] found " + slides.length + " elements"); 
for(var i = 0; i < slides.length; i++) 
{ 
    var txtOfCurrElem = slides.item(i).innerText; 
    console.log("[DEBUG "+ i +"] Text: " + txtOfCurrElem); 
} 

Ausführen diesen Tests geben Sie mir die folgende Ausgabe:

[DEBUG]function __$$clientFunction$$() { 
     var testRun = builder.getBoundTestRun() || _testRunTracker2.default.resolveContextTestRun(); 
     var callsite = (0, _getCallsite.getCallsiteForMethod)(builder.callsiteNames.execution); 
     var args = []; 

     // OPTIMIZATION: don't leak `arguments` object. 
     for (var i = 0; i < arguments.length; i++) { 
      args.push(arguments[i]); 
     }return builder._executeCommand(args, testRun, callsite); 
    } 
[DEBUG] found 0 elements 

Der Plan, das Element zu finden ist (mit der Überschrift "Plugins") und dann Klicken Sie darauf, wenn der Test kontinuierlich ist.

Answer 1

ich eine einfache Antwort auf meine Frage gefunden. Ich benutze die .withText Option auf dem Plugins Element klicken:

.click(Selector('span').withText("Plugins")) 

Da dieser Name auch einzigartig ist, ist es immer das richtige Element, das angeklickt wird. Ich weiß nicht, ob es mit der Lösung von @AndreyBelym funktioniert hätte, wenn meine Site keine extJS-Webanwendung wäre.

Answer 2

1. In diesem Fall müssen Sie document.getElementsByClassName nicht verwenden. Sie können stattdessen einfach CSS-Klasse-Selektor:

   var slides = Selector('.c-p-header-text'); 
   

2. Sie die count Eigenschaft verwenden sollten, wenn sie mit einer Reihe von Selektoren zu tun. . Auch Elementeigenschaften, wie exists, count und DOM node state properties Promisified sind, so dass, wenn Sie sie verwenden, nicht in t.expect, sollten Sie das await Schlüsselwort:

   var count = await slides.length; 
   
   console.log("[DEBUG] found " + count + " elements"); 
   
   for(var i = 0; i < count; i++) 
   { 
       var txtOfCurrElem = await slides.nth(i).innerText; 
       console.log("[DEBUG "+ i +"] Text: " + txtOfCurrElem); 
   }