如何测试uis

测试uis是尴尬的。用户希望频繁发布功能。但每个新功能都会引入更多UI和新状态，然后您必须测试。每个测试工具都承诺“轻松，不脆弱，快速”，但在精细打印中有权衡。

领先的前端团队如何跟上？什么＆＃39;他们的测试策略，它们使用了哪种方法？我从故事书社区研究了十支球队，以了解什么作品 - Twilio，Adobe，Peloton，Shopify等。

这篇文章突出了由Scaled Engineering Teams使用的UI测试技术。这样，您可以创建一个务实的测试策略，余额覆盖，设置和维护。一路上，我们＆＃39; ll指出陷阱以避免。

所有主要的JavaScript框架都是组件驱动的。这意味着UIS由“自下而上”构建，以原子组件开始，逐步组成页面。

请记住，每一块UI现在都是一个组件。是的，包括页面。页面和按钮之间的唯一区别是它们如何消耗数据。

涉及组件时，不同测试方法之间的区别可以模糊。而不是专注于术语，让我们考虑UIS护令测试的特点。

全面的UI测试策略余额和价值余额。但是，有很多方法可以测试它可能会难以弄清楚任何特定情况的权利。这就是为什么许多团队使用下面的标准评估不同的测试技巧。

⏱️迭代速度：反馈环路之间的变化和看到结果之间的快速是多么快。

🖼现实环境：在实际浏览器中执行测试或jsdom等模拟环境。

🔍隔离故障：测试失败，您可以快速识别失败的源。

例如，端到端测试模拟“真实”用户流量，但在任何地方应用并不实用。在Web浏览器中测试的关键优势也是一个缺点。测试需要更长时间运行，并且有更多的失败点（剥落！）。

既然我们已经涵盖了UI特征来测试和评估每个测试方法的标准，让我们看看团队如何设计考试策略。

＆＃34;测试使我充分符合自动依赖更新。如果测试通过，我们将它们合并。＆＃34; - Twilio的主要工程师Simon Taggart

现代界面有无数变化。你拥有的越多，它是要确认他们都在用户中正确呈现;设备和浏览器。

在过去，您必须旋转应用程序，导航到页面，并进行各种曲目以使UI进入正确的状态。

组件构造允许您作为道具和状态的函数呈现特定的变化。您不需要旋转整个应用程序只是为了查看组件渲染，而是通过道具和状态来孤立地查看它。

Twilio并购物使用故事书以隔离组件，模拟其变体，并将支持的测试用例记录为“故事”。这允许开发人员在初始开发期间拍摄组件外观，并再次在QA中。

鉴于应用规模，它＆＃39;通过手动测试UI外观不切实际。您必须检查每个断点和浏览器的每个组件＆＃39;随时调整UI。这是很多工作！

Auth0和RADIX UI自动化UI验证过程。它们使用可视化测试来捕获每个UI组件的屏幕截图，在一致的浏览器环境中完成使用标记，样式和其他资产。这样，他们正在测试用户实际看到的内容。

每次提交，新屏幕截图都会自动与先前接受的基线截图进行比较。当机器检测到视觉差异时，开发人员收到通知以批准故意更改或修复意外错误。

但DOM快照测试呢？评估HTML斑点的缺陷已被充分记录。

总是。视觉测试的低功耗值高。它们需要最小的努力维护，在真实浏览器中执行，并具有低薄片。

当组件组合时，奇怪的事情往往会发生。 UIS由许多简单的组件组成。验证这些组件如何集成，可确保系统整体工作。

但测试组成棘手是棘手的，因为复杂的功能通常是有线达到数据和应用状态。这需要您模拟或模拟您的应用程序的业务逻辑。

BBC和Sidewalk Labs（Google）使用故事书以孤立地构建复合组件。故事书＆＃39; addons简化了模拟数据，事件和API响应。一旦您的UI在故事书中孤立，您可以视觉测试以验​​证组件集成一直到页面。

经常。这些测试需要一些投资，但它们的表面不明显的集成问题，难以追踪。

接口aren＆＃39; t静态。用户可以与UI交互，填写表单字段和触发事件。

如何确保UI正确响应交互？我们可以使用计算机模拟和验证用户交互！

一种方法是使用酶等工具来访问组件＆＃39;内部方法。然后触发状态更改并检查结果。它有效，但您最终测试了内部工作，而不是在用户的方式中与UI交互。

