时间戳

首页 > 解决方案 > Testcafe 和 Shadow Dom

testing - Testcafe 和 Shadow Dom

问题描述

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

样本

我有一个带有 id 的父 div，#pricePlans然后我将其用作基础来选择其中的元素。您可以在下面看到我如何使用 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); 先感谢您

标签： testingautomationautomated-testse2e-testingtestcafe

解决方案

使用 怎么样.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

推荐阅读