Ketcher项目中自动化测试左工具栏页面对象重构实践
【免费下载链接】ketcher Web-based molecule sketcher 
项目地址: https://gitcode.com/gh_mirrors/ke/ketcher
在化学绘图软件Ketcher的自动化测试框架中，页面对象模式(POM)是提高测试可维护性的重要设计模式。最近项目团队对左工具栏进行了重构，将分散在各测试用例中的工具栏操作逻辑统一封装到专门的页面对象中。
重构背景
在自动化测试实践中，直接操作UI元素的测试代码往往存在重复和维护困难的问题。Ketcher项目中原有的测试代码中，针对左侧工具栏的操作逻辑分散在各个测试文件中，导致：
- 相同功能的代码重复编写
- 元素定位方式不一致
- 修改UI时需要多处更新测试代码
重构方案设计
本次重构创建了专门的LeftToolbar页面对象，位于ketcher-autotests/tests/pages/common/commonLeftToolbar.ts文件中。该页面对象需要封装左工具栏的四个核心功能按钮：
- 手形工具(Hand Tool)
- 区域选择(Area Selection)
- 橡皮擦(Erase)
- 键工具(Bond tool(s))
重构遵循了以下设计原则：
- 统一元素定位：强制使用
data-testid属性定位元素，避免使用脆弱的CSS选择器或XPath - 功能集中：所有工具栏相关辅助函数都集中在
LeftToolbar.ts中 - 消除重复：识别并替换测试代码中所有相关操作，移除重复函数
- 参考已有实现：借鉴项目中已有的
TopLeftToolbar.ts页面对象的实现方式
技术实现要点
在实现LeftToolbar页面对象时，采用了以下技术实践：
- 封装基础操作：为每个工具栏按钮提供点击、状态检查等基础操作方法
- 统一异常处理：在页面对象内部处理元素查找失败等异常情况
- 提供清晰API：设计直观的方法名，如
selectHandTool()、isEraseButtonActive()等 - 类型安全：使用TypeScript确保方法参数和返回值的类型安全
重构带来的收益
通过这次重构，Ketcher自动化测试框架获得了以下改进：
- 可维护性提升：UI变更只需修改一处代码
- 测试可读性增强：测试用例更专注于业务逻辑而非UI操作细节
- 执行稳定性提高：统一的元素定位策略减少了因UI微小变动导致的测试失败
- 协作效率提升：新成员可以快速理解和使用标准化的工具栏操作方法
后续优化方向
虽然本次重构解决了左工具栏的基本操作封装问题，但仍有一些可以继续优化的方向：
- 将键工具(Bond tool)的选择功能进一步封装
- 添加工具栏按钮状态的完整验证方法
- 实现工具栏操作的链式调用API
- 增加操作日志记录，便于调试失败的测试用例
这种页面对象的重构模式不仅适用于Ketcher项目，也可以为其他复杂UI应用的自动化测试框架设计提供参考。通过良好的抽象和封装，可以显著提升测试套件的质量和可维护性。
【免费下载链接】ketcher Web-based molecule sketcher 项目地址: https://gitcode.com/gh_mirrors/ke/ketcher
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
