自动化测试 - 在 TypeScript 中为 Shadow root 元素自定义 TestCafe 选择器

请帮助我在 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');
});

答案＃1

嗨，Debashish Samanta，

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

至于“类型为'{ dependencies: { demoPageSelector: Selector; }; }'的参数不可分配给'SelectorOptions'类型。”的错误，看起来在'SelectorOptions'类型声明中dependencies属性以某种方式缺失。你可以使用<SelectorOptions>类型断言来解决这个问题。

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