Accessing page content when using deeply nested React Navigation navigators on iOS Using Appium

[rajithaswoop]

Update:

• Tips for the react native
  • Some nested element cases, you may need to set accessible={false} in the outer element and set accessible={true} in the inner element to interact with the inner element
  • snapshotMaxDepth customSnapshotTimeout may help to control how deep Appium XCUITest get the element tree recursively
    • https://appium.github.io/appium-xcuitest-driver/latest/settings/
  • mobile: source with https://appium.github.io/appium-xcuitest-driver/latest/execute-methods/#mobile-source with excludedAttributes visible may help to make the load faster by skipping time consuming attribute resolution
    • pageSourceExcludedAttributes settings does the same thing for a general page source result
  • testID handling: https://github.com/wix/Detox/blob/master/website/versioned_docs/version-20.x/guide/test-id.md

---

problem:

Does anyone have any experience with React Navigation 5 on iOS and nested navigators?

It appears that in appium once the navigation tree hits 5 nested navigators on iOS that instead of being able to access the current pages content it returns a single XCUIElementTypeOther element.

For instance if the navigation tree looks like Stack -> Tab -> Stack -> Tab then the content tree is rendered correctly

But if there’s an extra level such as Stack -> Tab -> Drawer -> Stack -> Tab then the content tree becomes that single XCUIElementTypeOther element

I had initial thought this could be down to not using the accessible prop correctly on the view containing the content (as this can cause similar behaviour) but after testing out a number of different nested navigation configurations and setting this prop on every view I believe it’s due to this.

I don’t have this issue on Android as the same structure works perfectly fine, is there just some config I’m missing?

Environment

• Appium version 1.18.3

[KazuCocoa]

I think https://discuss.appium.io is a better place to ask such questions

[phillipkey]

@KazuCocoa This isn't really a question. It seems to be broken and easily reproducible and has been for several months with no action: #13940 There is an issue with navigating 4+ levels deep and appium not correctly navigating.

[KazuCocoa]

Do you have an example app?
It is appreciated if you already had an example app we can take a look.

If this happened with vanilla XCTest (by Apple) or Safari inspector, we probably cannot do anything on Appium side.
Then, probably report it to react native team is a proper path to report it.
This issue seems to talk about element source itself, so probably the first step if Appium can find a way to fix it is whether iOS framework can find them via their internal accessibility stuff.

[phillipkey]

@KazuCocoa we were able to come up with a reproducible test. This repo shows that any time there is a certain level of depth to the components, Appium is unable to find the desired element. In this project, the buttons in screens/Home.js are unable to be found by appium. Do you need more examples?

[mykola-mokhnach]

Thanks @phillipkey. Could you please confirm if these controls are visible in the Xcode's Accessibility manager?

[phillipkey]

@mykola-mokhnach yes. It is

[mykola-mokhnach]

@phillipkey In such case please try Appium@beta. We've refactored page source generation there, so the xml source must be identical to the source generated by XCTest. Btw, you could use the mobile: source with description format to get the native page source (http://appium.io/docs/en/commands/mobile-command/)

[SudakovDmitry]

Hi, @rajithaswoop. Try to use the solution from the thread:
facebookarchive/WebDriverAgent#854 (comment)

Use "accessible={false}" for the parent container view..

[rajithaswoop]

Hi, @SudakovDmitry , we already tried this solution and it's not working

[mathankumarinspirisys]

Hi, tried accessible={false} that is also not working. My controls are visible in the Xcode's Accessibility manager. i noticed something strange i am not sure why it is happening. Appium generated source is exactly going only upto 50 level deep. if my controls are not present till that level then appium is not able to find my controls. This repo code having the problem i am talking about. Attached the screenshot in which i travelled exactly 50 level after that the controls are grouped together and not able to find it individually. is there any other solution?

[mykola-mokhnach]

50 is the default value set to prevent endless loops. You could customize it by changing the snapshotMaxDepth setting

[mathankumarinspirisys]

Its worked. you saved our time. thanks.

[jlusnich]

Having same problem as @rajithaswoop and @phillipkey with iOS.

I tried moving some screens to upper navigator levels and Appium finds elements fine. But in 5th deep level, Appium can't find them anymore.

I'm using Appium v1.19.0-beta.0.

Also, "accessible={false}" is not working.

About 'snapshotMaxDepth', I'm setting it to 100, 200 or 300 and it is still stopping in 50. I thought that I was making a mistake when setting it, but if I set it to 5, 10, 20 I can see that limit. But with >50 is not working.

