detox-skill: Generate Detox Gray-Box E2E Tests for React Native

前言

React Native 应用在真机与模拟器上的端到端测试,往往要同时处理 Jest 用例结构、Detox 的 element(by.id()) 选择器、.detoxrc.js 构建配置,以及 iOS/Android 各自的 build 命令。手写样板容易漏掉 Detox 的同步机制或误用 waitFor 轮询。下面介绍 TestMu AI 维护的 detox-skill:在对话里提到 Detox、RN E2E 或 device.launchApp 时,Agent 按该 Skill 中的模式生成 JavaScript/TypeScript 测试与配置,面向本地模拟器/仿真器,也可按文档对接 TestMu AI 云执行。

这是什么

detox-skill 是 LambdaTest agent-skills 仓库 下的 Agent Skill(SKILL.md 格式,MIT 许可,metadata 版本 1.0)。定位是:为 React Native 应用生成 Detox 灰盒 E2E 测试;Detox 在 RN 社区里是常用的原生驱动 E2E 方案,带自动同步,减少手写等待。

维护方在 metadata 中标注为 TestMu AI(LambdaTest 体系)。Skill 自述的触发场景包括:Detox、React Native E2E、React Native test、element(by.id)、device.launchApp 等关键词。

核心功能

资料中写明的能力可归纳为以下几类(均来自官方 Skill 正文,非外推)。

测试结构与生命周期

  • describe / it 组织用例;beforeAll 里 device.launchApp(),beforeEach 里 device.reloadReactNative(),避免每个用例重复冷启动。
  • 登录等流程示例:通过 testID 定位输入框与按钮,typeText、tap,再用 expect(...).toBeVisible() / toHaveText 断言。

元素定位(Matchers)

  • 优先 element(by.id('...'))(对应组件 testID)。
  • 另支持 by.text、by.label、by.type、by.traits;组合 withDescendant / withAncestor;多匹配时用 atIndex(n)。

交互与断言

  • Actions:tap、longPress、multiTap、typeText、replaceText、clearText、scroll、scrollTo、swipe、tapReturnKey 等。
  • Expectations:toBeVisible、not.toBeVisible、toExist、toHaveText、toHaveToggleValue、toHaveValue。

设备控制

  • launchApp({ newInstance: true })、reloadReactNative、sendToHome、terminateApp、installApp、shake、setLocation、setURLBlacklist 等。

反模式对照

Skill 用表格强调:不要到处 waitFor().withTimeout(),应信任 Detox 自动同步;组件应加 testID;避免每个测试都 launchApp();不要用手动 delay。

项目配置

  • 提供完整的 .detoxrc.js 示例:testRunner 指向 e2e/jest.config.js,apps 下 ios.debug / android.debug 的 binaryPath 与 build 命令,devices(如 iPhone 16、Pixel_7_API_34 AVD),以及 configurations 映射。
  • React Native 侧需在控件上设置 testID(文档给出 TextInput、Button、Text 示例)。

本地与云端

  • 本地:detox build / detox test 配合 ios.sim.debug、android.emu.debug 等 configuration。
  • 云端:Detox 生成原生测试运行器(Android Espresso、iOS XCUITest);文档给出在 TestMu AI 上上传 APK/IPA、调用 mobile-api.lambdatest.com 的 Espresso / XCUITest build 接口的步骤(需 LT_USERNAME、LT_ACCESS_KEY)。

进阶

  • 高级模式、调试、CI/CD 等指向 Skill 包内 reference/playbook.md(需从仓库获取该文件,本文不展开未抓取内容)。

安装与启用

Detox 项目侧(Skill 内 Setup)

在已有 React Native 工程中安装 Detox 与 Jest,并初始化目录结构:

npm install detox --save-dev
npm install jest jest-circus --save-dev
detox init

随后按 Skill 中的 .detoxrc.js 与组件 testID 示例调整工程路径与 scheme。

Agent Skill 侧

官方入口为 GitHub 目录:detox-skill。Skill 采用通用 SKILL.md 描述(含 name、description、languages、category: mobile-testing 等 front matter)。将该项目中的 Skill 定义按你所用 Agent 产品的 Skill 加载方式接入即可;各编辑器/CLI 的具体菜单路径以各自文档为准,本资料未单独列出 Cursor 与 Codex CLI 的差异步骤,此处不臆造。

典型用法

1、生成基础登录流测试

Agent 在 Skill 引导下应产出类似结构的用例:启动应用、每个用例前 reload RN、用 testID 填表并断言仪表盘或错误信息。

describe('Login', () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('should login with valid credentials', async () => {
    await element(by.id('emailInput')).typeText('user@test.com');
    await element(by.id('passwordInput')).typeText('password123');
    await element(by.id('loginButton')).tap();
    await expect(element(by.id('dashboardTitle'))).toBeVisible();
    await expect(element(by.text('Welcome'))).toBeVisible();
  });
});

2、本地跑 iOS / Android

先 build 再 test,configuration 名称需与 .detoxrc.js 一致:

detox build --configuration ios.sim.debug
detox test --configuration ios.sim.debug
detox build --configuration android.emu.debug
detox test --configuration android.emu.debug

只跑单个文件:

detox test --configuration ios.sim.debug e2e/login.test.js

录制与截图:detox test --record-videos all;用例内 await device.takeScreenshot('login-page')。

3、Android 云侧 Espresso(节选)

本地 build 后上传 app 与 androidTest APK,再 POST 触发 build(设备名、鉴权以 TestMu AI 账号为准):

detox build --configuration android.emu.debug

上传与触发接口见 Skill 正文中的 curl 示例(manual-api.lambdatest.com 上传、mobile-api.lambdatest.com/framework/v1/espresso/build)。

适用场景与注意

适合谁

  • 维护 React Native 应用、已采用或计划采用 Detox 的团队;需要在 Agent 对话里快速产出符合社区惯例的 E2E 用例、matcher/action 片段和 .detoxrc.js 骨架的开发者。
  • 需要在模拟器/仿真器本地验证,或按官方文档把同一套 Detox 产物推到 TestMu AI 真机云上的场景。

限制与注意

  • Skill 针对 JavaScript / TypeScript 与 Detox 体系;不是 Appium 或 Maestro 的通用移动 Skill,移动端测试类 Skill 在生态里相对少,本 Skill 绑定 Detox 与 RN。
  • 云执行依赖 LambdaTest/TestMu AI 账号与正确产物路径;示例中的设备型号字符串需与平台当前可用列表一致,以官方 API 文档为准。
  • binaryPath、xcodebuild、gradlew 命令需按你的 app 名称与目录改写;Skill 示例中的 MyApp 仅为模板。
  • 反模式表明确:稳定性依赖 testID 与 Detox 同步,而不是堆超时与 sleep。

结尾

detox-skill 把 Detox 的用例结构、选择器、设备 API、配置与本地/云执行要点收敛进一份 Agent Skill,适合在 RN 项目里系统化补 E2E 时使用。官方地址:https://github.com/LambdaTest/agent-skills/tree/main/detox-skill。

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye