Customize TestCafe Selector in TypeScript for Shadow root Element

问题

Please help me to define Selector part in TypeScript

import { Selector, t } from 'testcafe'

fixture `Scenario Name : Validation`
    .page `https://chrisbateman.github.io/guide-to-web-components/demos/shadow-dom.htm`;


const demoPage  = Selector('#demo1');
const paragraph = Selector(() => {
    return demoPageSelector().shadowRoot.querySelectorAll('p');
}, { dependencies: { demoPageSelector: demoPage } });


test('Test ShadowDom', async t => {
    await t
        .expect(paragraph.value).eql('Some text');
});

回答1:

Hi Debashish Samanta,

Dependencies are added to the function's scope at runtime, so TypeScript cannot find them during compilation. You can suppress this validation using the // @ts-ignore comment.

As for the "Argument of type '{ dependencies: { demoPageSelector: Selector; }; }' is not assignable to parameter of type 'SelectorOptions'." error, it seems like the dependencies property is somehow missing in the SelectorOptions type declaration. You can work around this using the <SelctorOptions> type assertion.

import { Selector, t } from 'testcafe'

fixture `Scenario Name : Validation`
    .page `https://chrisbateman.github.io/guide-to-web-components/demos/shadow-dom.htm`;


const demoPage  = Selector('#demo1');
const paragraph = Selector(() => {
    // @ts-ignore: Cannot find name 'demoPageSelector'.
    return demoPageSelector().shadowRoot.querySelectorAll('p');
}, <SelectorOptions> { dependencies: { demoPageSelector: demoPage } });


test('Test ShadowDom', async t => {
    await t
        .expect(paragraph.innerText).eql('These paragraphs are in a shadow root.');
});

来源：https://stackoverflow.com/questions/57983950/customize-testcafe-selector-in-typescript-for-shadow-root-element