Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
IOS testID does not create an accessibility id if Views are nested too deep.
See original GitHub issueDescription
If you nest <View>s too deeply adding the code ...{ testID: 'idValue'} to the <View> does not produce an accessibility id on the element. For example, I placed the following code in my App.js file
import React, { PureComponent } from 'react';
import { View, Text, StyleSheet } from 'react-native';
const style = StyleSheet.create({
container: {
alignItems: 'center',
backgroundColor: '#007DBA',
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
},
});
export default class App extends PureComponent {
render() {
return (
<View { ...{ testID: 'outer' } } style={ style.container }>
<Text { ...{ testID: 'text1' } } >text1</Text>
<View { ...{ testID: 'inner1' } } >
<Text{ ...{ testID: 'inner1_text' } }>inner1 text</Text>
<View { ...{ testID: 'inner2' } } >
<Text{ ...{ testID: 'inner2_text' } }>inner2 text</Text>
<View { ...{ testID: 'inner3' } } >
<Text{ ...{ testID: 'inner3_text' } }>inner3 text</Text>
<View { ...{ testID: 'inner4' } } >
<Text{ ...{ testID: 'inner4_text' } }>inner4 text</Text>
<View { ...{ testID: 'inner5' } } >
<Text{ ...{ testID: 'inner5_text' } }>inner5 text</Text>
<View { ...{ testID: 'inner6' } } >
<Text{ ...{ testID: 'inner6_text' } }>inner6 text</Text>
<View { ...{ testID: 'inner7' } } >
<Text{ ...{ testID: 'inner7_text' } }>inner7 text</Text>
<View { ...{ testID: 'inner8' } } >
<Text{ ...{ testID: 'inner8_text' } }>inner8 text</Text>
<View { ...{ testID: 'inner9' } } >
<Text{ ...{ testID: 'inner9_text' } }>inner9 text</Text>
<View { ...{ testID: 'inner10' } } >
<Text{ ...{ testID: 'inner10_text' } }>inner10 text</Text>
<View { ...{ testID: 'inner11' } } >
<Text{ ...{ testID: 'inner11_text' } }>inner11 text</Text>
<View { ...{ testID: 'inner12' } } >
<Text{ ...{ testID: 'inner12_text' } }>inner12 text</Text>
<View { ...{ testID: 'inner13' } } >
<Text{ ...{ testID: 'inner13_text' } }>inner13 text</Text>
<View { ...{ testID: 'inner14' } } >
<Text{ ...{ testID: 'inner14_text' } }>inner14 text</Text>
<View { ...{ testID: 'inner15' } } >
<Text{ ...{ testID: 'inner15_text' } }>inner15 text</Text>
<View { ...{ testID: 'inner16' } } >
<Text{ ...{ testID: 'inner16_text' } }>inner16 text</Text>
<View { ...{ testID: 'inner17' } } >
<Text{ ...{ testID: 'inner17_text' } }>inner17 text</Text>
<View { ...{ testID: 'inner18' } } >
<Text{ ...{ testID: 'inner18_text' } }>inner18 text</Text>
<View { ...{ testID: 'inner19' } } >
<Text{ ...{ testID: 'inner19_text' } }>inner19 text</Text>
<View { ...{ testID: 'inner20' } } >
<Text{ ...{ testID: 'inner20_text' } }>inner20 text</Text>
<View { ...{ testID: 'inner21' } } >
<Text{ ...{ testID: 'inner21_text' } }>inner21 text</Text>
<View { ...{ testID: 'inner22' } } >
<Text{ ...{ testID: 'inner22_text' } }>inner22 text</Text>
<View { ...{ testID: 'inner23' } } >
<Text{ ...{ testID: 'inner23_text' } }>inner23 text</Text>
<View { ...{ testID: 'inner24' } } >
<Text{ ...{ testID: 'inner24_text' } }>inner24 text</Text>
<View { ...{ testID: 'inner25' } } >
<Text{ ...{ testID: 'inner25_text' } }>inner25 text</Text>
<View { ...{ testID: 'inner26' } } >
<Text{ ...{ testID: 'inner26_text' } }>inner26 text</Text>
<View { ...{ testID: 'inner27' } } >
<Text{ ...{ testID: 'inner27_text' } }>inner27 text</Text>
<View { ...{ testID: 'inner28' } } >
<Text{ ...{ testID: 'inner28_text' } }>inner28 text</Text>
<View { ...{ testID: 'inner29' } } >
<Text{ ...{ testID: 'inner29_text' } }>inner29 text</Text>
<View { ...{ testID: 'inner30' } } >
<Text{ ...{ testID: 'inner30_text' } }>inner30 text</Text>
<View { ...{ testID: 'inner31' } } >
<Text{ ...{ testID: 'inner31_text' } }>inner31 text</Text>
<View { ...{ testID: 'inner32' } } >
<Text{ ...{ testID: 'inner32_text' } }>inner32 text</Text>
<View { ...{ testID: 'inner33' } } >
<Text{ ...{ testID: 'inner33_text' } }>inner33 text</Text>
<View { ...{ testID: 'inner34' } } >
<Text{ ...{ testID: 'inner34_text' } }>inner34 text</Text>
<View { ...{ testID: 'inner35' } } >
<Text{ ...{ testID: 'inner35_text' } }>inner35 text</Text>
<View { ...{ testID: 'inner36' } } >
<Text{ ...{ testID: 'inner36_text' } }>inner36 text</Text>
<View { ...{ testID: 'inner37' } } >
<Text{ ...{ testID: 'inner37_text' } }>inner37 text</Text>
<View { ...{ testID: 'inner38' } } >
<Text{ ...{ testID: 'inner38_text' } }>inner38 text</Text>
<View { ...{ testID: 'inner39' } } >
<Text{ ...{ testID: 'inner39_text' } }>inner39 text</Text>
<View { ...{ testID: 'inner40' } } >
<Text{ ...{ testID: 'inner40_text' } }>inner40 text</Text>
<View { ...{ testID: 'inner41' } } >
<Text{ ...{ testID: 'inner41_text' } }>inner41 text</Text>
<View { ...{ testID: 'inner42' } } >
<Text{ ...{ testID: 'inner42_text' } }>inner42 text</Text>
<View { ...{ testID: 'inner43' } } >
<Text{ ...{ testID: 'inner43_text' } }>inner43 text</Text>
<View { ...{ testID: 'inner44' } } >
<Text{ ...{ testID: 'inner44_text' } }>inner44 text</Text>
<View { ...{ testID: 'inner45' } } >
<Text{ ...{ testID: 'inner45_text' } }>inner45 text</Text>
<View { ...{ testID: 'inner46' } } >
<Text{ ...{ testID: 'inner46_text' } }>inner46 text</Text>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
</View>
);
}
}
When I examine the code with the Appium inspector, the last <View> with a working accessibility id is the <View> with testID “inner41”.
The <View> with testID “inner42” shows an accessibility id but the id is not accessible and an “Interactions are not available for this element” message appears.
None of the other <View>s nested under the <View> with testId “inner42” display.
React Native version:
System: OS: macOS 10.15.7 CPU: (12) x64 Intel® Core™ i7-8850H CPU @ 2.60GHz Memory: 42.29 MB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.18.4 - /usr/local/bin/node npm: 6.14.6 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 14.0, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0 Android SDK: API Levels: 28, 29, 30 Build Tools: 28.0.3, 29.0.2, 30.0.2 System Images: android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom IDEs: Android Studio: 4.0 AI-193.6911.18.40.6626763 Xcode: 12.0.1/12A7300 - /usr/bin/xcodebuild npmPackages: react: 16.8.6 => 16.8.6 react-native: 0.60.6 => 0.60.6 npmGlobalPackages: react-native-cli: 2.0.1
Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
- Create a page of nested
<View>s nested 50 deep. - Examine the page with Appium inspector.
Expected Results
We need the nesting limit to be deeper. We are bumping up against the limit in our Appium tests. This does not effect normal app usage by a person.
Snack, code example, screenshot, or link to a repository:
A code example and screenshot are presented above.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:6
- Comments:18
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Adding snapshotMaxDepth to capabilities helps:
"settings[snapshotMaxDepth]": 60I wish there was a way to bump this ticket. My guess is that it’s been forgotten and/or ignored for so long, it won’t ever get addressed.