Testcafe 和 Shadow Dom

Question

我有一个使用 Web 组件的网页。我能够选择所有元素并执行断言，例如检查exists、innerText。但是，在执行click 时，它不起作用。我想知道对shadow-root 中的元素执行点击是否有任何限制？

样本

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

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