[rajithaswoop]

50 is the default value set to prevent endless loops. You could customize it by changing the snapshotMaxDepth setting

@mykola-mokhnach When snapshotMaxDepth Setting is above 60, appium is keep spinning/loading and no elements are shown in Appium Version- 1.18.3 and 1.19.0-beta.0, even after increasing snapshotTimeout.

[mykola-mokhnach]

@rajithaswoop Try to set the snapshot timeout to zero in appium@beta while retrieving the page source on this view. This would probably work, but the visibility attribute value might not be precise in some cases though. Also a full server log with device logging enabled might be in use in such case

[rajithaswoop]

@rajithaswoop Try to set the snapshot timeout to zero in appium@beta while retrieving the page source on this view. This would probably work, but the visibility attribute value might not be precise in some cases though. Also a full server log with device logging enabled might be in use in such case

@mykola-mokhnach I tried setting snapshot timeout to zero in appium@beta version, still the attribute value is not visible and appium keep spinning/loading

[mykola-mokhnach]

Unfortunately I cannot advice nothing without the detailed server log

[mykola-mokhnach]

Closed because of no response

[rajithaswoop]

Closed because of no response

@mykola-mokhnach, Sorry for the late response, need to get approval for sending the log, so now sharing the server log

appium-server-logs .txt

[jlusnich]

Hi everyone,

Here you can find two logs of the same script and the same application.
The only difference is that in the one that is working I moved one navigator to a higher level, and the screen is been reading OK. I mean, is not a screen issue with accessibility or that stuff. I can play moving screens, stacks, navigators, but when it reaches the 5th level, it stops reading the screen elements.

appium-server-not-working.txt
appium-server-working.txt

Some other info:

• With Accessibility Inspector I can reach all elements properly.
• With Android everything is working fine.

[mykola-mokhnach]

@rajithaswoop It looks like WDA has not been updated properly for your beta installation. Make sure it was removed from the device and compiled again from source. I see it, because customSnapshotTimeout key is not present in settings:

