[iOS react-native] All the elements group into one element when using Appium Inspector

Situation: Appium Inspector is grouping all elements into 1 element on iOS. However, on Android, there is no issue given it is the same react-native build, and I am using real device for automation testing.

I have done my own research about why it will be like this, and I found the issue comes down to how the react-native app is written in code level. Most point to the “accessibility id” or “accessibility label”.

Also, there is a limitation that I have no access to the source code of the app, so I can only provide rather specific idea to app. team for changing the code to make it feasible in automation on iOS.

Question (1): I would like to ask is there any tips or insights about how to change the app. code specifically? Some posts mention about accessibility label or accessibility id, but how it should be changed, is there any reference reading or few line of codes that can facilitate the explanation to the app. team about how to change the code so that the automation can work on iOS?

Question (2): There may be difficulties about pushing the app. team to conduct the code change. Assuming that they don’t want to change the code, what is the workaround for capturing the label, text, name etc. of the elements that cannot be located properly with such situation on iOS?

My thought is first we need to capture the screenshot of the app’s UI that include the elements which cannot be located and captured its attributes, and then we can use the OCR technique to capture the word in the screenshots. It sounds possible and of course it is rather time-consuming if the issue can be easily solved by just changing the app. code…

For this worst scenario, what library or tool I should use that is integrated with Appium

My programming language is Python.

Finally, attached are the screenshots of both as an iOS and Android example for your reference:

Thank you for your time !!!

iOS example (indicated the issue):

Android example (it is working fine):

Best advice is to ask the experts on this. There are forums and groups dedicated to React Native developers:

Had the same issue on iOS but only when using browser stack services. My workaround was using a local emulator and it worked for a while only to happen again without me or the dev making any changes at all. Have you found a fix or at least a cause for why is this happening ?

Also, I asked the dev to help me on this, so he added testids, accessibility ids, content desc, wrappers over elements, you name it but the appium inspector would still merge the elements into one big blob

It’s unfortunate wreed is redirecting back to the React Native community on this. What is it about this that wreed expects it to be a react-native issue?

Is there anyone from Appium that could weigh in? I’m having the same issue where the Appium inspector does not show individual items in a list.

1 Like

@Edwin_Edwin Did you ever find a solution to this?

did anyone find a solution? i also can’t find a solution for exposing all contents in iOS using react-native, suggested in here 37271

This was my problem too months ago, but we skipped testing iOS first since it seems that there’s no solution for this.

Android UiAutomator works fine, it seems like XCUITest is the problem here

We are facing the same issue that the Appium Inspector merges the components into one big component in iOS React-Native.
Is there any update regarding the issue?

React-Native version: 0.72.6
Appium Inspector version: 2023.11.1

1 Like

You can try this solution. it solved my problem

And also;
Github Issue :Accessing page content when using deeply nested React Navigation navigators on iOS Using Appium · Issue #14825 · appium/appium · GitHub