Stenciljs E2E测试:如何在Shadow Dom中找到子级
Stenciljs E2E测试:如何在Shadow Dom中找到子级
提问于 2020-03-22 19:38:35
我的部件排列如下：
app-home
shadow-root
component1
shadow-root
div id=div1换句话说，我的应用程序家庭和component1都有影子王国。
我可以很容易地在Stenciljs E2E测试中找到这样的E2E：
const page = await newE2EPage();
await page.setContent('<app-home></app-home>');
const component1 = await page.find('app-home >>> component1');但是，无论我尝试了什么，我都无法在component1中获得#div1 1。返回一个E2EElement非常重要，这样我就可以使用它的方法，比如单击页面中的哪些触发更改。
以下是我尝试过的：
page.find('app-home >>> component1 >>> #div1')返回空component1.find(':host >>> #div1')或component1.find(':root >>> #div1')或component1.find('>>> #div1')或component1.find('#div1')或component1.find('component1 >>> #div1')返回空component1.shadowRoot.querySelector('#div1')此方法获得一个元素，但单击它或向其发送事件对页面中的app-root或component1没有任何影响。
那么，当两个元素都有阴影how时，如何找到孩子的孩子，有什么建议吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-23 13:01:43
注意:我假设component1实际上是一个有效的自定义元素标记名(包含一个破折号)。
page.find('app-home >>> component1 >>> #div1')目前不可能多次使用>>> (参见来源)。>>>不是正式的CSS选择器，因此它的实现完全取决于Stencil.js。
component1.find(':host >>> #div1')这种方法或类似的方法也是不可能的，因为在.find上调用E2EElement只能找到该元素的子元素，而不能找到宿主元素本身。
一种解决方案是完全切换到浏览器上下文：
await page.evaluate(() => {
// this function will run in the browser context, not
// in the Node.js context that the test is executed in.
const appHome = document.querySelector('app-home');
const comp1 = appHome.shadowRoot.querySelector('component1');
const div1 = comp1.shadowRoot.querySelector('#div1');
div1.click();
});
await page.waitForChanges();您可以将其重构为一个助手，但是我同意，如果Stencil.js为此提供了一个合适的API，那就更好了。允许>>>选择器多次使用将是一个不错的特性。我建议您在Stencil.js存储库中打开一个特性请求。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60804053
复制相关文章
相似问题
腾讯云开发者
