Attempting to utilize Spectron for testing my Electron application has been challenging. According to the documentation, in order to locate the nth child element, you can either use an nth-child selector or retrieve all children that match a selector using $$, followed by utilizing the index operator as shown in $$ ("foo")[0] to access the first occurrence of "foo." VIEW DOCS
Assuming this information, I anticipate the following code snippet to display: BAR
However, my attempts to achieve this have been unsuccessful:
const foo = ".foo";
const fooElements = app.client.$$ (foo);
console.log ("FOOELEMENTS", await TP (app.client.getHTML (foo)));
console.log ("BAR", fooElements[0].getText (".bar"));
This results in 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)
In the HTML output, there are indeed multiple .foo divs present. However, when attempting to access the first one using fooElements[0], it returns undefined.
A side note (although seemingly irrelevant): TP functions as an alias I created for a custom function named toPromise, enabling me to efficiently await the webdriver promises due to TypeScript's confusion with their implementation:
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 insights into where I might be going wrong? Or perhaps an alternative approach you could recommend? I would prefer to steer clear of nth-child selectors if possible.
EDIT: Updated to use classes instead of IDs