Appium - React-Native - Elements that are not on the screen are still shown in the element tree

Question

This problem is only appearing on iOS.

The application is built with react-native 0.57.7 and on an iOS build in the element tree in Appium Inspector, there are elements that are not shown on the screen.

For example, we have a list of products but only a few are displayed on the screen but the product list has 180 items and in Appium Inspector all the 180 items are shown.

I have tried using the accessibilityElementsHidden={false} property from react-native but it did not work, all the elements were shown anyway.

What can we do in order to display only the displayed elements from the screen in Appium Inspector?

Answer 1

In this case, Appium Studio can be a better option. They have object identifying attributes like 'onScreen' (Whether present on the screen), 'top' (Whether its on the topmost layer). And the attribute 'top' displays only the visible elements. They have a built-in object spying feature like Appium Inspector. Check out their documentation for more info