How to setup unique accessibility IDs for Capacitor components to use with Appium

[rocklaam]

Hey guys, my project has finished building an App using Capacitor and React. Currently, we are setting up a Java Appium project to automate test cases with this app. We are trying to add accessibility IDs or class names for React components like this:

However, when running the testing .apk (Android) and .ipa (iOS) file with the Appium inspector, all components were transformed into native flatform components like this:
[Android]

and [iOS]

In Android, we can get component's ids via resource-id, but we can't in iOS builds.

Is our approach a proper solution or do we need to follow another way? In case our solution is correct, what do we need to get Ids for the iOS platform?

Looking forward to your answers, thank you very much!

[facundofacio]

@rocklaam have you found a solution? I am facing the same issue

[mlynch]

I'm confused. You're writing React in a web view? There's no reason you'd see native Android views for those elements. The way to add accessibility ids to elements in your web view in a capacitor app is to just add id attributes or something else and then use dom queries. This works very well when using webdriverio with appium

[facundofacio]

@mlynch am facing a similar issue with a Vue + Capacitor app

[mlynch]

@facundofacio exact same advice applies: just query elements by id or other DOM selectors. Here's an example from an e2e example we put together using webdriverio + appium: https://github.com/ionic-team/ionic-e2e-example/blob/main/tests/pageobjects/map.page.ts

Here's the official webdriverio docs for querying for elements: https://webdriver.io/docs/api/browser/$

I strongly recommend using webdriverio + appium rather than appium on its own

I'm really not sure what's going on in your example because it makes no sense why those would be recognized as native controls because they are in the webview. Make sure you are switching to the webview context as shown here: https://github.com/ionic-team/ionic-e2e-example/blob/fffed0d77fad002953ec108d2b40416e8d1e1766/tests/helpers/platform/index.ts#L21

[clorichel]

Facing the exact same issue: unable to safely target iOS elements with a (webdriver + appium) selector because the html element id isn't flowing down to the iOS component. @capacitor/core@5.7.6, webdriverio@8.39.0 and BrowserStack users here.

@mlynch not sure how you got it working on your ionic-e2e-example, because we only see contexts: [ 'NATIVE_APP' ] when we do getContexts, so the switchToWeb call just fails. Appium Inspector agrees:

To be clear:

• we'd LOVE to use css selectors which would be cross-compatible (Android+iOS),
• and avoid having to rely on $('//XCUIElementTypeButton[@name="whatever name"]') selectors which would only be iOS compatible... But the webview context is just not available somehow 🤯

@rocklaam @facundofacio did you guys get anywhere since then? 🤗

[facundofacio]

• Hi @clorichel In my case (Vuejs + Capacitor), I've found a workaround of the iOS tag issue through adding the tag to the aria-label attribute, instead of the id.
• And for the case of the different XML selectors depending on the mobile platform, I finally used a mapping dictionary like this:

XMLTAGS_MAP = dict(
    android=dict(
        button="android.widget.Button",
        edit_text="android.widget.EditText",
        password_field="android.widget.EditText",
        other="android.view.View",
        view="android.view.View",
        link="android.view.View",
        text_view="android.widget.TextView",
        full_tree="*",
    ),
    ios=dict(
        button="XCUIElementTypeButton",
        edit_text="XCUIElementTypeTextField",
        password_field="XCUIElementTypeSecureTextField",
        other="XCUIElementTypeOther",
        view="XCUIElementTypeOther",
        link="XCUIElementTypeLink",
        text_view="XCUIElementTypeStaticText",
        full_tree="*",
    ),
)