模板 e2e 测试无缘无故不起作用

Question

渲染中的线条((：

<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，都不起作用

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

Answer 1

Web组件使用自己的文档树shadowDOM，它在主DOM(page(中不可见；因此您的CCD_ 3失败。这个概念被称为封装。顺便说一句，在Puppeter的文档中，我在page对象上找不到一个名为find的方法；你能解释一下它是从哪里来的吗？

要访问web组件中的影子树，您必须使用element.shadowRoot:访问它

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

有木偶师插件和应用程序可以帮助做到这一点：

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

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