Maestro is not able to detect element by `data-testid`

[dgrover-spotnana]

Describe the bug Maestro is not able to detect element by data-testid inside react-native-webview

To Reproduce Steps to reproduce the behavior, e.g.:

1. Start iOS simulator and open https://codesandbox.io/s/jovial-kilby-lt778f?file=/src/App.js inside react-native-webview of your react native app
2. Run maestro studio
3. In the studio, tap on the element with data-testid
4. Maestro won't be able to detect it and would rather give an option to tapOn on the point or text

Expected behavior maestro should be able detect element by data-testid

Screenshots

https://github.com/user-attachments/assets/8e2e30da-b90d-4e1c-9de9-acf5cdd859ed

Environment information:

• Maestro version: 1.36.0
• Platform: iOS Simulator
• Framework: React Native
• Device model and OS version: iPhone 15 Pro - iOS 17.4
• Host: Mac M1

Additional context The issue is NOT limited to react-native-webview but also occurs in case of a normal browser (chrome/safari etc.)

[bartekpacia]

Hey, thanks for the issue and sorry about the problem.

The problem here lies in the React Native app not exposing data-testid as "accessibility identifier" (actually it's called resource-id on Android and accessibilityIdentifier on iOS).

This SO question is relevant, this GH issue as well.

There's not much we can do on Maestro side, since we rely solely on accessibility tree.

[dgrover-spotnana]

Hey @bartekpacia , as mentioned here, data-testid is not detectable outside of react-native environment as well. See below e.g. for safari

https://github.com/user-attachments/assets/8c6d2136-8cd5-4ddc-a8a0-7a3e3ceafbfb

[bartekpacia]

Yes, this is expected, unfortunately. I assume the browser does not expose data-testid as "accessibilityIdentifier".

We can't do anything about it.

[dgrover-spotnana]

@bartekpacia , I can see an experimental support for web flows here, below is a snippet from the official docs for this

appId: "https://maestro.mobile.dev"
---
- launchApp
- tapOn:
    id: "Search…"
    index: 1
- inputText: "Tap On View"
- tapOn: "Go to page"
- assertVisible: "Taps on a view on the screen.*"

if browser does not expose data-testid as "accessibilityIdentifier", what is the id being referred to here ?

[bartekpacia]

id is literally id, from HTML.

You can refer to this example flow (my personal website was the first thing that came to my mind and was easy to reproduce):

appId: https://garden.pacia.tech
---
- launchApp
- tapOn:
    id: title-header
- tapOn:
    id: non-existent-id

There's HTML element with id title-header, so Maestro taps on it.

Now, maybe you can use id in JSX in your React Native app, and it will get translated to accessibilityIdentifier? I don't have experience with RN, sorry.

[dgrover-spotnana]

@bartekpacia , when I run the experimental web flow in my macos browser with appId: https://codesandbox.io/s/jovial-kilby-lt778f?file=/src/App.js, it does detect data-testid. It seems like the issue is not related to react-native but the platform Android | iOS itself because it doesn't detect inside mobile browser as well, for which you have already mentioned There's not much we can do on Maestro side.

So are you suggesting that for our use case, we'll probably have to rely directly on the labels/texts for assertions/actions ?

[bartekpacia]

As I said above, if the app doesn't have accessibilityIdentifier, Maestro will not be able to tap on it "by ID". However a specific app accomplishes that - we do not care. This is a matter you should ask React about (and I'll be interested in their response). For now I don't see what we can do better, so I'm going to close this issue. Feel free to comment though.

Re: experimental web driver - it's experimental, and this issue isn't about the web drvier. Please create a new issue if you have a problem/question w.r.t the experimental web driver.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar problem, please file a new issue. Make sure to follow the template and provide all the information necessary to reproduce the issue. Thank you for helping keep us our issue tracker clean!