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!
 [...]

Answer 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.