react-native - 即使在添加 id 后排毒测试也无法识别 View
问题描述
如果之前有人问过这个问题,请提前道歉。我遇到了detox
用于响应本机应用程序的 e2e 框架,我想尝试一下。
我正在尝试自动化这里给出的这个演示移动应用程序 -链接
由于测试detox
用作testID
定位器之一,所以我在LoginScreenMaterial.js
里面的文件中添加了一个,app/screen/LoginScreenMaterial.js
如下所示
<View testID="login_screen" style={{width: this._width, justifyContent: 'center'}}>
<RkCard style={styles.container}>
<View rkCardHeader style={styles.header}>
<RkText/>
<RkText style={styles.label}>Sign in into your account</RkText>
</View>
然而,即使在成功构建应用程序之后,我还是通过这个简单的测试运行了应用程序
it('should have welcome screen', async () => {
await expect(element(by.id('login_screen'))).toBeVisible();
});
但是,由于无法识别元素,测试仍然失败。我在这个测试中缺少什么?我们不能在文件中testID
明确添加这样的内容吗?.js
编辑 1:添加错误消息
1) Example
should have welcome screen:
Error: Error: Cannot find UI Element.
Exception with Assertion: {
"Assertion Criteria" : "assertWithMatcher:matcherForSufficientlyVisible(>=0.750000)",
"Element Matcher" : "(((respondsToSelector(accessibilityIdentifier) && accessibilityID('login_screen')) && !(kindOfClass('RCTScrollView'))) || (kindOfClass('UIScrollView') && ((kindOfClass('UIView') || respondsToSelector(accessibilityContainer)) && ancestorThatMatches(((respondsToSelector(accessibilityIdentifier) && accessibilityID('login_screen')) && kindOfClass('RCTScrollView'))))))",
"Recovery Suggestion" : "Check if the element exists in the UI hierarchy printed below. If it exists, adjust the matcher so that it accurately matches element."
}
Error Trace: [
{
"Description" : "Interaction cannot continue because the desired element was not found.",
"Error Domain" : "com.google.earlgrey.ElementInteractionErrorDomain",
"Error Code" : "0",
"File Name" : "GREYElementInteraction.m",
"Function Name" : "-[GREYElementInteraction matchedElementsWithTimeout:error:]",
"Line" : "124"
}
]
at Client.execute (node_modules/detox/src/client/Client.js:74:13)
解决方案
我查看了该应用程序并能够使其正常工作。我在我的 devDependencies 中设置了以下内容。
"devDependencies": {
...
"jest": "23.2.0",
"detox": "8.0.0"
...
},
我还添加了 package.json
"detox": {
"configurations": {
"ios.sim.debug": {
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/BoomApp.app",
"build": "xcodebuild -project ios/BoomApp.xcodeproj -scheme BoomApp -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
"type": "ios.simulator",
"name": "iPhone 7"
}
},
我跑了detox init -r jest
然后我能够让它识别何时呈现特定屏幕我通过将 testID 添加到 ScrollView LoginScreenBlur.js 来做到这一点(第 23 行)
<AppWrapper>
<ScrollView contentContainerStyle={{flex: 1}} testID={'login_screen'}>
....
</ScrollView>
</AppWrapper>
然后e2e/firstTest.spec.js
我将测试替换为
it('should have loginScreen', async () => {
await expect(element(by.id('login_screen'))).toBeVisible();
});
这是我运行后的控制台响应detox build && detox test
node_modules/.bin/jest e2e --config=e2e/config.json --maxWorkers=1 --testNamePattern='^((?!:android:).)*$'
server listening on localhost:64579...
: Searching for device matching iPhone 7...
: Uninstalling org.reactjs.native.example.BoomApp...
: org.reactjs.native.example.BoomApp uninstalled
: Installing /Users/work/Downloads/react-native-ui-kitten-demo-app-master/ios/build/Build/Products/Debug-iphonesimulator/BoomApp.app...
: /Users/work/Downloads/react-native-ui-kitten-demo-app-master/ios/build/Build/Products/Debug-iphonesimulator/BoomApp.app installed
: Terminating org.reactjs.native.example.BoomApp...
: org.reactjs.native.example.BoomApp terminated
: Launching org.reactjs.native.example.BoomApp...
7: org.reactjs.native.example.BoomApp launched. The stdout and stderr logs were recreated, you can watch them with:
tail -F /Users/work/Library/Developer/CoreSimulator/Devices/AF406169-5CF3-4480-9D00-8F934C420043/data/tmp/detox.last_launch_app_log.{out,err}
PASS e2e/firstTest.spec.js (7.935s)
Example
✓ should have loginScreen (1499ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 8.87s, estimated 9s
Ran all test suites matching /e2e/i with tests matching "^((?!:android:).)*$".
该应用程序似乎默认启动 LoginScreenBlur,因此首先对其进行测试而不是 LoginScreenMaterial 是有意义的。
我注意到的一件事是应用程序使用RKTextInput
and RkButton
,它们不是原生组件,而是原生组件的包装器。这意味着您需要将 testID 传递给您想要拥有 testID 的本机组件。我不确定是否react-native-ui-kitten
支持可访问性标签,因此如果您希望自动输入文本和按钮点击,可能还有一些工作要做。
将 testID 添加到自定义组件
请参阅第 3 步https://github.com/wix/detox/blob/master/docs/Introduction.WritingFirstTest.md
请注意,并非所有 React 组件都支持此属性。React Native 中的大多数内置原生组件,如 View、Text、TextInput、Switch、ScrollView 都支持。如果您创建自己的复合组件,则必须手动将此道具传播到正确的本机组件。
此处给出了将 testID 添加到自定义组件的更详细说明https://github.com/wix/detox/blob/master/docs/Troubleshooting.RunningTests.md#cant-find-my-component-even-though-i -add-testid-to-its-props
简而言之,您应该按如下方式实现您的自定义组件。
自定义组件
export class MyCompositeComponent extends Component {
render() {
return (
<TouchableOpacity testID={this.props.testID}>
<View>
<Text>Something something</Text>
</View>
</TouchableOpacity>
);
}
}
使用自定义组件
那么你应该像这样使用它。
render() {
return <MyCompositeComponent testID='MyUniqueId123' />;
}
搜索层次结构
如果您已完成上述操作,并且您确定您的项目具有正确的 testID 并且测试仍然失败,那么您可以在视图层次结构中搜索它 https://github.com/wix/detox/blob/master/docs /Troubleshooting.RunningTests.md#debug-view-hierarchy
我不会完整地重复上面的帖子,但步骤是
- 在模拟器中启动可调试的应用程序(不是发布版本)
- 打开 Xcode
- 将 Xcode 附加到应用程序的进程中
- 按调试视图层次结构按钮
- 这将打开层次结构查看器,并显示应用的原生视图层次结构的细分。在这里您可以浏览视图
- React Native 的 testID 表现为原生视图层次结构中的可访问性标识符
推荐阅读
- python - 使用 praw permalink() 时出现“TypeError: 'str' object is not callable”
- android - 在片段选项卡式布局内的 RecyclerView 中滑动自定义功能
- laravel - 为什么我的 nginx 网络服务器不处理 ttf 字体?
- linux - 在 ubuntu 18.04 中使用终端安装 vscode .deb 包
- deep-learning - 经过一定数量的 epoch 后,深度 Q 学习代理的性能会下降
- javafx - 基于 ObservableList 的 TreeView 给出了不希望的结果
- c# - 在正则表达式中插入变量
- spring-boot - 如何让 Mono 等到依赖 fetch 方法运行
- c# - UpdatePanel 内的 ASP.NET C# FileUpload 和 Postback
- python - 需要帮助来模拟 xhr 请求