Appium Mobile Web Automation on a Android - Browser - Emulator (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 Android Emulator.

Prerequisites:

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

Similar Training:

• IOS - Safari - Simulator (Simple Introduction)

Code available on Git

• https://github.com/dentedghost/appium-training-matrix-mobile-web/tree/master/android-browser-emulator-simple

Accompanying Youtube Video: 

• http://youtu.be/147bHNMOOos

Tools Used:

• Mac
• Appium.dmg (1.3.6)
• Android Studio (1.2)
• Android SDK Manager (24.2)
• Emulator64-arm
• Terminal
• TextEdit
• Chrome Browser (42.0.2311)
• User-Agent Switcher (1.8.6)

Let's Begin

Open Appium.dmg 

Open Terminal  

Open Android Studio
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-browser-emulator-simple
• $ cd android-browser-emulator-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-browser-emulator-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: '5.1',
        deviceName:    'Nexus_5_API_22_x86',
        browserName:   'Browser',
    }
}

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/")  

Let's try it on a Android Nexus 5 (Emulator) running 5.1

Find deviceName

We need to make sure we have the correct emulator when we are using Appium. To do that open Android Virtual Devices:

• $ android avd
• Select:  Nexus_5_API_22_x86 or an Emulator of your choice
• Note this is where we get device name for desired_caps
• deviceName:  'Nexus_5_API_22_x86'
• API Level: 22
• Click: Start

Launch the emulator

• Click: Launch

Wait while it is starting emulator.



After Launching you should see:

Find platformVersion:

Go to About phone and get Android version

• platformVersion: '5.1'

Find browserName:

Go to DevTools -> Package Browser -> Browser

• browserName: 'Browser'

Appium - Android Settings

• Check: Use Browser
• Select in pull down: Browser
• Check: Launch AVD
• Select: Nexus_5_API_22_x86
• Select in pull down: Android
• Select in pull down: Appium
• Overwrite Platform Version: 5.1 (API Level 22)

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
• The first time the emulator starts up can take a while

What to expect

• Appium server window will display a lot of information as it starts.
• Android emulator will open shortly after that.
• Google.com then will 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/tree/master/android-browser-emulator-simple