Stenciljs E2E测试：如何在影子大教堂中找到孩子的孩子

Question

我的组件排列如下：

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

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

我可以像这样在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'）

   返回null

2. component1.find（'：host >>>＃div1'）或component1.find（'：root >>>＃div1'）或component1.find（'>>>＃div1'）或component1.find （'＃div1'）或component1.find（'component1 >>>＃div1'）

   返回null

3. component1.shadowRoot.querySelector（'＃div1'）

   此方法获取一个元素，但是单击它或向其调度事件对页面中的app-root或component1无效。

关于在两个元素都具有阴影边框时如何找到孩子的孩子的任何建议？

Answer 1

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

---

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

当前无法多次使用>>>（请参阅source）。 >>>不是官方的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存储库中打开功能请求。