testcafe

addCustomDOMProperties results in "does not exist on type"

testcafe 2.6.2

I'm having trouble using Selector.addCustomDOMProperties to wait for an <img> to finish loading before attempting a t.click() on it.

When trying to click an <a> on my page which contains an <img loading="lazy">, the test fails with an error indicating the click couldn't happen because the element has zero size. I believe the act of clicking causes the page to scroll to the element and immediately click it, but the img has not loaded yet because of its lazy loading.

It looks like I should use the complete property described at https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete and referenced in a TestCafe addCustomDOMProperties call at How to test whether image is fully loaded in testcafe

However when I try the following simple attempt to read nodeName from an element:

    // see https://testcafe.io/documentation/403655/guides/advanced-guides/advanced-selector-techniques
    this.productIndexSelector = this.productIndexSelector.addCustomDOMProperties({
        nodeName: el => el.nodeName
    });
    let name = await this.productIndexSelector.nodeName;

The test fails to compile with:

ERROR Cannot prepare tests due to the following error:

Error: TypeScript compilation failed.
/home/neek/workspace/premierrange158/htdocs/scripts/test/premier.ts (1397, 52): Property 'nodeName' does not exist on type 'Selector'.

I see this discussed in 2017 at https://github.com/DevExpress/testcafe/issues/1510 but the Issue was closed with a cryptic remark that "It's by design. Take a look at Selector TS tests. You need to declare Selector interface extension."

I've cloned git@github.com:DevExpress/testcafe.git and in tests I see test-suites/typescript-defs/selectors.ts but the tests only seem to force an error and don't show the function being used correctly.

How is addCustomDOMProperties supposed to work please?

Solution

  • You can find an example of how to use addCustomDOMProperties with TypeScript in our documentation: addCustomDOMProperties. You need to define your own interface that contains the properties you wish to add:

    interface CustomSelector extends Selector {
    innerHTML: Promise<any>;
}

const label = <CustomSelector>Selector('label').addCustomDOMProperties({
    innerHTML: el => el.innerHTML
});

await t.expect(label.innerHTML).contains('input type="checkbox" name="remote"');