Ketcher项目自动化测试中左工具栏页面对象的优化实践

Ketcher项目自动化测试中左工具栏页面对象的优化实践

【免费下载链接】ketcher Web-based molecule sketcher 项目地址: https://gitcode.com/gh_mirrors/ke/ketcher

在化学结构编辑器Ketcher的自动化测试开发过程中，测试团队对左工具栏的页面对象进行了重要重构。本文将详细介绍这一技术优化的背景、实现方案及其带来的价值。

背景与挑战

化学结构编辑器通常包含复杂的工具栏系统，Ketcher也不例外。在自动化测试中，左工具栏作为核心交互区域，包含了Hand Tool(手形工具)、Area Selection(区域选择)、Erase(擦除)和Bond tool(键工具)等关键功能按钮。原先的测试代码中存在以下问题：

1. 重复的定位逻辑散布在各个测试用例中
2. 缺乏统一的页面对象管理
3. 维护成本随着功能增加而上升

解决方案

团队决定创建一个专门的CommonLeftToolbar页面对象，集中管理左工具栏的所有交互逻辑。这一方案包含以下关键技术点：

1. 统一元素定位策略

采用data-testid属性作为元素定位的唯一依据，这种策略相比CSS选择器或XPath具有更好的稳定性和可读性。例如：

const BOND_TOOL = '[data-testid="bond-single"]';
const ERASE_TOOL = '[data-testid="erase"]';

2. 功能封装

将工具栏操作封装为可复用的方法，例如：

class CommonLeftToolbar {
  async selectHandTool() {
    await page.click('[data-testid="hand-tool"]');
  }
  
  async selectBondTool(bondType: string) {
    await page.click(`[data-testid="bond-${bondType}"]`);
  }
}

3. 代码去重

通过分析现有测试用例，识别并替换了多处重复的工具栏操作代码，统一调用新的页面对象方法。这不仅减少了代码量，还提高了测试的一致性和可维护性。

实现细节

按钮功能实现

左工具栏包含四个核心按钮，每个都有明确的职责：

1. Hand Tool：用于平移画布视图
2. Area Selection：选择特定区域内的所有元素
3. Erase：删除选中的结构或原子
4. Bond tool：提供多种化学键绘制选项

类型安全设计

对于Bond tool这样的多功能按钮，采用了枚举类型来确保参数安全：

enum BondType {
  SINGLE = 'single',
  DOUBLE = 'double',
  TRIPLE = 'triple'
}

class CommonLeftToolbar {
  async selectBondTool(type: BondType) {
    // 实现代码
  }
}

技术优势

这一重构带来了多方面的改进：

1. 可维护性提升：工具栏相关变更只需修改一处代码
2. 测试稳定性增强：统一的定位策略减少了因UI微调导致的测试失败
3. 开发效率提高：新测试用例可以快速复用现有工具栏操作
4. 代码可读性改善：语义化的方法名使测试逻辑更清晰

经验总结

在类似化学编辑器这样的复杂Web应用中，页面对象模式(POM)特别有价值。Ketcher团队通过这次重构验证了几个关键实践：

1. 尽早识别常见交互模式并抽象为页面对象
2. 坚持使用稳定的元素定位策略
3. 保持页面对象方法的单一职责原则
4. 定期审查测试代码以发现重构机会

这一优化不仅解决了当前的技术债务，还为Ketcher未来的自动化测试扩展奠定了良好基础。随着项目发展，类似的页面对象模式可以推广应用到其他工具栏和功能区域，构建更加健壮的测试体系。

【免费下载链接】ketcher Web-based molecule sketcher 项目地址: https://gitcode.com/gh_mirrors/ke/ketcher