Stenciljs E2E 测试：如何在 Shadow Dom 中找到孩子的孩子

Question

我的组件排列如下：

app-home
  shadow-root
    component1
      shadow-root
        div id=div1

换句话说，我的 app-home 和 component1 都有影子 dom。

我可以在 Stenciljs E2E 测试中轻松找到 component1，如下所示：

const page = await newE2EPage();
await page.setContent('<app-home></app-home>');
const component1 = await page.find('app-home >>> component1');

但是，无论我尝试过什么，我都无法在 component1 中获取#div1。获取 E2EElement 非常重要，这样我就可以使用它的方法，例如单击触发页面中的更改。

这是我尝试过的：

1. page.find('app-home >>> component1 >>> #div1')

   返回空值

2. component1.find(':host >>> #div1')或component1.find(':root >>> #div1')或component1.find('>>> #div1')或component1.find('#div1')或或component1.find('component1 >>> #div1')

   返回空值

3. component1.shadowRoot.querySelector('#div1')

   此方法获取一个元素，但单击它或向其分派事件对页面中的 app-root 或 component1 没有影响。

那么，当两个元素都有 ShadowDOM 时，如何找到子元素的子元素，有什么建议吗？

Answer 1

注意：我假设这component1实际上是一个有效的自定义元素标签名称（包含破折号）。

page.find('app-home >>> component1 >>> #div1')

>>>目前无法多次使用（请参阅来源）。>>>不是官方的 CSS 选择器，因此它的实现完全取决于 Stencil.js。

component1.find(':host >>> #div1')

这种方法或类似的方法也是不可能的，因为调用.findanE2EElement只能找到该元素的子元素，但不能找到宿主元素本身。

一种解决方案是完全切换到浏览器上下文：

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 存储库中打开功能请求。