SmartUI

LambdaTest SmartUI 为您的WebdriverIO测试提供AI驱动的视觉回归测试。它能捕获屏幕截图，将其与基准进行比较，并通过智能比较算法突出显示视觉差异。

设置

创建SmartUI项目

登录 LambdaTest并导航至 SmartUI项目 创建一个新项目。选择 Web 作为平台并配置您的项目名称、审批人和标签。

设置凭据

从LambdaTest仪表板获取您的 LT_USERNAME 和 LT_ACCESS_KEY，并将其设置为环境变量：

export LT_USERNAME="<your username>"
export LT_ACCESS_KEY="<your access key>"

安装SmartUI SDK

npm install @lambdatest/wdio-driver

配置WebdriverIO

更新您的 wdio.conf.js：

exports.config = {
  user: process.env.LT_USERNAME,
  key: process.env.LT_ACCESS_KEY,
  
  capabilities: [{
    browserName: 'chrome',
    browserVersion: 'latest',
    'LT:Options': {
      platform: 'Windows 10',
      build: 'SmartUI Build',
      name: 'SmartUI Test',
      smartUI.project: '<Your Project Name>',
      smartUI.build: '<Your Build Name>',
      smartUI.baseline: false
    }
  }]
}

使用方法

使用 browser.execute('smartui.takeScreenshot') 捕获截图：

describe('WebdriverIO SmartUI Test', () => {
  it('should capture screenshot for visual testing', async () => {
    await browser.url('https://webdriver.io');
    
    await browser.execute('smartui.takeScreenshot', {
      screenshotName: 'Homepage Screenshot'
    });
    
    await browser.execute('smartui.takeScreenshot', {
      screenshotName: 'Homepage with Options',
      ignoreDOM: {
        id: ['dynamic-element-id'],
        class: ['ad-banner']
      }
    });
  });
});

运行测试

npx wdio wdio.conf.js

在 SmartUI仪表板 查看结果。

高级选项

忽略元素

await browser.execute('smartui.takeScreenshot', {
  screenshotName: 'Ignore Dynamic Elements',
  ignoreDOM: {
    id: ['element-id'],
    class: ['dynamic-class'],
    xpath: ['//div[@class="ad"]']
  }
});

选择特定区域

await browser.execute('smartui.takeScreenshot', {
  screenshotName: 'Compare Specific Area',
  selectDOM: {
    id: ['main-content']
  }
});

资源

资源	描述
官方文档	SmartUI文档
SmartUI仪表板	访问您的SmartUI项目和构建
高级设置	配置比较敏感度
构建选项	高级构建配置