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
