基于 Web 组件的应用程序的 E2E 测试

Posted 2023-02-18

【中文标题】基于 Web 组件的应用程序的 E2E 测试

【英文标题】：E2E tests for web component based applications

【发布时间】：2019-07-27 07:59:48

【问题描述】：

Web 组件有望成为 Web 中的“下一件大事”。我喜欢这种方法，但我想知道如何编写端到端测试（ui 测试）。我不是在谈论孤立地测试组件本身。

使用 Selenium WebDriver API 无法访问 shadow-dom。您必须依赖 javascript，这绕过了 WebDriver 的一些功能，例如检查您与之交互的元素是否可见/可访问。

我查看了 Vaadin TestBench，他们几乎不再使用成熟的 WebDriver API，而是完全依赖 JavaScript。他们甚至不得不手动发出 chnage 或 blur 事件。

如果编写 e2e 测试如此困难，我认为 Web 组件不会有光明的未来。意见？

【问题讨论】：

如果你有一把锤子，一切都开始像钉子。 E2E 是否包括测试 VIDEO Element 的内部运作？还是一个DIV？如果您将 WC 视为构建应用程序的非 React 的东西，那么是的，您需要测试。如果您的 WC 是执行它们所做的“原子”/“微服务”，那么您不必测试它们。再次...我不测试我的锤子...我做不测试我的键盘……我不测试我的 IDE……我不测试我的车……我每次骑行都会测试摩托车的刹车。

我同意丹尼的观点。对于验收或系统测试，应将 Web 组件视为黑盒。您的单元测试应该测试组件的内部结构。使用 Selenium，您应该只需要测试接口而不是内部。如果这不起作用，那么您可能需要调整您使用组件界面公开的内容。

【参考方案1】：

在 2021 年，包括 Playwright 在内的多个测试库有助于穿透 Shadow DOM，记录在 here。