在 TypeScript 中为影子根元素自定义 TestCafe 选择器

Question

请帮我在 TypeScript 中定义Selector 部分

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');
});

Answer 1

嗨Debashish Samanta，

依赖项在运行时添加到函数的作用域中，因此 TypeScript 在编译期间无法找到它们。您可以使用 // @ts-ignore 注释禁止此验证。

至于“'{ dependencies: { demoPageSelector: Selector; }; }' 类型的参数不能分配给'SelectorOptions' 类型的参数。”错误，似乎dependencies 属性在SelectorOptions 类型声明中以某种方式丢失。您可以使用<SelctorOptions> 类型断言来解决此问题。

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.');
});