Question 34131 in React native Question posted in
The official React Native documentation can be found here.

Appium can't reach elements in iOS source tree, they are too deep. Works fine in android (with the same codebase) – React native

Different source trees from the same codebase are being created and thus Appium can’t reach elements in iOS that are seemingly way too deep.

How can I deal with this issue?

Android:
enter image description here

iOS:
enter image description here

I tried updating the snapshotMaxDepth setting to 60 and higher (even though the limit is 60), but sadly that did not fix the issue.

Edit
Appium version 1.21.0
Technology stack used to build the app is React Native

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For those who will read this in the future and have stumbled across the same issues:

    I have found that the issue itself was not because appium can not see deep enough into DOM/source tree (the issue with depth can still occur, but this was not the case for me yet). There are actually two different scenarios when stuff like this can happen and they both are to do with app code itself:

    1 - Elements are nested inside a text component

    Because of this appium will combine them into one text view and you won't be able to access the deeper elements. Solution is to move element out of the text component.

    From this:

    <Row>
  <Body>
    {text}
      <Your touchable element>
  </Body>
</Row>

    To this (obviously the styling will break, but appium will see the element):

    <Row>
  <Body>
    {text}
  </Body>
  <Your touchable element>
</Row>

    2 - Container, row or any other parent div has pressable atributes

    If any of the parent divs is considered as pressable - appium will think that that is a button and will return one combined view - by doing so not letting you to access all elements/button that are inside that container.

    For example you have:

    <Container>
  <HeaderContainer>
    <Your touchable element>
  </HeaderContainer>
</Container>

const Container = styled(Pressable)`
  flex: 1;
`;

    In this example case appium will return a one view component - that is all mushed together. What you need to do is change accessibility to false.

    This would look like this:

    <Container accessible={false}>
  <HeaderContainer>
    <Your touchable element>
  </HeaderContainer>
</Container>

const Container = styled(Pressable)`
  flex: 1;
`;

    By adding accessible={false} appium will now understand that this Container is not a accessible element and will now let you see whats deeper inside it.

    Hope this helps for the future people who stumble across the same issues :)


  2. 0

    React Native behaves differently for iOS as it does for Android. React Native has elements that are accessible. By default, all touchable elements are accessible. This indicates that the view is an accessibility element. When an element is an accessibility element, it groups its children into a single selectable component, see also https://reactnative.dev/docs/accessibility.
    It can also depend on the navigation that you/your developers are using, see appium/appium#14825

    How to overcome:

    • You can try to adjust the customSnapshotTimeout and or snapshotMaxDepth, see https://github.com/appium/appium-xcuitest-driver. Sometimes it takes to long to build up the tree and by adjusting these values you might give Appium more time to translate the tree. You mentioned you already tried it, so it might be related to the accessible elements, see next point.
    • You can check with the devs if there are accessible elements in your app and ask them to disable the property on those elements so React Native will return all children to Appium. This is normally only done for test builds and not for production
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search