Spectron/WebdriverIO ntes Kind mit $$ [n] anstelle des Selektors

Question

Ich versuche Spectron zu verwenden, um meine Electron-Anwendung zu testen. Die Dokumentation sagt, wenn Sie versuchen, das n-te Kind zu finden, können Sie einen n-ten Child-Selektor verwenden oder alle untergeordneten Selektoren mit $$ abrufen und dann den Indexoperator verwenden, dh $$ ("foo")[0] wird zuerst foo. DOCS

Mit diesem Wissen, erwarte ich den folgenden Code zur Ausgabe: BAR ich nicht, diese Arbeit bekommen, ich versuche folgendes:

const foo = ".foo"; 
const fooElements = app.client.$$ (foo); 
console.log ("FOOELEMENTS", await TP (app.client.getHTML (foo))); 
console.log ("BAR", fooElements[0].getText (".bar")); 

und nutzen Sie die folgende Ausgabe:

console.log components\pages\analysis\__test__\Analysis.spectron.ts:44 
    FOOELEMENTS [ '<div class="foo"><div class="bar">BAR</div><div class="baz">BAZ</div></div>', 
    '<div class="foo"><div class="bar">BAR2</div><div class="baz">BAZ2</div></div>', 
    '<div class="foo"><div class="bar">BAR3</div><div class="baz">BAZ3</div></div>' 
    '<div class="foo"><div class="bar">BAR4</div><div class="baz">BAZ4</div></div>' ] 

console.log components\pages\analysis\__test__\Analysis.spectron.ts:50 
    EXCEPTION TypeError: Cannot read property 'getText' of undefined 
     at components\pages\analysis\__test__\Analysis.spectron.ts:45:44 
     at Generator.next (<anonymous>) 
     at fulfilled (components\pages\analysis\__test__\Analysis.spectron.ts:4:58) 
     at <anonymous> 
     at process._tickDomainCallback (internal/process/next_tick.js:228:7) 

Wie Sie sehen können, die HTML-Ausgabe hat in der Tat mehrere .foo divs, aber wenn ich versuche, den ersten zu gelangen, heißt es fooElements[0] ist undefined

Nebenbei bemerkt (die nicht relevant sein sollte): TP ist ein Alias ​​für eine Funktion i toPromise genannt schrieb, die mir die WebDriver Versprechungen erwarten lässt, weil Typoskript von der Art und Weise verwirrt wird sie durchgeführt werden:

export async function toPromise<T> (client: Webdriver.Client<T>) 
{ 
    return client as any as Promise<T>; 
} 

// Promise 
    interface Client<T> { 
     finally(callback: (...args: any[]) => void): Client<T>; 

     then<P>(
      onFulfilled?: (value: T) => P | Client<P>, 
      onRejected?: (error: any) => P | Client<P> 
     ): Client<P>; 

     catch<P>(
      onRejected?: (error: any) => P | Client<P> 
     ): Client<P>; 

     inspect(): { 
      state: "fulfilled" | "rejected" | "pending"; 
      value?: T; 
      reason?: any; 
     }; 
    } 

Beliebig Idee, was ich falsch mache? Oder eine vorgeschlagene Alternative? Ich würde lieber N-Kind-Selektoren vermeiden, wenn möglich.

EDIT: geändert Klasse

Answer 1

First off, du bist Beispiel faszinierend ist. Ich weiß nicht, wie du das Stück zum Laufen bekommen hast. Der id Wert muss eindeutig sein:

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

Der Code sollte nach einer kleinen Änderung umgehen, entfernen Sie einfach den #bar Selektor. Sie haben den Selektor an das Objekt ELEMENT übergeben, aber er enthält diese Information bereits über den Wert des Schlüssels selector.

let locator = 'span[connectqa-device="installed"]' 

browser.debug() 

Ausgang (blockiert Test in debug-mode): let retText2 = browser.getText('span[connectqa-device="installed"]')> let retText2 = browser.getText(elems[0].selector):

> let elems = $$(locator) 
[18:10:22] COMMAND  POST  "/wd/hub/session/775b024e-0b6a-4a60-a5b2-26d4df961d0a/elements" 
[18:10:22] DATA    {"using":"css selector","value":"span[connectqa-device=\"installed\"]"} 
[18:10:22] RESULT    [{"element-6066-11e4-a52e-4f735466cecf":"c6719646-30da-43ff-9b17-40c074b4988a"},{"element-6066-11e4-a52e-4f735466cecf":"d5f8acf2-8f4f-4554-9fe6-7f863555f5b5"},{"element-6066-11e4-a52e-4f735466cecf":"53ff9b0a-2a88-4b13-9e54-9c54411c03c5"}] 

> elems[0] 
{ ELEMENT: 'c6719646-30da-43ff-9b17-40c074b4988a', 
    'element-6066-11e4-a52e-4f735466cecf': 'c6719646-30da-43ff-9b17-40c074b4988a', 
    selector: 'span[connectqa-device="installed"]', 
    value: { ELEMENT: 'c6719646-30da-43ff-9b17-40c074b4988a' }, 
    index: 0 } 
> 
> elems[0].selector 
'span[connectqa-device="installed"]' 
> 
> elems[0].getText() 
[18:10:54] COMMAND  GET  "/wd/hub/session/775b024e-0b6a-4a60-a5b2-26d4df961d0a/element/c6719646-30da-43ff-9b17-40c074b4988a/text" 
[18:10:54] DATA    {} 
[18:10:54] RESULT    "Installed" 
'Installed' 

Alternativ könnten Sie haben dies getan. Das zweite Beispiel dient natürlich nur zu didaktischen Zwecken, da Sie es wahrscheinlich nie so wollen.

Ich hoffe, es hilft. Prost!