I am trying to use Spectron to test my Electron application. The documentation says when trying to find the nth child, you can use an nth child selector, or get all children that match selector using $$ and then use index operator ie $$ ("foo")[0] gets first foo. DOCS
With that knowledge, i expect the following code to output: BAR
I can't get this to work, i try the following:
const foo = ".foo";
const fooElements = app.client.$$ (foo);
console.log ("FOOELEMENTS", await TP (app.client.getHTML (foo)));
console.log ("BAR", fooElements[0].getText (".bar"));
And get the following output:
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)
As you can see, the output HTML indeed has several .foo divs, but when i try to access the first one, it says fooElements[0] is undefined
sideNote (which should not be relevant): TP is an alias for a function i wrote called toPromise which lets me await the webdriver promises, because TypeScript is confused by the way they are implemented:
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;
};
}
Any idea what i am doing wrong? Or a suggested alternative? I'd prefer to avoid nth-child selectors if possible.
EDIT: changed to class
First off, you're example is intriguing. I don't know how you got that piece of
<html>to be ran. Theidvalue must be unique:Your code should work after a small change, just remove the
#barselector. You were passing the selector to theELEMENTobject, but it already contains that information via the value of theselectorkey.Output (blocked test in debug-mode):
Alternatively, you could have done this:
let retText2 = browser.getText('span[connectqa-device="installed"]')> let retText2 = browser.getText(elems[0].selector). The second example of course is only for didactic purposes, as you'd probably never want to to it that way.Hope it helps. Cheers!