AI视觉元素识别工具实战：从Applitools到Testim的自动化测试入门

1次阅读

没有评论

共计 1946 个字符，预计需要花费 5 分钟才能阅读完成。

传统自动化测试中，我们通常使用 XPath 或 CSS 选择器来定位页面元素。但这种方法存在明显缺陷：

结构依赖性强：页面 DOM 结构变化会导致定位失效，需要频繁维护脚本
跨平台适配差：同一按钮在 iOS/Android/Web 端可能具有不同 DOM 结构
动态内容处理难：随机生成的 ID 或类名会让选择器立即失效

视觉识别技术通过模拟人眼观察方式解决了这些问题：

基于视觉特征：识别按钮的形状、颜色、文字等视觉特征
结构无关性：不依赖底层 DOM 实现
自适应分辨率：通过相对位置匹配元素

核心技术：视觉 AI 算法 + 差异比对
优势：
像素级比对精度
支持基线测试(Baseline Testing)
强大的差异分析报告
适用场景：UI 视觉回归测试

核心技术：机器学习 + 动态元素定位
优势：
自愈 (Self-healing) 定位
录制 / 回放功能完善
支持逻辑步骤编排
适用场景：端到端功能测试

计算机视觉识别流程分为四个关键阶段：

图像预处理
灰度化处理降低计算复杂度
高斯模糊消除噪点
边缘检测增强特征
特征提取
SIFT/SURF 算法提取关键点
OCR 技术识别文本内容
轮廓检测确定元素形状
特征匹配
模板匹配算法定位元素位置
相似度评分机制（通常 >0.8 视为匹配成功）
坐标转换
将图像坐标转换为屏幕绝对坐标
考虑设备像素比 (DPR) 适配不同分辨率

from applitools.selenium import Eyes, Target
from selenium import webdriver

def test_login_ui():
    # 初始化驱动
    driver = webdriver.Chrome()
    eyes = Eyes()

    try:
        # 配置 Applitools
        eyes.api_key = 'YOUR_API_KEY'
        eyes.open(driver, "Demo App", "Login Test")

        # 访问测试页面
        driver.get("https://demo.applitools.com")

        # 视觉验证整个页面
        eyes.check("Login Page", Target.window())

        # 精确验证登录按钮
        eyes.check("Login Button", 
                  Target.region("[name='login']")
                  .ignore(".input-field"))  # 忽略动态输入框

        eyes.close()
    finally:
        driver.quit()
        eyes.abort_if_not_closed()

const {testim} = require('testim');

describe('Checkout Flow', function() {it('should complete purchase', async function() {
    // 加载测试脚本
    await testim.loadTest('checkout_flow');

    // 视觉定位购物车图标
    await testim.click(testim.element.withText('Cart')
        .withSimilarity(0.85)  // 相似度阈值
        .withTimeout(10000)    // 超时设置
    );

    // 动态等待支付按钮出现
    await testim.waitForVisibility(testim.element.withText('Pay Now')
        .withParent('.checkout-section')
    );
  });
});

我们在三种典型场景下对比了识别性能（测试设备：MacBook Pro M1）：