Appium Mobile Automation on Real Android Device with Chrome Browser (Simple Introduction - Step by Step Tutorial)

The training objective for this lesson is: Using Ruby and Appium write an automation that opens a web and submits a form then validates you have arrived at the correct page using Real Device using the Chrome Browser (Moto G)

Prerequisites:

• Appium Step by Step Installation: Installing Appium.dmg and Ruby on Mac

Similar Training:

• Android - Browser - Emulator (Simple Introduction)

Code available on Git

• https://github.com/dentedghost/appium-training-matrix-mobile-web

Accompanying Youtube Video: 

• https://youtu.be/N51QdzD8UW0

Tools Used:

• Mac
• Appium.dmg (1.3.6)
• adb - Android Debug Bridge (1.0.32)
• Terminal
• TextEdit
• Chrome Browser on Real Device (42.0.2311)
• Chrome Browser (42.0.2311)
• User-Agent Switcher (1.8.6)
• Moto G
• Android 4.4 KitKat

Let's Begin

Open Appium.dmg 

Open Terminal  

Open Chrome  

Code the Ruby/Appium automation

At the command prompt in terminal "$".  Don't type $

Setup the folder structure

• $ pwd
• You should see /Users/??? with ??? being your user or computer name.
• My suggestion is to create a folder called dentedghost to store the examples but you can put it anywhere you want. 
• If the directory doens't exist
• $ mkdir dentedghost
• $ cd dentedghost
• Next create a directory for this training example
• $ mkdir android-chrome-real-device-simple
• $ cd android-chrome-real-device-simple

Setup Gemfiles

We need to tell our automation program which version of appium_lib we want to use.  We also need to do this for each automation we create. More Gemfile information is available at http://bundler.io/gemfile.html.

Let's first check out the most current stable gem version of appium_lib at https://rubygems.org/gems/appium_lib/versions/ as of today the most current version is 7.0.0 as seen below:


Next we need to create the Gemfile and Gemfile.lock in the empty android-chrome-real-device-simple folder

First we need to make sure we have the correct TextEdit preferences or we can get some weird errors.

• Open TextEdit
• Open Preferences
• Update as seen below
• Select Plain Text 
• Uncheck Smart copy/past
• Uncheck Smart quotes
• Uncheck Smart dashes
• Uncheck Smart links

Gemfile is the configuration file that will tell Bundler what and which version we need to have installed.  Bundler will install what we ask and all the required dependencies.

• $ bundle init
• $ ls
• You should see Gemfile
• $ open -a TextEdit Gemfile

You should see:

Now update it to say we want to use appium_lib 7.0.0,  we can do that by adding the line:

gem 'appium_lib', '~> 7.0.0'

We can remove the commented lines to see:



Save:  File -> Save (⌘S)
Close: File -> Close (⌘W)

Now run bundler to install our file and all of it's dependencies.

• $ bundle install
• $ ls
• You should see Gemfile Gemfile.lock

The Gemfile.lock should look similar to below.  It shows all of the dependencies and which versions were installed.

Code Appium/Ruby automation

• $ touch simple.rb
• $ open -a TextEdit simple.rb

Include the needed gems:

 require 'rubygems'  
 require 'appium_lib'  

Next we need to configure our call to the Appium Server.  More information is available at http://appium.io/slate/en/master/?ruby#appium-server-capabilities.

 desired_caps = {
   caps:  {
        platformName:  'Android',
        platformVersion: '4.4',
        deviceName:    'TA96515UMI',
        browserName:   'Chrome',
    }
}

Create a new Appium driver.  More information at
http://www.rubydoc.info/github/appium/ruby_lib/Appium/Driver:initialize

Appium specific driver with helpers available.

 @appium_driver = Appium::Driver.new(desired_caps)   

Standard Selenium driver without any Appium methods.

 @selenium_driver = @appium_driver.start_driver  

Now promote appium methods to class instance methods.  More information at http://www.rubydoc.info/github/appium/ruby_lib/Appium.promote_appium_methods

 Appium.promote_appium_methods Object  

Without promoting we would need to make all calls with the @appium_driver, example:

• @appium_driver.find_element(:id, 'lst-ib') 

After promoting to a class instance method we can the method directly, example:

• find_element(:id, 'lst-ib') 

Next open the mobile version of the Google search.

 @selenium_driver.get("http://www.google.com/")  

Deep dive on getting Appium Server Capabilities (Caps)

Find platformVersion:

On your Android device the platformVersion is the Android Version :

• Go to Settings -> About Phone
• Read Android Version 
• If need truncate to one decimal place.  i.e. 4.4.4 to 4.4
• Example: platformVersion: '4.4'

Find browserName:

• Go to Settings -> Apps
• Read Browser Name
• Example: browserName: 'Chrome'

 Find deviceName:

• Go to Settings -> About Phone -> Status
• Read Serial number
• Example: browserName: 'TA96515UMI'

Appium - Android Settings

• Select Platform Name in pull down: Android
• Select Automation Name in pull down: Appium
• Select Platform Version in pull down (Overwrite if necessary)
• Example: 4.4 KitKat (API Level 19)
• Check Device Name then enter Device Name 
• Example: TA96515UMI

Enable Developer Options on your Android Device

Hidden away from the average user but easy to enable is Developer options.

• First step, plug your device into your Mac via USB

You need to navigate to "Build Number" unfortunately it can be in different places on the Android Devices.  Below are command locations to find it:

• Stock Android: Settings -> About phone -> Build number
• Samsung Galaxy S5: Settings -> About device -> Build number
• LG G3: Settings -> About phone -> Software information -> Build number
• HTC One (M8): Settings -> About -> Software information -> More -> Build number

Setting screen before Developer options is enabled:



After finding the "Build number" then tap on the section 7 times.  After two taps a notification pop should appear saying "you are now 'X' steps away from being a developer" then count down until after the 7th tap and it will say "You are now a developer!".   A Developer options section will now be present.






With Developer options enabled,  now find and tap on Developer options so we can enable USB Debugging.

• Check USB debugging
• OK "Allow USB debugging"
• OK "Allow USB debugging" for a computer with RSA Key

• Click "OK" to Allow USB debugging

• Click "OK" to Allow USB debugging for Mac computer

Make Sure Device Is Connected

• Connect your device to your Mac via USB
• Open Terminal
• $ adb devices

You should see the Device Name

Lauching Appium

• The correct command line parameters for starting the Appium server which is shown after "Launching Appium with command:"
• The right Appium server: "Welcome to Appium v1.3.6"
• A green status 200 shown the Appium server is up and running.

Example:

Running the Ruby/Appium Automation

After successfully launching the Appium server open Terminal in the directory with simple.rb.  To run the automation:

• $ ruby simple.rb

What to expect

• Appium server window will display a lot of information as it starts.
• Your device will open up Chrome
• Google.com will then be opened

Example:

Finding Elements

For mobile web,  I prefer to using Chrome after changing the user agent.

• Inspect Element in Chrome
• Chrome extension for changing user-agents

The unique identifiers for pages can be different between the web and mobile web version.  So make sure to switch the user agent to what device you will be testing on.

Let's change the user agent to Android.

• Select User Agent Switcher (or Similar)
• Select Samsung Galaxy S3 (Headset)
• Select User Agent Switcher to close

Example:


With Android User Agent select.

• open http://www.google.com

You should see the mobile version.  Now inspect the Search Box.

• Right mouse click above the Search Box -> Inspect Element (See Below)

This will spawn the inspector



The inspected details are:

 <input class="lst lst-tbb gsfi" id="lst-ib" maxlength="2048" name="q" autocapitalize="off"  
  autocomplete="off" autocorrect="off" title="" type="search" value="" aria-label="Search"   
 aria-haspopup="false" role="combobox" aria-autocomplete="both" dir="ltr"   
 spellcheck="false" style="outline: none;">  

When possible for finding mobile web elements use id.  Capturing the id since it provide a unique id and provides the fastest time to be found on the page.

• id="lst-ib"

Next Inspect the Search Button:

 <button class="lsbb" aria-label="Google Search" id="tsbb" name="btnG"   
 type="submit"> <div class="sbico"> </div> </button>  

• id="tsbb"

Add Code Automate Search

We will add code after:

 @selenium_driver.get("http://www.google.com/")  

• $ open -a TextEdit simple.rb

To ensure the page has time to load before we start add a pause

 sleep(5)  

Next we need to find the Search Box element on the page.  If we are unable to find the element the automation will fail.

 element = find_element(:id, 'lst-ib')  

Now we need to click in the Search Box before we can start to type our query.

 element.click  

Type our search command

 element.send_keys 'Steven Miller Dentedghost Appium'  

Add an extra pause for demonstration

 sleep(2)  

Find the Search Button element on the page then click on it.

 element = find_element(:id, 'tsbb')  
 element.click  

To ensure the page has time to load

 sleep(5)  

Properly close the driver and print Appium automation successful test pass message.

 driver_quit  
 puts 'Tests Succeeded!'  

Search results:



Execution Results:

 $ ruby simple.rb  
 Tests Succeeded  

Code Summary

Available at:

• https://github.com/dentedghost/appium-training-matrix-mobile-web