高效编写 UI 测试脚本：DevEco Testing 录制与脚本编写实战

《鸿蒙UI测试实战：DevEcoTesting高阶应用》摘要：本文针对鸿蒙开发中的UI测试痛点，提出基于DevEcoTesting的解决方案。面对多设备适配、高频回归等挑战，文章详细介绍了从可视化录制到高级脚本编写的全流程实践，包含15+可复用的代码示例。重点剖析了企业级测试方案设计，涉及数据驱动、跨设备测试和CI集成。特别分享了元素定位失效等典型问题的解决策略，并探讨AI辅助测试新范式。通过音乐

2501_91445561

756人浏览 · 2025-06-11 11:12:10

2501_91445561 · 2025-06-11 11:12:10 发布

一、痛点：鸿蒙 UI 测试的挑战与 DevEco Testing 的破局

作为一名拥有 3 年实战经验的鸿蒙开发者，我深知 UI 测试在保障应用质量中的关键作用，但也时常面临以下挑战：

高频回归压力： 鸿蒙应用迭代迅速，UI 频繁变动带来巨大的回归测试负担
多设备适配成本： 从手机到智慧屏，UI 适配验证需要覆盖数十种设备规格
复杂交互验证： 分布式流转、卡片交互等鸿蒙特色功能需要特殊测试手段

DevEco Testing 的破局之道：

可视化录制： 通过操作自动生成脚本，降低编写门槛
多设备云测： 支持远程真机集群测试，解决设备碎片化问题
智能断言引擎： 自动生成元素状态验证点，提升脚本健壮性

二、核心实战：从录制到高级脚本的跨越

2.1 高效录制技巧（实战代码演示）

// 示例：录制音乐播放器的播放操作

describe('MusicPlayer Play Test', () => {
  it('Play_Music_Success', async () => {
    // 启动应用
    await driver.startApp({ bundleName: 'com.example.music' });
    
    // 录制搜索操作
    await driver.assertComponentExist($r('app.id.search_bar'));
    await driver.click($r('app.id.search_bar'));
    await driver.sendKeys('周杰伦');
    
    // 关键：添加元素等待策略
    await driver.delay(2000); // 显式等待结果加载
    await driver.waitForComponent($r('app.id.song_list'), 5000);
    
    // 选择第一首歌曲
    await driver.click($r('app.id.song_item_0'));
    
    // 智能断言播放状态
    const playBtn = await driver.findComponent($r('app.id.play_btn'));
    await driver.assertAttribute(playBtn, 'state', 'playing');
  });
});

录制优化技巧：

元素定位策略：
- 优先使用 $r('app.id.xxx') 资源ID定位
- 复杂场景使用 XPath：//Text[@text="歌曲名"]
等待机制：
- 显式等待：driver.waitForComponent(component, timeout)
- 隐式等待：driver.setImplicitTimeout(5000)
断言增强：
- 状态断言：driver.assertAttribute(comp, 'enabled', true)
- 视觉断言：driver.assertImageMatch(baselineImage)

2.2 脚本进阶编写技巧

处理动态内容：

// 动态歌名匹配
const songItems = await driver.findComponents($r('app.id.song_item'));
for (const item of songItems) {
  const name = await item.getText();
  if (name.includes('七里香')) {
    await item.click();
    break;
  }
}

封装公共操作：


// 封装登录模块
async function login(username, password) {
  await driver.input($r('app.id.username'), username);
  await driver.input($r('app.id.password'), password);
  await driver.click($r('app.id.login_btn'));
  await driver.waitForComponent($r('app.id.home'), 10000);
}

// 测试用例调用
it('User_Login_Test', async () => {
  await login('testuser', 'Test123!');
});

三、企业级测试方案设计

3.1 测试数据管理

// 数据驱动测试示例
const testData = [
  { keyword: '周杰伦', expected: 15 },
  { keyword: '林俊杰', expected: 12 }
];

testData.forEach(({keyword, expected}) => {
  it(`Search_${keyword}_Test`, async () => {
    await searchMusic(keyword);
    const items = await driver.findComponents($r('app.id.result_item'));
    await driver.assertExpect(items.length).toBeGreaterThan(expected);
  });
});

3.2 跨设备测试方案

# test_config.yml
deviceTypes:
  - phone
  - tablet
  - tv

resolutions:
  - 720x1280
  - 1080x1920
  - 2560x1440

3.3 持续集成流程

// Jenkins Pipeline 示例
pipeline {
  agent any
  stages {
    stage('UI Test') {
      steps {
        sh 'devecotest run --config test_plan.xml --device-type phone'
        archiveArtifacts 'test-report/**/*'
      }
    }
    stage('Report') {
      steps {
        publishHTML target: [
          allowMissing: true,
          alwaysLinkToLastBuild: true,
          keepAll: true,
          reportDir: 'test-report',
          reportFiles: 'index.html',
          reportName: 'UI Test Report'
        ]
      }
    }
  }
}

四、避坑指南：典型问题解决方案

4.1 元素定位失效问题

解决方案：

使用相对定位：

// 通过父元素定位子元素
const list = await driver.findComponent($r('app.id.song_list'));
const firstItem = await list.findComponent('//ListItem[1]');

启用备用定位策略：

driver.setFindComponentStrategy({
  retryInterval: 500,
  maxRetryCount: 5
});

4.2 异步加载处理

// 轮询等待元素出现
async function waitForElement(comp, timeout = 10000) {
  const endTime = Date.now() + timeout;
  while (Date.now() < endTime) {
    try {
      return await driver.findComponent(comp);
    } catch (e) {
      await driver.delay(500);
    }
  }
  throw new Error(`Element not found in ${timeout}ms`);
}

五、效能提升：AI 辅助测试新范式

5.1 智能脚本修复

当录制脚本失效时：

使用 DevEco Testing 的脚本诊断功能
自动识别失效元素路径
智能推荐新的定位策略

5.2 视觉测试自动化

// 基于CV的控件识别
await driver.visionClick('播放按钮');
await driver.visionAssertTextPresent('正在播放');

六、实战案例：音乐应用全流程测试

测试矩阵设计：

测试模块	测试场景	设备覆盖	断言点设计
播放控制	播放/暂停	手机+车机	播放状态图标变化
歌单管理	创建/删除歌单	平板+智慧屏	歌单数量同步验证
分布式播放	设备流转	多设备协同	播放状态无缝切换

关键脚本实现：

// 分布式流转测试
it('Distribute_Play_Test', async () => {
  // 手机端开始播放
  await playOnDevice('phone');
  
  // 流转到车机
  await driver.distributeTransfer({
    targetDevice: 'car_screen',
    component: $r('app.id.play_controller')
  });
  
  // 验证车机播放状态
  await driver.connectDevice('car_screen');
  await driver.assertAttribute($r('app.id.play_status'), 'active', true);
});