测试用例精简

为什么需要这个？

一个精简的测试用例可以通过消除不相关的信息（即与问题无关的 HTML 页面结构部分）来帮助识别页面上的核心问题。有了精简的测试用例，开发团队将花费更少的时间识别问题，而将更多时间用于确定解决方案。此外，由于网站可能会改变其内容或设计，问题可能不再在实际网站上出现。通过构建测试用例，您可以捕获最初的问题。

第一步

精简页面真正意义上的第一步是识别页面的主要问题。例如：

页面上的文本是否与图片重叠？
是否存在无法正常工作的表单按钮？
页面是否存在缺失或未对齐的部分？

在您做出这些判断后，需要从页面源窗口创建一个页面的本地副本。保存此源代码后，最好在 <head> 中放入一个 <base/> 元素，以便任何使用相对路径的图片/外部样式表或脚本能够被加载。添加 <base> 元素后，将本地副本加载到浏览器中，并验证问题是否仍然存在。在这种情况下，我们假设问题仍然存在。

从上到下进行

通常，最好从 <doctype> 顶部开始，向下处理，通过 <head> 直到 <body> 元素。在文本编辑器中查看 HTML 文件，看看 <head> 中存在哪些类型的元素。通常，<head> 将包含必需的 <title> 元素，以及 <link/>、<style> 和 <script> 等元素。

精简过程是每次移除一个元素，然后保存并重新加载测试用例。如果您移除了该元素，但页面仍然显示问题，请继续处理下一个元素。如果在 HEAD 中移除某个元素导致问题不再出现，您可能已经找到了问题的一部分。将此元素重新添加回 HEAD，重新加载页面并确认问题仍然存在，然后继续处理 HEAD 中的下一个元素。

完成头部了吗？继续处理主体！

一旦 <head> 元素被精简，您就需要开始精简 <body> 中必需的元素数量。这往往是最耗时的，因为可能会存在数百（甚至数千）个元素。一般的做法是同时移除元素的开始标签 <start> 和结束标签 </end>。对于经常嵌套的表格来说尤其如此。您可以通过选择元素组并将其移除来加快此过程，但理想情况下，您每次都需要保存并重新加载测试用例以验证问题是否仍然存在。

另一种方法

另一种帮助您识别不必要元素的方法是暂时取消选择 Safari 偏好设置中的“启用 Javascript”选项。如果关闭此选项后加载测试用例仍能重现问题，那么任何存在的脚本元素都可以被移除，因为它们不是此问题中的因素。假设您已经将页面精简到一个带有有序列表的嵌套表格，并且其中有一个必需的 <link/> 元素。一个好的做法是识别外部文件中正在使用的 CSS 规则，并将其直接添加到测试用例中。在 head 中创建一个 <style> </style> 标签，并将 .css 文件的内容复制/粘贴到此样式元素中。移除 <link/> 并保存更改。加载测试用例并验证问题是否仍然存在。现在手动删除或注释掉每个 CSS 规则，直到您只剩下重现问题所需的规则集。

添加到 Bug 中

完成精简后，您应该将其添加到 Bug 中。在精简过程中，您很有可能已经找到了问题的根本原因，因此能够设置正确的组件。不要忘记将 HasReduction 关键字添加到 Bug 中（如果存在 NeedsReduction 关键字，则将其移除）。如果您没有权限更改组件或关键字，请阅读这篇关于 Bugzilla 的文档，了解如何获取权限。

准备开始了吗？

除了为您发现的 Bug 提供精简外，您还可以通过精简 Bugzilla 中带有 NeedsReduction 关键字的任何 Bug 来提供帮助。