hoaphantn7604/react-native-element-dropdown

Not able to automate the drop down for iOS devices. Drop down options are not able to inspect through both iOS Accessibility inspector and Appium inspector

Sanoop-PM opened this issue · 1 comments

Sanoop-PM commented

Not able to automate the drop down for iOS devices.

Drop down options are not able to inspect through both iOS Accessibility inspector and Appium inspector.

Could you please let me know is there any way to make it work. We are struck with iOS automation.

Note: Android device its working fine.

react-native-element-dropdown version: 2.12.1

Code:

import React, { useState } from 'react';
import { StyleSheet, Text, View} from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';

const data = [
{ label: 'Item 1', value: '1', testID: 'testID1', itemTestIDField: 'itemTestIDField1', itemAccessibilityLabelField: 'itemAccessibilityLabelField1' },
{ label: 'Item 2', value: '2', testID: 'testID2', itemTestIDField: 'itemTestIDField2', itemAccessibilityLabelField: 'itemAccessibilityLabelField2' },
{ label: 'Item 3', value: '3', testID: 'testID3', itemTestIDField: 'itemTestIDField3', itemAccessibilityLabelField: 'itemAccessibilityLabelField3' },
{ label: 'Item 4', value: '4', testID: 'testID4', itemTestIDField: 'itemTestIDField4', itemAccessibilityLabelField: 'itemAccessibilityLabelField4' },
{ label: 'Item 5', value: '5', testID: 'testID5', itemTestIDField: 'itemTestIDField5', itemAccessibilityLabelField: 'itemAccessibilityLabelField5' },
{ label: 'Item 6', value: '6', testID: 'testID6', itemTestIDField: 'itemTestIDField6', itemAccessibilityLabelField: 'itemAccessibilityLabelField6' },
{ label: 'Item 7', value: '7', testID: 'testID7', itemTestIDField: 'itemTestIDField7', itemAccessibilityLabelField: 'itemAccessibilityLabelField7' },
{ label: 'Item 8', value: '8', testID: 'testID8', itemTestIDField: 'itemTestIDField8', itemAccessibilityLabelField: 'itemAccessibilityLabelField8' },
];

const DropdownSample4 = () => {
const [selectedItem, setSelectedItem] = useState(null);
return (

{selectedItem && Selected Item: {selectedItem.label}}
<Dropdown
testID='testID'
itemTestIDField='itemTestIDField'
itemAccessibilityLabelField='itemAccessibilityLabelField'
style={styles.dropdown}
data={data}
labelField='label'
valueField='value'
placeholder='Select Item'
value={selectedItem}
onChange={(item) => setSelectedItem(item)}
/>

</View>

);
};

export default DropdownSample4;

const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
padding: 16,
justifyContent: 'center',
alignContent: 'center',
flex: 1,
},
dropdown: {
height: 50,
borderColor: 'gray',
borderWidth: 0.5,
borderRadius: 8,
paddingHorizontal: 8,
},
});

iOS Accessibility Inspector:
image

Appium Inspector:

image
guru-5 commented

Same issue I was also facing. There is one accessible prop available in the RN for each different View elements. Its by default true for all touchable elements. So if we have any touchable element as parent then all child elements are grouped and cannot be inspected inside Appium inspector. So while checking library code, I found same thing touchable parent without this prop to be set false. So for now I have added patch file using https://www.npmjs.com/package/patch-package. And now I am able to inspect the elements. I request @hoaphantn7604 to add this prop in the coming release.

diff --git a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
index 9c6a599..968fc74 100644
--- a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
+++ b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
@@ -680,7 +680,7 @@ const DropdownComponent: <T>(
               supportedOrientations={['landscape', 'portrait']}
               onRequestClose={showOrClose}
             >
-              <TouchableWithoutFeedback onPress={showOrClose}>
+              <TouchableWithoutFeedback onPress={showOrClose} accessible={false}>
                 <View
                   style={StyleSheet.flatten([
                     styles.flex1,
diff --git a/node_modules/react-native-element-dropdown/src/components/MultiSelect/index.tsx b/node_modules/react-native-element-dropdown/src/components/MultiSelect/index.tsx
index f19c8e9..3a2dbea 100644
--- a/node_modules/react-native-element-dropdown/src/components/MultiSelect/index.tsx
+++ b/node_modules/react-native-element-dropdown/src/components/MultiSelect/index.tsx
@@ -651,7 +651,7 @@ const MultiSelectComponent: <T>(
               supportedOrientations={['landscape', 'portrait']}
               onRequestClose={showOrClose}
             >
-              <TouchableWithoutFeedback onPress={showOrClose}>
+              <TouchableWithoutFeedback onPress={showOrClose} accessible={false}>
                 <View
                   style={StyleSheet.flatten([
                     styles.flex1,
  • 👍3