Ketcher项目中的自动化测试重构：从截图验证到属性断言
【免费下载链接】ketcher Web-based molecule sketcher 
项目地址: https://gitcode.com/gh_mirrors/ke/ketcher
背景介绍
在化学绘图工具Ketcher的自动化测试实践中，测试团队发现了一个可以优化的测试验证方式。原本的测试用例calculated-values.spec.ts中使用了截图比对的方式来验证计算结果，这种方式虽然直观但存在一些局限性。
问题分析
截图验证在UI测试中确实有其价值，特别是在验证视觉元素和布局时。然而，当测试目标是验证具体的计算数值时，截图验证存在几个明显缺点：
- 维护成本高：UI的任何微小变化都需要更新参考截图
- 执行效率低：截图和比对过程相对耗时
- 精确度不足：对于数值验证不够精确
- 可读性差：测试意图不如直接断言明确
解决方案
测试团队决定将验证方式从截图比对改为直接属性断言，使用expect(...).toHaveAttribute(...)这样的断言方式。这种改变带来了几个显著优势：
- 精确验证：直接验证计算结果而非视觉表现
- 执行快速：避免了不必要的截图操作
- 维护简单：测试不再受UI微小变化影响
- 意图明确：测试代码更清晰地表达验证目标
实施示例
以test('Calculation of exact mass for the reaction components'测试为例，重构前后的对比：
重构前：
// 执行计算操作
// 截取编辑器截图进行比对
await takeEditorScreenshot(page);
重构后：
// 执行计算操作
// 直接断言计算结果属性
await expect(element).toHaveAttribute('data-mass', expectedValue);
技术细节
在Ketcher项目中，这种重构涉及以下技术点：
- Playwright测试框架：项目使用Playwright进行端到端测试
- DOM属性访问：通过元素属性获取计算结果而非视觉呈现
- 精确断言：使用框架提供的丰富断言方法
- 测试稳定性：减少对UI变化的敏感性
最佳实践
基于这次重构经验，可以总结出以下自动化测试最佳实践：
- 选择合适的验证方式：根据测试目标选择截图验证或属性断言
- 优先使用程序化验证：对于数据验证优先考虑直接访问数据而非UI
- 保持测试专注：每个测试应该专注于验证单一功能点
- 提高测试可读性：通过清晰的断言表达测试意图
总结
Ketcher项目的这次测试重构展示了如何通过技术选择提高自动化测试的效率和质量。从截图验证到属性断言的转变不仅提高了测试的精确度和执行速度，还降低了长期维护成本。这种优化思路也可以应用到其他项目的测试实践中，特别是在需要验证精确计算结果的场景下。
【免费下载链接】ketcher Web-based molecule sketcher 项目地址: https://gitcode.com/gh_mirrors/ke/ketcher
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
