Ketcher项目自动化测试中"收藏"操作的代码重构实践

Ketcher项目自动化测试中"收藏"操作的代码重构实践

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

在化学结构编辑器Ketcher的自动化测试开发过程中，测试团队发现项目中存在多处直接使用.getByText('★').click()这样的原始选择器来实现"添加到收藏夹"功能的测试代码。这种实现方式虽然能够完成基本功能，但从代码质量和可维护性角度来看存在明显缺陷。

问题分析

原始实现方式直接依赖于特定字符(★)的文本匹配来定位收藏按钮，这种硬编码方式存在几个潜在风险：

1. 界面元素变更敏感：如果未来界面设计中星号符号被替换为其他图标，所有相关测试将立即失效
2. 代码可读性差：测试意图被实现细节所掩盖，其他开发者难以快速理解这是"收藏"操作
3. 维护成本高：相同的操作逻辑分散在多处测试用例中，任何修改都需要多处调整

解决方案

测试团队决定实施以下改进措施：

1. 创建专用辅助函数：在测试工具库(library.ts)中封装addToFavorites函数，集中实现收藏操作逻辑
2. 统一调用接口：所有测试用例改为调用这个标准化的辅助函数
3. 增强可维护性：将实现细节与测试逻辑分离，使测试用例更专注于业务验证

技术实现

新的辅助函数实现可能包含以下关键点：

// library.ts
export function addToFavorites() {
  // 使用更具语义化的选择器
  const favoriteButton = getByTestId('favorite-button');
  
  // 添加必要的等待和验证逻辑
  waitFor(() => {
    expect(favoriteButton).toBeVisible();
  });
  
  // 执行点击操作
  favoriteButton.click();
  
  // 可选：添加操作后的验证
  return expect(getByTestId('favorite-indicator')).toHaveClass('active');
}

重构收益

1. 可读性提升：测试用例中直接使用addToFavorites()，业务意图一目了然
2. 健壮性增强：集中处理元素定位和等待逻辑，减少因界面加载导致的测试失败
3. 维护简化：界面元素变更只需修改辅助函数一处即可
4. 扩展性提高：可方便地添加额外的验证逻辑或调试信息

最佳实践建议

1. 语义化选择器：优先使用data-testid等专用测试属性，而非依赖易变的文本内容
2. 操作封装：将常见用户操作封装为具有业务含义的函数
3. 状态验证：重要的操作应包含结果验证，而不仅仅是动作执行
4. 文档注释：为辅助函数添加清晰的用途说明和使用示例

这种重构方式不仅适用于Ketcher项目，对于任何大型前端项目的测试代码维护都具有参考价值，体现了测试代码也需要像生产代码一样注重设计和架构的理念。

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