Cannot find children of React Native app's ScrollView and TouchableWithoutFeedback

Support
1

Hi all,

I am designing a test suite for a React Native app. I had all my selectors working, but recently the developer wrapped the login screen with a <ScrollView> and <TouchableWithoutFeedback>. Now, when the app is run on an iOS simulator, I can only find XCUIElementTypeScrollView and one of its children XCUIElementTypeOther (probably the <TouchableWithoutFeedback> component wrapper. On the Appium inspector, it just shows up as one big component, with the XPath just ending where there used to be more. Is this a known issue with React Native apps? Do I have to tell the developer to change his code? Any suggestions would be great. Let me know if you need more code.

For reference, this is the React Native code:

      <ScrollView
        style={styles.scrollContainer}
        ref={ref => this.scrollView = ref}
        scrollEnabled={false}
        keyboardShouldPersistTaps={true}
      >
        <TouchableWithoutFeedback style={{flex: 1}} onPress={dismissKeyboard}>
          <View>
            {this._renderHeader()}

            <View style={styles.inputs}>
            <View accessibiltyLabel="emailLabel">
              <InputTextRow
                icon="user"
                returnTypeKey="next"
                placeholder="email"
                keyboardType="email-address"
                value={this.state.email}
                onChange={email=> this.setState({email})}
                onSubmitEditing={() => this.refs.passwordRow.refs.input.focus()}
              />
          </View>
          <View accessibiltyLabel="passwordLabel">
              <InputTextRow
                icon="key"
                ref='passwordRow'
                type="password"
                returnTypeKey="go"
                placeholder="password"
                value={this.state.password}
                onChange={password => this.setState({password})}
                onSubmitEditing={ this._handleLoginPress }
              />
            </View>

            <Button onPress={this._handleLoginPress} isActing={this.state.isActing}>LOG IN</Button>

          </View>
        </TouchableWithoutFeedback>
      </ScrollView>
2

Having the same issue too. Appium Inspector can’t find the child nodes inside the ListView. Would be great to know the solution for this.

3

Does someone find any solutions for it?

4

This is some sort of limitation on appium’s end. I had the same issue and have to ask developer to remove the scrollView.

5

It is possible to access these elements with the accessibility features. I.E. tabbing to the dropdown and then ‘arrow’ keying into the dropdown and stuff. It’s super annoying, but I was able to use a dropdown I was unable to access in the traditional ways(or even with the exact XPath through predicate or direct driver actions.)

6

For react it makes sense to switch to a webview context. It never worked properly in native context using standard accessibility features.

7

You could try to set the following property inside the parent component.

accessible={false}

This worked for me

8

what did you use instead of ScrollView and did that work for you?