视觉回归测试：Applitools vs Percy vs Chromatic，一个选择让Bug率降低97%_千锋教育

import com.applitools.eyes.*;
import com.applitools.eyes.selenium.*;

public class VisualTest {
    public static void main(String[] args) {
        Eyes eyes = new Eyes();
        eyes.setApiKey("YOUR_API_KEY");
        
        // 配置视觉AI
        Configuration config = eyes.getConfiguration();
        config.setAppName("电商平台");
        config.setTestName("首页视觉测试");
        config.addBrowser(1200, 800, BrowserType.CHROME);
        config.addBrowser(375, 812, BrowserType.SAFARI); // iPhone X
        
        eyes.setConfiguration(config);
        
        WebDriver driver = new ChromeDriver();
        eyes.open(driver);
        
        driver.get("https://example.com");
        
        // 全页截图对比
        eyes.checkWindow("首页完整视图");
        
        // 元素级对比
        eyes.checkElement(By.id("search-bar"), "搜索框区域");
        
        eyes.close();
        driver.quit();
    }
}

// cypress/integration/visual.spec.js
describe('首页视觉测试', () => {
  it('验证首页布局', () => {
    cy.visit('https://example.com');
    
    // 截取全页快照
    cy.percySnapshot('首页完整视图', {
      widths: [375, 768, 1200], // 响应式断点
      minHeight: 2000
    });
    
    // 元素级快照
    cy.get('.product-card').first().then($el => {
      cy.percySnapshotElement($el, '第一个商品卡片');
    });
  });
});

// Button.stories.jsx
import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
};

// 每个故事自动生成视觉测试
export const Primary = {
  args: {
    label: '提交订单',
    variant: 'primary',
    size: 'large',
  },
};

export const Disabled = {
  args: {
    label: '无法点击',
    variant: 'secondary',
    disabled: true,
  },
};

// 交互状态测试
export const Hover = {
  args: {
    label: '悬停效果',
    variant: 'primary',
  },
  parameters: {
    chromatic: { 
      pauseAnimation: true,
      diffThreshold: 0.2 // 差异容忍度
    },
  },
};