这就是为什么大多数球队现在使用测试库，因为它会评估组件输出。它通过在虚拟浏览器（JSDom）中呈现整个组件树来工作。它提供了模仿现实世界的公用事业。

Adobe旨在通过将组件使用情况写作作为故事来进一步迈出这一步。然后将它们重用以JEST运行交互测试。这通过组件故事格式 - 基于JavaScript ES6模块的便携式格式启用。因此，允许您在开发期间使用相同的故事，然后在视觉，组成和交互测试中再次使用相同的故事。

有时。交互测试确保组件之间的连接正常工作。事件正在流动，状态正在更新。在实践中，这意味着通过编写相对低的维护测试来获得适度的覆盖范围。

您的用户以不同的方式与UI进行交互。例如，使用鼠标，触摸屏，键盘和屏幕阅读器。可访问性是使所有人使用的网站的做法。

测试可访问性最准确的方法是手动检查其浏览器，设备和屏幕阅读器的组合。公司经常雇用外部顾问或培训某人内部。但这可能是不切实际的，因为手动测试每个UI变化是耗时的。为什么团队使用混合方法，将手动测试和自动化结合使用。

作为QA的第一行，使用机器捕获明显的可访问性违规行为。这是通过审核呈现的DOM反对一组最佳实践启发式的DOM（例如，使用像AX这样的库）。自动检查完成后，手动点击UI以找到微妙的问题。

结合自动化和手册最终成为覆盖和努力的务实平衡。您可以获得一个快速反馈循环，您可以在其中找到并修复在生产中的辅助功能问题。大多数团队都使用AX运行对组件的自动检查。这也允许它们执行目标测试以更快地揭示错误。例如：

Twilio Paste团队使用Jest-AX集成来在组件上运行自动辅助功能审核。 AX也可作为故事书的插件提供。

总是。它不仅对您的用户来说，它也不只是一个法律要求。 AX是一款低投资工具。使用它并不自动使您的应用程序可访问，但它提前捕获了很多问题。

即使是最基本的任务也需要用户跨多个组件完成一系列步骤。这是另一个潜在的失败点。赛普拉斯和播放器等工具允许您运行完整应用程序的端到端（E2E）测试以验证此类交互。

测试完整的应用程序需要大量的基础设施工作。您必须创建一个测试环境，以便在串联前端，后端和其他服务中部署系统的所有部分。种子测试数据。然后连接到云浏览器实际运行测试。

鉴于这些权衡，大多数团队选择对他们的UIS进行全面的E2E测试，而是赞成互动和成分测试。或者他们将自己限制在一小部分E2E测试中，以确保在部署到生产后，该应用程序继续下班。

但是，对于一些团队来说，权衡是值得的。例如，O＆＃39; Reilly使用Docker旋转整个基础架构。然后使用赛普拉斯运行E2E测试以验证用户旅程。

谨慎地。 E2E测试需要重大折衷。他们提供高度的信心，但需要时间/努力旋转并测试整个系统。因此，将E2E测试限制为仅关键用户流量，例如，注册→添加到购物车→购买。

如果您是像我这样的开发人员，建立UIS比每个州都更有趣。那么你如何测试每个功能，仍然有时间代码？

我采访的每个团队都使用连续的集成（CI）服务器来减少手动努力。每次推送代码时，CI会自动触发您的测试套件。测试在后台执行，并将结果报告给每个人才能审查。

自动化CI检查自动检测UI错误，以便在UI＆＃34中放置信心;外观和感觉＆＃34;在部署到生产之前。

UI测试是提供高质量体验的一体化。弄清楚务实的测试策略可能会令人困惑，因为应用的表面积是膨胀的，并且有很多方法可以测试它。

你最终有平衡的权衡。一些测试易于维护，但提供错误的保证。其他人将系统整体评估，但很慢。

在采访10个团队以确定实际工作的UI测试方法后，我编制了一个他们推荐的工具的候选名单。

下表总结了每个UI测试方法的利弊以及它使用的频率。 到目前为止，本文划伤了UI测试的表面。 在即将到来的文章中，I＆＃39; LL深入挖掘测试堆栈的每层，并进入如何实现UI测试策略的机制。 加入邮件列表以在发布更多测试文章时收到通知。