Ionic app automation with appium - release choice instead of xpath

Typically when we work with selenium automation of a website, we go with say an element id, which is intuitive, human readable and via a process can be locked down to be shared between developers and automation engineers.

Our current assignment is automation of an Android app (hybrid app using Ionic) with Appium (running on web driver context, not native context).

Things are different here since Ionic generates the HTML on its own from the code and disregards the element ids given by the developers.

So we are left with the only option of using xpath which looks like:

//UIAApplication[1]/UIAWindow[1]/UIAScrollView[2]/UIAWebView[1]/UIAButton[1] or //html/body/div[5]/div/div/div[1]/div[1]/div[3]/div[1]/div[2]/div[3]/div[2]

(note not written by developers, generated by Ionic).

This makes us uncomfortable for 2 reasons:

Not intuitive like before since we did not write it
Do not have clarity what changes by developers will cause a change in the xpath and break the automation test cases (basically need a system to prevent automation scripts from regressing because of developer code changes).
This brings me to 2 questions:

Is there a better option possible for identifying UI elements in a hybrid app than this
If not, is their an explanation for the two concerns posted above.
Any help will be much appreciated

Thanks

Is that really true?

Nope, it isn’t:

Code:
image

App:
image

@Sujan12 if i use the id click element by ID “fab-add” will it work with appium ?

No idea, I am not using Appium.

Do you have an example Ionic project on Github using Appium? Shouldn’t be too hard to replicate and try…

I’ve got a similar problem. I try to set up E2E-Tests with Appium on a Ionic3 Application.
For me it’s not clear when the Webdriver has access to “id” or “accessibility id”. Often I have only xpath as option which is not usable because of the platform specific path. I would like to have one test script which works on iOS and Android (which would work with the “accessibility ids”.

I set up a dummy-app for testing this behavior: https://github.com/olivierschmid/appium_testapp

The Home page contains a button
<button id="myButtonID" name="myButtonName" ion-button block (click)="gotoAbout()">Click me</button>

On iOS the inspector of Appium only shows xpath option. On Android there is also the “id”.
On another Ionic Apps it’s just the other way (Accessibility IDs on iOS, no IDs on Android…).

Appium_Android

Any ideas how I can tell Ionic to generate the IDs?
Thanks Oli

Here are the capabilities I used in Appium:

iOS
{
“platformName”: “iOS”,
“app”: “/Users/u105791/AppDev/testapp/platforms/ios/build/device/MyApp.ipa”,
“udid”: “12345 - uid of iPhone”,
“deviceName”: “441fabb1600ab393e963fcba2adfae975e8282d5”,
“automationName”: “XCUITest”
}

Android
{
“platformName”: “Android”,
“app”: “/AppDev/testapp/platforms/android/build/outputs/apk/android-debug.apk”,
“udid”: “12345 - uid of Samsung galaxy”,
“deviceName”: “Android”,
“automationName”: “uiautomator2”
}

Hi @olivier_schmid, we actually got a solution to this problem.
For Hybrid Apps, Webview is the preferred option for Automation using Appium.

We used to find the ID of the element generated by ionic using “Chrome Inspect” of ionic serve on to the browser and we used that ID to click the elements in Webview. ( Switch of NATIVE to WEBVIEW and viceversa is possible in Appium )

Thanks
How do I switch to WEBVIEW?
I added context=WEBVIEW to the capabilities - this has no impact.

I just tried the capability "autoWebview": true

Now the server logs:
[MJSONWP] Encountered internal error running command: Error: Could not navigate to webview; there are none!

@olivier_schmid Refer this for Switching https://appium.readthedocs.io/en/stable/en/advanced-concepts/hybrid/

if you are using Robot Framework for Automation then Checkout this Example :

Test Case
  Click A Point                             ${cx}             ${cy}
  Sleep     5
  List Contexts
  Switch To Context                         ${webview}
  Wait Until Page Contains Element          xpath=//link[@rel='canonical']                timeout=60
  Page Should Contain Element               xpath=//link[@rel='canonical'][@href='http://www.website.com/password_reset/create']
  Switch To Context                         ${native}
*** Keywords ***
List Contexts
  ${contexts}=                              Get Contexts
  ${native}=                                Get From List           ${contexts}           0
  ${webview}=                               Get From List           ${contexts}           -1
  Set Test Variable                         ${native}
  Set Test Variable                         ${webview}

A post was split to a new topic: Protractor + Appium to run tests on Android emulator?

If you are still at it: I think Appium desktop shows that for iOS you are not accessing the WebView, but only the native elements. You will have to find a way to get inside there, then the ID should be possible as well.

I’m still facing the same problem. What is best way to access Ionic elements using Appium ?

You would need to use the “autoWebview”: true capability.
It will only work, however, if the application under test was signed with a development certificate (as opposed to ‘release’ certificate, which would ‘lock’ the app, rendering the elements inaccessible).

Hi!The link is not working.If you have any other reference can you share.

I am facing the same issue.I have an ionic apk. When i getContextHandles i get only NATIVE as output. driver.context(WEBVIEW) doesnt work. I did find the id through chrome inspect but how do i use them in automation testcases