Watir Webdriver and JQuery

Most of the time in internet explorer, JQuery automation is little bit tricky and we need to use some methods like below only for IE browsers.

Put the below methods in to your library folder

def trigger_jquery_change(element)
$browser.execute_script(“$(‘##{element}’).change()”)
end

def trigger_jquery_onblur(element)
$browser.execute_script(“$(‘##{element}’).blur()”)
end
Script section(Including page object)

@SOME_SELECT_FIELD=$browser.select_list(:id,’ID_OF_THE_TEXT_FIELD’)

@SOME_SELECT_FIELD.when_present.select(@ANY_OPTION)
if @browser_name == “ie”
trigger_jquery_change(@SOME_SELECT_FIELD)
end

if @browser_name == “ie”
trigger_jquery_onblur(@SOME_SELECT_FIELD)
end

 

I hope there is no need to explain this code. if required please feel free to end mail to jazzezravi@gmail.com

Running Watir webdriver scripts in Browser Stack Environment

Running Watir webdriver scripts in Browser Stack Environment

Why it is required?:

If we need to run the scripts in more than 5 machines with different OS and browser versions then we may need to invest more in infrasturure. To aviod this, we will have Test server in Browserstack.

 

1. Create trail account in http://www.browserstack.com/

2. Copy the Authentication URL from your acoutn page

3. Run the below code

require ‘rubygems’
require ‘watir-webdriver’

include Selenium

caps = WebDriver::Remote::Capabilities.htmlunit(:javascript_enabled => true)
caps.platform = :WINDOWS
caps[:name] = “Watir WebDriver”
caps[:browser] = “chrome”
caps.version = 20
caps[“browserstack.debug”] = “true”
caps[“browserstack.tunnel”] = true

browser = Watir::Browser.new(:remote,
:url => “PASTE BTASCK URL HERE”, # Sample http://raveendran:x6XqqrJzJ9gUZ7sr@hub.browserstack.com/wd/hub
:desired_capabilities => caps)

browser.goto “http://google.com/”

sleep 9 # You should use wait methods instead of sleep
puts browser.title
browser.quit

Pros:

Easy implementation with any exisitng framework

Cons:

The execution speed will be 2x~3x slow when comparing with your local machine execution.

Solution for watir-webdriver not running with chrome

Problem:

watir-webdriver not running with chrome

Solution:

1. >gem update selenium-webdriver

2.>gem update watir-webdriver

3. Download latest ChromeDriver and paste it under C:\ruby192\bin

Get the Version detail of opened Selenium/Watir Webdriver Browser

Code for Selenium WebDriver IE Browser :

require 'rubygems'

require 'selenium-webdriver'

br=Selenium::WebDriver.for :ie

ie=br.execute_script("return navigator.userAgent;")

# Ex. "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C)"

puts ie.split("MSIE ")[1].split(";")[0]

OUTPUT  –> 9.0

——————————————————————————————————————————————-

Code for Selenium WebDriver Firefox Browser :

require 'selenium-webdriver'

br=Selenium::WebDriver.for :ff

ff=br.execute_script("return navigator.userAgent;")

# Ex. "Mozilla/5.0 (Windows NT 6.1; rv:12.0) Gecko/20100101 Firefox/12.0"

puts ff.split("/")[-1]

OUTPUT  –> 12.0

——————————————————————————————————————————————-

Code for Watir WebDriver IE Browser :

require 'rubygems'

require 'watir-webdriver'

br=Watir::Browser.new :ie

ie=br.execute_script("return navigator.userAgent;")

puts ie.split("MSIE ")[1].split(";")[0]

OUTPUT  –> 9.0

——————————————————————————————————————————————-

Code for Watir WebDriver Firefox Browser :

require 'rubygems'

require 'watir-webdriver'

br=Watir::Browser.new :ff

ff=br.execute_script("return navigator.userAgent;")

puts  ff.split("/")[-1]

OUTPUT  –> 12.0

——————————————————————————————————————————————-

Verify the Element Height/Width in different browser dimensions using Selenium/Watir Webdriver

Selenium WebDriver Code :

require 'rubygems'
require 'selenium-webdriver'

browser=Selenium::WebDriver.for :ie

browser.navigate.to(“google.com”)

width1=browser.find_element(:id,’hplogo’).style(“width”)
height1=browser.find_element(:id,’hplogo’).style(“height”)

browser.manage.window.resize_to(200,600)
width2=browser.find_element(:id,’hplogo’).style(“width”)
height2=browser.find_element(:id,’hplogo’).style(“height”)

if width1=width2
puts “Test Case Passed : Width is not changed”
else
puts “Test Case Failed : Width is changed”
end
if height1=height2
puts “Test Case Passed : Height is not changed”
else
puts “Test Case Failed : Height is changed”
end

browser.close

OUTPUT:

Test Case Passed : Width is not changed
Test Case Passed : Height is not changed

Watir WebDriver Code :

require 'rubygems'
require 'watir-webdriver'

browser=Watir::Browser.new :ie

browser.goto(“google.com”)

width1=browser.div(:id,’hplogo’).style(“width”)
height1=browser.div(:id,’hplogo’).style(“height”)

browser.window.resize_to(200, 200)

width2=browser.div(:id,’hplogo’).style(“width”)
height2=browser.div(:id,’hplogo’).style(“height”)

if width1=width2
puts “Test Case Passed : Width is not changed”
else
puts “Test Case Failed : Width is changed”
end
if height1=height2
puts “Test Case Passed : Height is not changed”
else
puts “Test Case Failed : Height is changed”
end

browser.close

 

OUTPUT: 

Test Case Passed : Width is not changed
Test Case Passed : Height is not changed

 

Automating ‘Auto Complete’ text field using Watir-WebDriver

Requirement:

1. Navigate to Google.com

2. Type “Ravee” in text Field

 3. Select “Raveendran” from Auto Complete option from Suggested option.

Steps to Solve the issues:

1. Navigate to Google.com

2. Type “Rav” in text Field

3. Using IE Developer Tool Bar –> Click The suggested Option (So You will get the source code for suggestion lists)

4. Find the parent id –> Ex. It should TABLE mostly.

So we have Table id/name/class

5. Collect All the Rows under this table

6. Check the text for each and every row

7. If Any one of the row matches  “Raveendran”

8. Then Simply Click It

Code:

require 'rubygems'
require 'watir-webdriver'

browser=Watir::Browser.new :ie
browser.goto("google.com")

browser.text_field(:name,"q").set("Ravee")
sleep 3
auto_content=browser.table(:class,'gssb_m').trs

auto_content.each do |g|
  if g.text.downcase == "raveendran"
    g.click
    sleep 3
    break
  end
end

 

Demo –> http://bit.ly/j_autocomplete_watir

RSpec + Watir WebDriver

Installation:

1. Install Ruby

2. CMD>gem install watir-webdriver

3. CMD>gem install rspec

Code:

google_search.rb

require 'rubygems'
require 'watir-webdriver'

class Google
def search(browser,term,result)

if browser.downcase=="ie"
br= :ie
elsif browser.downcase=="ff"
br= :ff
elsif browser.downcase=="chrome"
br= :chrome
else
br= :ie
end

$ie=Watir::Browser.new br
$ie.goto("http://google.com")
$ie.text_field(:name,'q').set(term)
sleep 3
$ie.button(:name,'btnG').click
sleep 3
$result=$ie.text.downcase.include?(result)

$ie.close
end

end

googleSearch_spec.rb

require 'rubygems'
require 'rspec'
require 'google_search'

describe Google, "#Searchresult" do
it "returns the expected result in search result page" do
bowling = Google.new
bowling.search("chrome","Raveendran","ruby")
$result.should eq(true)
end
end

describe Google, "#Searchresult" do
it "returns the expected result in search result page" do
bowling = Google.new
bowling.search("chrome","Raveendran","wordpress")
$result.should eq(true)
end
end

describe Google, "#Searchresult" do
it "returns the expected result in search result page" do
bowling = Google.new
bowling.search("chrome","Watir, Selenium,Cucumber highline","raveendran")
$result.should eq(true)
end
end

describe Google, "#Searchresult" do
it "returns the expected result in search result page" do
bowling = Google.new
bowling.search("chrome","Ruby highline","raveendran")
$result.should eq(true)
end
end

RUN THE RSPEC code:

1. Navigate to the folder where files available

>rspec googleSearch_spec.rb

 

OUTPUT:

It will launch Chrome browser and will execute the test cases. Finally You will get the output like,

Started ChromeDriver
port=4113
version=14.0.836.0
.Started ChromeDriver
port=4164
version=14.0.836.0
.Started ChromeDriver
port=4218
version=14.0.836.0
.Started ChromeDriver
port=4260
version=14.0.836.0
.

Finished in 77.28 seconds
4 examples, 0 failures

 

Watir WebDriver — Handling New Window

Situation:

1. You are in Parent Page.
2. Clicking link “Open” in Parent page.
3. It opens new window
4. You need to do actions  there and come back to your parent window

Solution:

To Click the Link

require 'rubygems'
require 'watir-webdriver'
ff=Watir::Browser.new :ff
ff.goto("website.com")
ff.link(:text,'open').click

To handle the New window and performing some actions within that window,

ff.window(:title,/TITLE of the new window/i).use do
ff.send_keys('SampleText')
ff.button(:id,'insert').click
puts ff.title #returns the new window title
end

within a loop The button belongs to Newly opened window.

puts ff.title #returns the parent window title

Watir-webdriver cheatsheet

Getting Started

Load the Watir Webdriver library

require 'watir-webdriver'

Open a browser (Ex: Internet Explorer)

driver = Watir::Browser.new :ie

Go to a specified URL

driver.goto 'http://www.orbitz.com/'

Close the browser

driver.close

Access an Element

Type something in the Text box or text area

driver.text_field(:id,'airOrigin').set("MAA")

To Clear the text from text field 

driver.text_field(:id,'airOrigin').clear

Button

To click the button
driver.button(:id,'BUTTON_ID'').click

Drop down list

To select the value from list
driver.select_list(:id,'airStartTime').select("1 am")

To get the selected value from select field
 driver.select_list(:id,'airStartTime').value

Check box

To clik the check box

driver.checkbox(:id,'airNonStopsPreferred').click
OR
driver.checkbox(:id,'airNonStopsPreferred').set
To know the clicked? or not ?
driver.checkbox(:id,'airNonStopsPreferred').set?

Radio button driver.radio(:id,'htlChoice').click

To verify Flights radio button selected or not

driver.radio(:id,'htlChoice').set?

#if it returns TRUE then radio button already selected.

To get the title of the webpage puts driver.title

Return true if the specified text appears on the TAG

 puts driver.li(:class,'welcomeText').text.include("Welcome to Orbitz")

To Click SPAN Elements driver.span(:text,'Find Flights').click

Sample Page Object Model for Watir-WebDriver

This is the sample code for creating the page objects in separate file.

page_object_sample.rb

def config
  #common Settings
  @browser="ie"
end

def google_homepage
  #Web Application URL details
  @url="http://google.com"
  #Google Homepage Page Object Models
  @search_field=$browser.text_field(:name,'q')
  @search_button=$browser.button(:name => 'btnG')
end

def bing_homepage
  @url = "http://bing.com"
  @search_field=$browser.text_field(:id,'sb_form_q')
  @search_button=$browser.button(:name => 'go')
end

———————————————————————————————————

Code.rb

require 'watir-webdriver'
require 'd:\\page_object_sample.rb'

config
  $browser = Watir::Browser.new @browser.to_sym
google_homepage
  $browser.goto @url
  @search_field.set("Raveendran - Watir Webdriver")
  @search_button.click
  puts $browser.title

bing_homepage
  $browser.goto @url
  @search_field.set("Raveendran - Watir Webdriver")
  @search_button.click
  puts $browser.title

  $browser.close

NOTE:

a. We can create the page object model with,
     1. IE Developer tool bar for IE browser
     2. Firebug for Firefox browser.
b.  This is the sample and basic page object model code. 
We can customize/develop depends up on our requirement.

c. If the page object will change in future then No need
 to worry about the actual script. Just updating the page
 object model will fix those kind of issues.