在TypeScript中为影子根元素自定义TestCafe选择器 [英] Customize TestCafe Selector in TypeScript for Shadow root Element

问题描述

请帮助我在TypeScript中定义Selector部分

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

推荐答案

您好 Debashish Samanta ，

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

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.

对于类型'{依赖项:{demoPageSelector:Selector;};}'的参数不能分配给类型'SelectorOptions'的参数."错误，在SelectorOptions类型声明中似乎缺少了dependencies属性.您可以使用<SelctorOptions>类型断言来解决此问题.

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

这篇关于在TypeScript中为影子根元素自定义TestCafe选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！