如果已事先询问过,请提前道歉。我遇到了detox
e2e框架来响应本机应用程序,我想试试看。
我正在尝试自动化此处给出的演示移动应用程序-link
由于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)
答案 0 :(得分:5)
我查看了该应用程序,并使其能够正常工作。我在我的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
和RkButton
,它们不是本机组件,而是围绕本机组件的包装。这意味着您将需要将testID向下传递给您想要拥有testID的本机组件。我不确定react-native-ui-kitten
是否支持辅助功能标签,因此,如果您希望自动输入文本和点击按钮,可能还有更多工作要做。
将testID添加到自定义组件
请参阅步骤3 https://github.com/wix/detox/blob/master/docs/Introduction.WritingFirstTest.md
给出了将testID添加到自定义组件的更详细的说明。请注意,并非所有React组件都支持该道具。不过,React Native中的大多数内置本机组件(如View,Text,TextInput,Switch,ScrollView)都具有支持。如果创建自己的复合组件,则必须将该道具手动传播到正确的本机组件。
简而言之,您应该按照以下方式实现自定义组件。
自定义组件
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
中进行搜索我不会完整重复上述帖子,但步骤是
答案 1 :(得分:0)
使用AccessiblityLabel将ID添加到视图元素: https://facebook.github.io/react-native/docs/accessibility.html
答案 2 :(得分:0)
实际上,此accessibilityLabel将是您的testID,它将在您的测试工具中识别:
<TouchableOpacity
accessible={true}
accessibilityLabel={'Tap me!'}
onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableOpacity>