Stenciljs e2e 测试没有明显原因无法工作

Question

render() 内的行：

<div class={{ 'modal-backdrop show': this.show, 'modal-backdrop hide': !this.show }}>

测试：

it('should display correctly', async () => {
    const page = await newE2EPage();
    await page.setContent('<my-component></my-component>');

    let element = await page.find('my-component');
    expect(element).not.toBeNull();

    element = await page.find('div.modal-backdrop.hide');
    expect(element).not.toBeNull();
  });

问题描述： 我只提供了部分代码，不幸的是，由于保密原因我无法提供更多内容。不过我会尽力描述这个问题。项目中有两个组件，组件 A 的测试按其应有的方式工作。组件 B（上面提供）的测试则不然。虽然第一个期望通过，但第二个期望失败，因为它为空，但它不应该。

一些事实：

1. 该项目可以毫无问题地构建、运行和使用。
2. 单元测试按预期工作，包括对 render() 方法的测试。
3. 代码本身并没有错，我已经测试、重新测试、再测试，它适用于其他组件，但不适用于这个组件。
4. 虽然默认是 .hide，但我尝试过 .hide 和 .show，但都不起作用。

迄今为止最好的猜测： 由于代码的编写方式，我在使测试正常工作时遇到了很多问题。在运行测试时，许多对象未定义，这导致测试失败。从我尝试和测试的所有内容来看，我最好的理论是，由于某种原因，这个组件在木偶浏览器的上下文中失败了一半，只生成了核心对象，但没有其他任何东西。我不知道这是否可能，但看起来就是这样。

Answer 1

Web 组件使用自己的文档树，称为 shadowDOM，它在主 DOM (page) 中不可见；因此你的 page.find 失败了。这个概念称为封装。顺便说一句，我无法在 Puppeteer 文档中的page 对象；你能解释一下它是从哪里来的吗？

要访问 Web 组件内的影子树，您必须使用 element.shadowRoot 来访问它：

element = await page.find('my-component');
expect(element.shadowRoot.querySelector('div.modal-backdrop.hide')).not.toBeNull();

有 puppeteer 插件和应用程序可以帮助实现这一点：

• https://github.com/PavelDymkov/puppeteer-shadow-selector
• https://docs.puppetry.app/testing-techniques/testing-shadow-dom< /a>

要了解更多信息，请查看 https://www.google.com/search?q=puppeteer+shadow+DOM。