mobile-dev-inc / maestro

Painless Mobile UI Automation
https://maestro.mobile.dev/
Apache License 2.0
5.69k stars 260 forks source link

[React Native] Maestro does not see portal content (@gorhom/portal) #995

Open ghasemikasra39 opened 1 year ago

ghasemikasra39 commented 1 year ago

Current behaviour

I am trying to tap on a button that is rendered inside a portal. I am using @gorhom/portal portal implementation. I can see that non of these work:

- tapOn:
     id: "actionMenu.deleteButton"

# or

- tapOn:
     text: "Delete"

Checking the Maestro Studio, it also cannot detect the portal content. In this example we are trying to tap on the Delete button that lives inside the portal:

Screenshot 2023-04-14 at 15 24 50

Desired behaviour

Maestro should be able to pick up id or at least text inside portal content.

versions

Maestro CLI version: "1.26.0"
"@gorhom/portal": "^1.0.13"
"react-native": "0.68.2"
retyui commented 1 year ago

Can you try the same on Android and show studio screenshot ?

ArthurSav commented 1 year ago

Hi, can you make sure that the components used follow our guidelines for React Native https://maestro.mobile.dev/platform-support/react-native

CosmaTrix commented 1 year ago

Hi there,

I have the same issue (on iOS, I didn't test Android yet) using a custom Portal implementation. I tried adding the accessibility prop (false for the outer container(s) and true for the one I need to find), but no luck.

In Maestro Studio it is clearly visible the Portal and all its content is not found by Maestro. When hovering around, I get highlights for everything that's beneath the Portal.

image

christinachimi commented 1 month ago

Any update on this issue? I'm having the same problem (using the react-native-reusables PortalHost). I can't access any dialog buttons at all (I'm only testing in iOS).

christinachimi commented 1 month ago

Actually, I may have just stumbled upon something - this is specifically for react-native-reusables but maybe it can be translated to other similar portals. In the dialog primitive, I added accessible={false} to the overlay component and accessible={true} to the content component and that (so far) seems to have worked. I'll need to see if it has any other implications but maybe points in the right direction!

Edit: actually, Content doesn't work, I have to put the prop on the button itself.

nixolas1 commented 1 month ago

Clicking on content in Portals works on Android, so it's just a iOS issue. Tried setting a testID on content inside the Portal, and tapping on the ID did not work on iOS either.