Testcafe和Shadow Dom

Question

我有一个使用web组件的网页。我能够选择所有元素并执行断言，比如检查exists、innerText。然而，当涉及到执行click时，它就不起作用了。我想知道在shadow-root中的元素上执行点击是否有任何限制

示例

我有一个id为#pricePlans的父div，然后我使用它作为基础来选择其中的元素。你可以在下面看到我如何做选择器的例子。光标甚至不会悬停在我的按钮上。

this.marathiCard = Selector(() => document.querySelector('#pricePlans').shadowRoot.querySelectorAll('[class*="grid-item"]')).nth(1); this.marathiSignUpButton = this.marathiCard.find('[class*="c-btn c-btn--primary"]'); await t.click (this.marathiSignUpButton);提前感谢您

Answer 1

使用.shadowRoot怎么样，你可以写成这样：

test('Click inside shadowDOM', async t => {
    const shadowBtn = Selector(() => document.querySelector('#abc').shadowRoot.querySelector('#btn1'));

    await t        
        .click(shadowBtn);
});

在Github上有一些例子，例如https://gist.github.com/AlexanderMoskovkin/897073929442db031d518e1e6db4ec9e或https://github.com/DevExpress/testcafe/issues/2172