右侧需要有 22 到 28 像素的边距

同样，您必须在报告分支中查找验证语句： 消息位置错误 留言位置错误（查看大图） 该支票的原始声明是这更有意义。而且，其他前端工程师即使没有写过测试，也会理解这份测试报告。 布局测试指南 考虑到所有这些不同的实验，我决定将所有学习内容形式化为通用布局测试指南。以下是简化测试例程所需遵循的步骤的快速清单。 识别设计中的布局模式。 概括验证语句。尝试将大多数验证压缩为单个句子。 组件化！将重复元素的测试转移到专用组件中总是更好。 为部分、规则和对象使用有意义的名称。 避免像素。尝试用有意义的变量替换。

像素值（无论是精确值还是范围）。 调整您网站的代码以使其更易于测试。这将帮助您构建和维护生产和测试代码。 救援接受标准 我经常收到这样的问题：“那么布局测试应该有多详细？我们应该具体测试什么？” 很难给出一般性的答案。问题在于，当测试的覆盖范 Whatsapp 号码列表 围较小时，您会错过错误。另一方面，如果您的测试过于详细，您可能会得到很多误报，并且将来您可能会在测试维护中迷失方向。因此，需要权衡。但我确实为自己找到了一个总体指导方针。如果您将工作分成更小的用户故事，那么以验收标准的形式构建页面的设计就会变得更容易。最后，您可以将这个验收标准放入您的测。



试代码中。例如，其中一些语句可以以自定义规则的形式定义，如前面的所有代码示例所示。验收标准的一个很好的例子是这样的： 弹出窗口应在屏幕上垂直和水平居中。 它们的宽度应为 400 像素。 按钮应水平对齐。 等等 一旦您用简单的句子描述了设计，就可以更轻松地将它们转换为可重用的语句并组织您的测试代码。 结论 正如您所看到的，这样的练习可以帮助您构建设计并发现可以在多个页面组件之间共享的通用布局模式。即使页面很复杂并且包含很多元素，您也始终可以找到一种方法将它们分组到布局表达式中。通过这种方法，布局测试更像是测试驱动开发的工具，帮助您增量地设计、实现和交付软件，这在敏捷环境中特别有用。