Appium Mobile Web Automation on a IOS - Safari - Simulator (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.

Prerequisites:

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

Code available on Git

• https://github.com/dentedghost/appium-training-matrix-mobile-web/tree/master/ios-safari-simulator-simple

Accompanying Youtube Video: http://youtu.be/BcHiGgyTEgs

* Video has older code, please use updated code below or on github

Tools Used:

• Mac
• Appium.dmg (1.3.6)
• Xcode
• iOS Simulator (8.3)
• Terminal
• TextEdit
• Chrome Browser (42.0.2311)
• User-Agent Switcher (1.8.6)

Let's Begin

Open Appium.dmg 

Open Terminal  

Open Xcode  

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 ios-safari-simulator-simple
• $ cd ios-safari-simulator-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 ios-safari-simulator-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: 'iOS',  
      platformVersion: '8.1',  
      deviceName: 'iPhone 5s',  
      browserName: 'Safari',  
   }  
}  

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 iphone 5s (Simulator) running iOS 8.1

We need to make sure we have the correct simulator when we are using Appium. To do that open Xcode:

• Select:  Windows -> Devices (⇧⌘2)

Find the iPhone5s Simulator running on iOS 8.1 o the left side then click on it to display the Device Information.  Just make a mental note or copy the Identifier.  Example below:



Now we need to configure Appium iOS Setting.  Open Appium:

• Select:  Apple Button 

Now we need to force the device we want to use.  Unfortunately, the Force Device pull down doesn't show the associated iOS version of the simulator but does show its identifier.  That is why we used Xcode to get the identifier for the simulator we want to use.  Your identifier may be different so make sure to double check in Xcode.  Now find the correct simulator with the matching identifier in the Force Device pull down as shown below:

• Select "Use Mobile Safari" or Set BundleId to "Safari"
• Select "Force Device" 
• Choose a specific Simulator device.

There a weird bug for Force Device.  You need to remove the identifier after selecting it.  Just highlight and delete everything to the right of the device name. Example below:



Update Platform Version to 8.1

Initially, start with 8.1 or greater, I was seeing issues with 7.1.



Now to save it click on the Apple Tab.  Re-click on the Apple Tab to make sure it saved.  I've notice multiple times where it didn't save.

• Select Apple Button: 

Next Launch the Appium Server.

• Select Launch Button: 

After Launching you should see:

• 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.
• iOS Simulator will open shortly after that.
• Safari will open with the default Apple.com website
• 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 iPhone.

• Select User Agent Switcher (or Similar)
• Select iPhone
• Select User Agent Switcher to close

Example:


With iPhone 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:

 @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/ios-safari-simulator-simple