UI 测试与截图测试

概述

UI 测试和截图测试是确保图表应用稳定性和视觉一致性的关键手段。本章将介绍如何在 SwiftUI 中为图表实现自动化 UI 测试，以及如何通过截图测试验证图表的渲染效果。

UI 测试基础

1. 配置测试环境

在 Xcode 中创建 UI Test Target

导入必要的测试框架：

import XCTest
@testable import YourAppName

2. 测试图表的基本交互

测试用例示例：验证点击柱状图的数据点是否触发正确回调

func testBarChartSelection() {
    let app = XCUIApplication()
    app.launch()
    
    let firstBar = app.otherElements["bar_0"]
    XCTAssertTrue(firstBar.exists)
    firstBar.tap()
    
    let detailView = app.staticTexts["DetailView"]
    XCTAssertTrue(detailView.waitForExistence(timeout: 1))
}

3. 测试动态数据更新

模拟数据变化并验证图表更新：

func testDynamicDataUpdate() {
    let app = XCUIApplication()
    app.launchArguments.append("--testMode")
    app.launch()
    
    let updateButton = app.buttons["UpdateData"]
    updateButton.tap()
    
    let updatedBar = app.otherElements["bar_5"]
    XCTAssertTrue(updatedBar.exists)
}

截图测试实现

1. 配置截图测试

使用 XCTAttachment 保存测试截图：

func takeScreenshot(name: String) {
    let screenshot = XCUIScreen.main.screenshot()
    let attachment = XCTAttachment(screenshot: screenshot)
    attachment.name = name
    attachment.lifetime = .keepAlways
    add(attachment)
}

2. 验证图表视觉一致性

黄金文件（Golden Master）模式：

func testLineChartRendering() {
    let app = XCUIApplication()
    app.launchArguments.append("--testMode")
    app.launch()
    
    let chart = app.otherElements["LineChart"]
    XCTAssertTrue(chart.waitForExistence(timeout: 2))
    
    takeScreenshot(name: "LineChartDefault")
    
    // 与基线图片对比（需手动验证首次运行）
}

3. 多设备截图测试

使用 XCUIDevice 模拟不同设备：

func testMultiDeviceRendering() {
    let devices = [("iPhone SE", CGSize(width: 375, height: 667)),
                  ("iPad Pro", CGSize(width: 1024, height: 1366))]
    
    for (name, size) in devices {
        XCUIDevice.shared.orientation = .portrait
        app.windows.firstMatch.frame = CGRect(origin: .zero, size: size)
        
        // 执行测试并截图
        takeScreenshot(name: "Chart_\(name)")
    }
}

最佳实践

1. 测试策略建议

优先测试核心交互路径
为不同图表类型创建专门的测试套件
定期清理过期的截图基线

2. CI/CD 集成

# 示例 GitHub Actions 配置
jobs:
  ui-tests:
    runs-on: macOS-latest
    steps:
      - name: Run UI Tests
        run: xcodebuild test -scheme YourApp -destination 'platform=iOS Simulator,name=iPhone 14'
      
      - name: Upload Screenshots
        uses: actions/upload-artifact@v2
        with:
          path: /path/to/screenshots

3. 常见问题解决

动态元素定位：使用 accessibilityIdentifier

ChartView()
    .accessibilityIdentifier("MainLineChart")

异步加载处理：合理设置 waitForExistence 超时

动画干扰：测试时禁用动画

app.launchArguments.append("--disableAnimations")

案例：测试交互式折线图

class ChartUITests: XCTestCase {
    var app: XCUIApplication!
    
    override func setUp() {
        continueAfterFailure = false
        app = XCUIApplication()
        app.launchArguments += ["UI-Testing"]
    }
    
    func testPinchToZoom() {
        app.launch()
        
        let chart = app.otherElements["InteractiveLineChart"]
        let start = chart.coordinate(withNormalizedOffset: CGVector(dx: 0.5, dy: 0.5))
        let end = chart.coordinate(withNormalizedOffset: CGVector(dx: 0.6, dy: 0.6))
        
        // 模拟双指缩放手势
        start.pinch(withScale: 2, velocity: 1)
        
        // 验证缩放后的数据点数量
        let points = app.otherElements.matching(identifier: "dataPoint")
        XCTAssertLessThan(points.count, 20) // 放大后应显示更少数据点
    }
}