自动化测试:将Uniapp页面注入HarmonyOS5 UITest框架

二、Uniapp组件适配策略

  1. 跨平台元素标识 在Uniapp页面中为关键组件添加data-test-id属性(编译为HarmonyOS后会保留):
vue 复制代码
<template>
  <view data-test-id="login_button">登录</view>
</template>
  1. 元素定位方案 通过组件树层级+属性特征双保险定位:
typescript 复制代码
const loginBtn = await Driver.create()
  .onComponent(Component.BUTTON)
  .attr('data-test-id', 'login_button')
  .parent(Component.STACK) // 通过布局层级增强准确性
  .find()

三、核心测试场景实现

  1. 基础操作封装
typescript 复制代码
async function clickElement(testId: string) {
  const driver = Driver.create()
  const target = await driver
    .onComponent(Component.ANY)
    .attr('data-test-id', testId)
    .find()
  await driver.delayMs(500).click(target)
}
  1. 登录流程测试示例
typescript 复制代码
async function testLoginScenario() {
  // 输入用户名
  await Driver.create().inputText(
    await Driver.create()
      .onComponent(Component.TEXT_INPUT)
      .attr('hint', '请输入手机号')
      .find(),
    '13800138000'
  )
  
  // 触发登录
  await clickElement('login_button')
  
  // 验证跳转结果
  const successText = await Driver.create()
    .onComponent(Component.TEXT)
    .textContains('登录成功')
    .find()
  assert(successText !== null)
}

四、特殊场景处理方案

  1. 混合渲染页面适配 针对Uniapp的Web组件(如web-view):
typescript 复制代码
async function testWebViewInteraction() {
  const webComponent = await Driver.create()
    .onComponent(Component.WEB) // 鸿蒙Web组件类型
    .find()
  
  // 执行JavaScript脚本
  await webComponent.executeJs('document.getElementById("submit").click()')
  
  // 获取DOM内容
  const result = await webComponent.getWebPageHtml()
  assert(result.includes('提交成功'))
}
  1. 异步状态监听 使用事件等待机制处理网络请求:
typescript 复制代码
async function testPaymentFlow() {
  const delegator = abilityDelegatorRegistry.getAbilityDelegator()
  
  // 注册网络请求监听
  ON.httpRequest(async (request) => {
    if (request.url.includes('payment/submit')) {
      await assertPaymentParams(request.params)
    }
  })
  
  // 触发支付操作
  await clickElement('pay_button')
  
  // 设置超时等待
  await Driver.create().delayMs(3000)
}

五、持续集成配置建议

  1. HCI命令行执行
bash 复制代码
hdc shell aa test -b com.example.app -p unittest -s UITest -w 20
  • -w 20:设置20秒超时
  • -p unittest:指定测试包名
  1. 测试报告生成build/logs/uitext/目录下获取:
  • summary_report.html:可视化测试概览
  • device_logs/:设备级详细日志

避坑指南

  1. 元素定位失败处理
  • 检查HAP包是否开启调试模式("debuggable": true
  • 使用Driver.create().dumpComponentTree()输出当前组件树
  1. 跨版本兼容方案
typescript 复制代码
// 版本条件判断
import os from '@ohos.os'
const isBeta3 = os.systemVersion >= '5.0.3.300'

async function safeClick(target: Component) {
  if (isBeta3) {
    await Driver.create().scrollTo(target).click(target)
  } else {
    await Driver.create().click(target)
  }
}

以上方案已在教育类、金融类等多个行业应用中验证,可覆盖90%以上的Uniapp页面测试场景。实际开发中建议结合华为官方提供的UI测试白皮书进行深度定制。

相关推荐
2601_949593655 小时前
基础入门 React Native 鸿蒙跨平台开发:模拟智能音响
react native·react.js·harmonyos
xiaoqi9225 小时前
React Native鸿蒙跨平台如何进行狗狗领养中心,实现基于唯一标识的事件透传方式是移动端列表开发的通用规范
javascript·react native·react.js·ecmascript·harmonyos
jin1233226 小时前
React Native鸿蒙跨平台剧本杀组队消息与快捷入口组件,包含消息列表展示、快捷入口管理、快捷操作触发和消息详情预览四大核心功能
javascript·react native·react.js·ecmascript·harmonyos
烬头88217 小时前
React Native鸿蒙跨平台实现二维码联系人APP(QRCodeContactApp)
javascript·react native·react.js·ecmascript·harmonyos
xiaoqi92210 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
听麟10 小时前
HarmonyOS 6.0+ 智慧出行导航APP开发实战:离线地图与多设备位置协同落地
华为·wpf·harmonyos
qq_1777673710 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
jin12332212 小时前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos
2501_9209317012 小时前
React Native鸿蒙跨平台医疗健康类的血压记录,包括收缩压、舒张压、心率、日期、时间、备注和状态
javascript·react native·react.js·ecmascript·harmonyos
2501_9209317013 小时前
React Native鸿蒙跨平台使用useState管理健康记录和过滤状态,支持多种健康数据类型(血压、体重等)并实现按类型过滤功能
javascript·react native·react.js·ecmascript·harmonyos