How to identify UI Elements from Sencha Touch App for Testing with Appium?

Question

I am having trouble writing client-side tests using the latest version (0.4.0) of this Node.js library: https://github.com/admc/wd. I am using Sencha Touch 2.4.

I can get the selenium webdriver connected to the Appium app (v 1.4.13) server which in turn seems to load up my Sencha Touch app properly in my specified iPhone simulator. I can inspect the elements with the Appium Inspector.

However, when writing my tests, I am unable to identify any of the UI elements on my initial view of the app. In Sencha Architect I have set the button component id property to primary-login-container-new-account-button.

For example, for each of these cases below, it appears the element was never found. I'm afraid that the dynamic generation of the elements by Sencha is the reason why I can't find the elements. Yet, I've read that Selenium is an option for UI testing Sencha apps, so it must be easily possible right? My project is also wrapped in Cordova.

1.

[...]
it("should be able to click on Create New Account button1", function () {
  return driver
    .elementById('primary-login-container-new-account-button')
    .text().should.become('Create New Account');
});
// Error: [elementById("primary-login-container-new-account-button")] Error response status: 7, , NoSuchElement - An element could not be located on the page using the given search parameters. Selenium error: An element could not be located on the page using the given search parameters.

2.

it("should be able to click on Create New Account button2", function () {
  return driver
    .elementByAccessibilityId('primary-login-container-new-account-button')
    .text().should.become('Create New Account');
});
// Error: [elementByAccessibilityId("primary-login-container-new-account-button")] Error response status: 7, , NoSuchElement - An element could not be located on the page using the given search parameters. Selenium error: An element could not be located on the page using the given search parameters.

3.

it("should be able to click on Create New Account button3", function () {
  return driver
    .elementByIdOrNull('primary-login-container-new-account-button', function(err, element) {
  });
});
// returns element and err as null

4.

it("should be able to click on Create New Account button4", function () {
    return driver
      .elementByCssSelector('#primary-login-container-new-account-button')
      .text().should.become('Create New Account');
  });
// Error: [elementByCssSelector("#primary-login-container-new-account-button")] Error response status: 9, , UnknownCommand - The requested resource could not be found, or a request was received using an HTTP method that is not supported by the mapped resource. Selenium error: Invalid locator strategy: css selector

5.

it("should be able to click on Create New Account button5", function () {
  return driver
    .elementByName('createUserAccountButton')
    .text().should.become('Create New Account');
});
// Error: [elementByName("createUserAccountButton")] Error response status: 7, , NoSuchElement - An element could not be located on the page using the given search parameters. Selenium error: An element could not be located on the page using the given search parameters.

6.

 it("should be able to click on Create New Account button6", function () {
   return driver
     .waitForElementById('#primary-login-container-new-account-button', 30000)
     .text().should.become('Create New Account');
 });
 // Error: [waitForElementById("#primary-login-container-new-account-button",30000)] Element condition wasn't satisfied!
 [...]

Naman · Accepted Answer · 2016-02-10T02:16:30.880

1

Just a trial since your app is built on Cordova, inspect the element primary-login-container-new-account-button using inspect devices on Chrome/Safari. Prior to you being able to access it, there must be some attributes like css or class you must find while inspecting. Having said that if you are able to inspect them using Chrome/Safari you are viewing a webview for which you must be switching context to Webview to access the elements here.

Since elements are generated dynamically by Sencha, it might be possible that these attributes are also assigned some random key-value. In which case you would have to specify the generated value to access your view elements.

Note : It would be great to look at a screenshot of Chrome Inspected elements on the view from your application along with the Appium Inspector screenshot corresponding to the same.

edited Feb 10 '16 at 02:16

answered Feb 07 '16 at 03:49

Naman

27,789
26
218
353

Does it make a difference if I use Chrome or Safari to inspect the elements? It is a lot easier to do in Safari for iOS devices. – writofmandamus Feb 08 '16 at 20:09
I see the Id present in a parent div from the Safari inspector. I also tried calling done() from Mocha after driver initialization to make sure the tests are executed after the before block. I do see that my app view is rendered in the simulator when the first line of the first test is executed. I've also tried searching through elementsByClassName (such as the class normal-none) where I was unable to retrieve any elements. However, when I searched with UIAnormal-none, I did not get an error response, but it ended up being an empty array. My screenshots are here: http://imgur.com/a/PwfER – writofmandamus Feb 09 '16 at 01:27
Well there is no element with `primary-login-container-new-account-button` in your screenshot. Possibly wrapping it in Cordova is what is changing this. To try some luck, you could access element using the XPath on the same view to get to know if you are able to access them at all or not. On a side note : I believe you must be switching context to Webview to access the elements here. – Naman Feb 09 '16 at 03:00
The `primary-login-container-new-account-button` is shown as the id of the parent div. What are you suggesting I do about switching context to Webview. It seems to be my only option to click and expand on to see my target element in the Inspector. Correction: I didn't search the UIAnormal-none class but `UIAnone-normal` class. – writofmandamus Feb 09 '16 at 18:16
calling `driver.elementsByXPath('//UIAApplication[1]/UIAWindow[1]/UIAScrollView[1]/UIAWebView[1]/UIAStaticText[5]'` seems to work, but using the xpath to identify elements here doesn't seem feasible for writing tests. – writofmandamus Feb 09 '16 at 21:08
I get it. So to prove it. You are able to access the element but not using the names you think they should hold. Think of some class name, css that Cordova maps your app with. While inspecting could give you clearer picture. – Naman Feb 09 '16 at 21:12
I found out the reason is there's something called contexts (‘NATIVE_APP’ or ‘WEBVIEW_1’) for hybrid apps that require it to be specified. I guess this is what you were hinting at with Webview. Once Webview was set, I was able to find my elements. Maybe if you can edit your answer to show this I can give you points for it? – writofmandamus Feb 09 '16 at 23:11
Thats what i meant in the comment as well. Edited :-) @writofmandamus – Naman Feb 10 '16 at 02:17

How to identify UI Elements from Sencha Touch App for Testing with Appium?

1 Answers1