Applitools -岩石教程

特点

视觉 AI 技术：利用 AI 和机器学习算法进行视觉差异检测，能够智能识别真实的 UI 变化和误报。
跨平台支持：支持在不同浏览器、设备和分辨率上进行测试，确保应用程序的跨平台一致性。
CI/CD 集成：与流行的 CI/CD 工具（如 Jenkins、Travis CI、CircleCI、GitHub Actions）无缝集成，自动化视觉测试流程。
丰富的测试框架兼容性：兼容多种测试框架，如 Selenium、Cypress、Appium、Playwright 等。
团队协作：提供协作平台，团队成员可以审查、注释和管理测试结果。
详细报告：生成详细的视觉测试报告，突出显示 UI 变化和差异，便于审查和修复问题。

使用场景

视觉回归测试：捕获和比较不同版本间的视觉差异，防止意外的视觉回归。
跨浏览器和设备测试：确保应用在不同浏览器和设备上的一致性。
UI 组件库测试：自动捕获和比较 UI 组件的视觉变化。
自动化测试：集成 CI/CD 工具，自动运行视觉测试，确保持续集成中的高质量交付。

安装方式

使用 npm 安装 Applitools SDK：

npm install @applitools/eyes-selenium

使用示例

Selenium WebDriver 示例

安装依赖：

npm install selenium-webdriver @applitools/eyes-selenium

编写测试代码：

const { Builder, By } = require('selenium-webdriver');
const { Eyes, Target } = require('@applitools/eyes-selenium');

(async function example() {
  let driver = new Builder().forBrowser('chrome').build();
  let eyes = new Eyes();
  eyes.setApiKey('YOUR_API_KEY');

  try {
    await eyes.open(driver, 'Example App', 'Example Test');
    await driver.get('https://example.com');
    await eyes.check('Main Page', Target.window());
    await eyes.close();
  } finally {
    await driver.quit();
    await eyes.abortIfNotClosed();
  }
})();

运行测试：

node your-test-file.js

常用 API 介绍

eyes.open(driver, appName, testName)：初始化视觉测试。
- driver：WebDriver 实例。
- appName：应用程序名称。
- testName：测试名称。
```
await eyes.open(driver, 'Example App', 'Example Test');
```
eyes.check(name, target)：捕获截图并进行视觉比较。
- name：检查点名称。
- target：目标窗口或区域。
```
await eyes.check('Main Page', Target.window());
```
eyes.close()：结束视觉测试并提交结果。
```
await eyes.close();
```
eyes.abortIfNotClosed()：如果测试未正常结束，则终止测试。
```
await eyes.abortIfNotClosed();
```
eyes.setApiKey(apiKey)：设置 Applitools API 密钥。
```
eyes.setApiKey('YOUR_API_KEY');
```

高级用法

跨浏览器和设备测试

使用 Applitools Ultrafast Grid 可以在多个浏览器和设备配置上并行运行视觉测试：

const { Eyes, VisualGridRunner, BrowserType, DeviceName } = require('@applitools/eyes-selenium');

const runner = new VisualGridRunner(10);
const eyes = new Eyes(runner);

eyes.setApiKey('YOUR_API_KEY');

eyes.setConfiguration({
  appName: 'Example App',
  testName: 'Example Test',
  browser: [
    { width: 800, height: 600, name: BrowserType.CHROME },
    { width: 700, height: 500, name: BrowserType.FIREFOX },
    { deviceName: DeviceName.iPhone_X }
  ]
});

await eyes.open(driver);
await eyes.check('Main Page', Target.window());
await eyes.closeAsync();
await runner.getAllTestResults();

与 CI/CD 工具集成

以下是一个简单的 GitHub Actions 配置示例，用于集成 Applitools 进行视觉测试：

name: Visual Testing

on: [push, pull_request]

jobs:
  visual-tests:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Run visual tests
        run: node your-test-file.js
        env:
          APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}

Applitools

特点

使用场景

安装方式

使用示例

常用 API 介绍

高级用法

官方资料