[info] �[35m[Appium]�[39m Applying the initial values to Appium settings parsed from W3C caps: {"customSnapshotTimeout":0,"snapshotMaxDepth":100}
[debug] �[35m[WD Proxy]�[39m Matched '/appium/settings' to command name 'updateSettings'
[debug] �[35m[WD Proxy]�[39m Proxying [POST /appium/settings] to [POST http://127.0.0.1:8100/session/4CD036A4-8D84-4149-A943-1CCC5A487618/appium/settings] with body: {"settings":{"customSnapshotTimeout":0}}
[debug] �[35m[WD Proxy]�[39m Got response with status 200: {"value":{"boundElementsByIndex":false,"shouldUseCompactResponses":true,"mjpegServerFramerate":10,"snapshotMaxDepth":50,"screenshotOrientation":"auto","activeAppDetectionPoint":"64.00,64.00","acceptAlertButtonSelector":"","snapshotTimeout":15,"elementResponseAttributes":"type,label","keyboardPrediction":0,"screenshotQuality":1,"keyboardAutocorrection":0,"useFirstMatch":false,"reduceMotion":false,"defaultActiveApplication":"auto","mjpegScalingFactor":100,"mjpegServerScreenshotQuality":25,"dismissAlertButtonSelector":"","includeNonModalElements":false},"sessionId":"4CD036A4-8D84-4149-A943-1CCC5A487618"}

Also, it helps to enable xcodebuild logging as it includes internal WDA traces

[mykola-mokhnach]

@jlusnich I don't observe you set the snapshotMaxDepth anywhere in your log

[rajithaswoop]

@rajithaswoop It looks like WDA has not been updated properly for your beta installation. Make sure it was removed from the device and compiled again from source. I see it, because customSnapshotTimeout key is not present in settings:

[info] �[35m[Appium]�[39m Applying the initial values to Appium settings parsed from W3C caps: {"customSnapshotTimeout":0,"snapshotMaxDepth":100}
[debug] �[35m[WD Proxy]�[39m Matched '/appium/settings' to command name 'updateSettings'
[debug] �[35m[WD Proxy]�[39m Proxying [POST /appium/settings] to [POST http://127.0.0.1:8100/session/4CD036A4-8D84-4149-A943-1CCC5A487618/appium/settings] with body: {"settings":{"customSnapshotTimeout":0}}
[debug] �[35m[WD Proxy]�[39m Got response with status 200: {"value":{"boundElementsByIndex":false,"shouldUseCompactResponses":true,"mjpegServerFramerate":10,"snapshotMaxDepth":50,"screenshotOrientation":"auto","activeAppDetectionPoint":"64.00,64.00","acceptAlertButtonSelector":"","snapshotTimeout":15,"elementResponseAttributes":"type,label","keyboardPrediction":0,"screenshotQuality":1,"keyboardAutocorrection":0,"useFirstMatch":false,"reduceMotion":false,"defaultActiveApplication":"auto","mjpegScalingFactor":100,"mjpegServerScreenshotQuality":25,"dismissAlertButtonSelector":"","includeNonModalElements":false},"sessionId":"4CD036A4-8D84-4149-A943-1CCC5A487618"}

Also, it helps to enable xcodebuild logging as it includes internal WDA traces

@mykola-mokhnach WDA was removed from device and complied from source, still the problem exists, sharing the error log
appium-server-logs-latestone.txt

[jlusnich]

@jlusnich I don't observe you set the snapshotMaxDepth anywhere in your log

Sorry about that. Here with snapshotMaxDepth and customSnapshotTimeout.

1. Running a script that goes to that desired screen and tries to find one element. Not working. If i move that screen to a higher level, it can be found fine.
   appium-server-not-working-snapshotMaxDepth.txt

2. Inspecting that screen with Appium Desktop. In the previous screens, it works fine, inspecting and finding elements. In that desired screen, I execute the 'Refresh source and screenshot' and on the left side it shows the first screen (that one when I opened the session), which of course is not present anymore.

appium-server-desktop-not-working-snapshotMaxDepth.txt

[KazuCocoa]

(past comment in this issue) #14825 (comment) may be the hint

[farouksabbek]

I'm testing an iOS app,
I'm using this capabilitys on my Appium Inspector

{
  "appium:deviceName": "iPhone 14",
  "appium:platformName": "ios",
  "appium:platformVersion": "16.2",
  "appium:bundleId": "********",
  "appium:automationName": "XCUITest",
  "appium:settings[snapshotMaxDepth]": 70,
  "appium:settings[customSnapshotTimeout]": "50000"
}

I'm using Appium 2

Appium Inspector still loading and I don't the app source

I want to get xpath element with Appium inspector

Any help please

[hmcpheewes]

Something that fixed the issue for our case was

• using createNativeStackNavigator from '@react-navigation/native-stack' instead of createStackNavigator

that removed lots of the nested views

[ncstc1]

We are setting up a new test environment using react native 0.70+

None of the previous suggestions above directly worked but we noticed that changing the scheme's Build Configuration from Debug to Release had an impact. This is with Appium 2.

After this change, given that our application has a lot of nested views, updating the customSnapshotTimeout setting (and only this one) as recommended above was required.

Cucumber tests and direct connections from inspect correctly worked after that... (they never worked with debug builds).

[cichun]

Hi👋,
a solution for some people might be to run the app in React Native New Architecture, which uses Fabric as a renderer. The Fabric uses a mechanism called View Flattening(reactwg/react-native-new-architecture#110), which reduces nested elements and might solve this problem.

A sample project(with button component on 100+ level) showing tests that fail in Old Architecture and pass when the app is built with New Architecture:
https://github.com/cichun/react-native-e2e-jest-appium-webdriverio

maybe someone finds it helpful.

[abajajct]

How can we pass snapshotMaxDepth property to browserstack with appium?

[renjieguo927]

Hello, regarding this issue, I recently encountered it too. By debugging the React Native code, I found that when I added a testID to the view, Appium was able to detect the element. I hope this method can help everyone.

[Girish-GAP]

After going through many articles, I found out that React Native creates deep navigation for iOS code. This issue is more likely to occur where we use scrollviews or flatlists. This makes it challenging for Appium to locate elements individually, causing it to combine all IDs into a single element

Here are some workarounds for this issue:

• Adjust the Appium setting by trying appium:settings[snapshotMaxDepth]": 62.
  [Note that 62 is the maximum depth Appium can support. If you exceeds this limit, Appium may behave unexpectedly, such as being unable to navigate to some pages.]

• Try setting the view "accessible" property to false from the top level. This has worked in some cases.

• Refactor your code by minimizing the number of view tags, especially in areas where you are using the scrollview and avoid using the scrollview unnecessarily

• simplify your navigation structure. This may help in minimizing hierarchy.

[Jitu1888]

@jlipps Any update on this ?

[Jitu1888]

@rajithaswoop We dont have any solution to increase the snapshot for it

[mharrison-nzme]

@jlipps Any update on this ?
+1

Experiencing on React Native 0.67.4 with React Navigation 6.
Changing from @react-navigation/stack to @react-navigation/native-stack has not helped in our case.
Changing snapshotMaxDepth to 62 or greater has not helped.

[shynonagons]

Also seeing this issue with react-native 0.72.6 and react-navigation/native 6.1.8, tried accessible={false} on parent views, eliminating container views, and increasing snapshotMaxDepth with no luck

[benzman81]

Something that fixed the issue for our case was

• using createNativeStackNavigator from '@react-navigation/native-stack' instead of createStackNavigator

that removed lots of the nested views

Same here. Fixes the issue.

[tamaniniandre]

Something that fixed the issue for our case was

• using createNativeStackNavigator from '@react-navigation/native-stack' instead of createStackNavigator

that removed lots of the nested views

thanks so much! it solved our issue!

[tamaniniandre]

Something that fixed the issue for our case was

• using createNativeStackNavigator from '@react-navigation/native-stack' instead of createStackNavigator

that removed lots of the nested views

thanks so much! it solved our issue!

actually, it did not. They changed the APP and created more nested elements in the "DOM"

[dsai05q]

Something that fixed the issue for our case was

• using createNativeStackNavigator from '@react-navigation/native-stack' instead of createStackNavigator

that removed lots of the nested views

thanks so much! it solved our issue!

actually, it did not. They changed the APP and created more nested elements in the "DOM"

Am facing same issue with my app.. is it possible to resolve by using this "createNativeStackNavigator"?

[tamaniniandre]

Something that fixed the issue for our case was

• using createNativeStackNavigator from '@react-navigation/native-stack' instead of createStackNavigator

that removed lots of the nested views

thanks so much! it solved our issue!

actually, it did not. They changed the APP and created more nested elements in the "DOM"

Am facing same issue with my app.. is it possible to resolve by using this "createNativeStackNavigator"?

Well, maybe it solves, it is worth to try.
What happened here, it solved for a short time, but once they added more components, it increased again the nested elements and the change was not enough to get all the elements I need in the screen.
Essentially, it will decrease the number of nested elements, but it will depend on the other elements in the screen.

[dsai05q]

Something that fixed the issue for our case was

• using createNativeStackNavigator from '@react-navigation/native-stack' instead of createStackNavigator

that removed lots of the nested views

thanks so much! it solved our issue!

actually, it did not. They changed the APP and created more nested elements in the "DOM"

Am facing same issue with my app.. is it possible to resolve by using this "createNativeStackNavigator"?

Well, maybe it solves, it is worth to try. What happened here, it solved for a short time, but once they added more components, it increased again the nested elements and the change was not enough to get all the elements I need in the screen. Essentially, it will decrease the number of nested elements, but it will depend on the other elements in the screen.

I have lot of elements on single screen. Like below. This all nesting inside one id.

[tamaniniandre]

Something that fixed the issue for our case was

• using createNativeStackNavigator from '@react-navigation/native-stack' instead of createStackNavigator

that removed lots of the nested views

thanks so much! it solved our issue!

actually, it did not. They changed the APP and created more nested elements in the "DOM"

Am facing same issue with my app.. is it possible to resolve by using this "createNativeStackNavigator"?

Well, maybe it solves, it is worth to try. What happened here, it solved for a short time, but once they added more components, it increased again the nested elements and the change was not enough to get all the elements I need in the screen. Essentially, it will decrease the number of nested elements, but it will depend on the other elements in the screen.

I have lot of elements on single screen. Like below. This all nesting inside one id.

yeah, a scenario very similar to mine.
I advise you to change and try.

[tamaniniandre]

Hey guys,
I created this topic in the Apple's forum, maybe if everyone send some message to bump up this subject, we can get some help from the Apple on it:

https://developer.apple.com/forums/thread/749918

[ankitgujar]

We are currently facing this issue in Appium 1.20.2 . We are about to Automate the IOS Module in our company .We have choose the Appium for Automating the same. But we see clubbed data test selector everywhere . We also used all the tweaks mentioned in the comments above, @tamaniniandre Had added this issue to Apple as well but there is no update there , too. Currently we have added snapshotMaxDepth to 60 . We are able to see most of the DTI seperated, but this still is a genuine issue that we need to solve. Kindly help if we found a more better workaround in here