May 16, 2017

Build a Basic Appium Framework: Design a Basic Test, Examining Mobile Elements

This is part two of of a five-part blog series. Care to go back to the beginning

Last blog post, we reviewed installation and setup. For this one, let's write a simple mobile automation test, for this app, then investigate all mobile elements involved, with Appium Desktop.

The app we will be testing, ApiDemos-debug.apk

Our Basic Test:
  • Fire up the app, make sure the title on the first screen says “API Demos”
  • Select the “Text” button. Make sure that “LogTextBox” appears as an option.
  • Select “LogTextBox”. Make sure that the “Text/LogTextBox” header appears.
  • Select the ADD button.
  • Assert that the words “This is a test” appears in the panel.



What to Call the Pages?


When we fire up the application, we are greeted by a screen called "API Demos". Would that be a good name for this page?

Probably not. If you tap on the Text menu item, it is also called "API Demos". Hrm... how to tell the two pages apart? How about we call the first page, the Home Screen Page, and the second page, the Inner API Demos Page?

After selecting the LogTextBox menu item, we are taken to a page titled "Text/LogTextBox". Let's call it the "Log TextBox" page.

Each and every page we interact will be treated as its own Java object for easy reference. This is called the Page Object Model.

What is the Page Object Model?


"When you write tests against a web page, you need to refer to elements within that web page in order to click links and determine what's displayed. However, if you write tests that manipulate the HTML elements directly your tests will be brittle to changes in the UI. A page object wraps an HTML page, or fragment, with an application-specific API, allowing you to manipulate page elements without digging around in the HTML [...]

"Despite the term 'page' object, these objects shouldn't usually be built for each page, but rather for the significant elements on a page [1]. So a page showing multiple albums would have an album list page object containing several album page objects. There would probably also be a header page object and a footer page object. That said, some of the hierarchy of a complex UI is only there in order to structure the UI - such composite structures shouldn't be revealed by the page objects. The rule of thumb is to model the structure in the page that makes sense to the user of the application". - MartinFowler.com, Page Object, Sept 2013


Home Screen Page

We get to this page by launching the app, then investigating the action bar "API Demo".

Remember that the leftmost panel is a reflection mirroring what is on the app. If you fire up the app, the first page (which we are dubbing the "Home Screen Page") is displayed. Is it not showing up in Appium Desktop? Select the "Refresh" button. 
  • Select the action bar, "API Demos" to see how we could select that mobile element. 










Properties of the Action Bar:
  • Find By: ID 
  • Selector: android:id/action_bar. 
  • Header Text is “API Demos”. 

Properties of the Text menu item:



  • Accessibility ID is “Text”. 
  • Note that the properties of the button, Clickable: “True”. If this button had the property clickable: “false”, we could not use the button.click() property on it. We might have to figure out what the boundaries are inside the button and perform an Appium command: driver.tap


Inner Api Demos Page

We get to this page after launching the app:
  • API Demos -> Selecting Text button -> Investigating LogTextButton




  • Header selector: android:id/action_bar. 
  • Text Button: LogTextBox. Note that the accessibility id: LogTextBox, and the property of Clickable: “True”.

LogTextBox Page

We get to this page by:
  • API Demos -> Selecting the Text Button ->Selecting  the LoginTextBox button





Header: id: android:id/action_bar

ADD button: id = accesibility = "Add"

The panel is id = "io.appium.android.apis:id/text".

We have all we need!

  • A basic test case that tells us how to traverse the site! 
  • A way to interact with the mobile elements! 
Ready to start coding up our automated test?

... One more thing we need to cover: How the heck do we launch an app on our emulator using Appium?

Come back here tomorrow to find out!



Build a Basic Appium Framework


Happy Testing!

-T.J. Maher
Twitter | LinkedIn | GitHub

// Sr. QA Engineer, Software Engineer in Test, Software Tester since 1996.
// Contributing Writer for TechBeacon.
// "Looking to move away from manual QA? Follow Adventures in Automation on Facebook!"
Post a Comment