Getting current window size 12/08/2013
# Getting the window size 
size = browser.window.size

# Height and width can be checked with
p size.height
p size.width

In some cases it can be useful to check the size of the currently active window even though setting the size is a more common operation.

Deleting multiple characters 12/08/2013
# Sending the backspace key to an input a number of times
5.times { browser.input(id: 'password').send_keys(:backspace) }

# or with the do block
5.times do
  browser.input(id: 'password').send_keys(:backspace)
end

Instead of deleting characters one at a time, the same operation can be repeated as many times as required with the ruby times operator.

Deleting characters one at a time 12/08/2013
# Sending the backspace key to an input
browser.input(id: 'password').send_keys(:backspace)

Deleting characters one at a time can be useful when testing, for example, form validation to see how the validation behaves when the text becomes shorter than the minimum.

Finding images on page 17/05/2013
# Finding all images on a page
browser.images

# Finding images inside of an element
browser.div(id: 'container').images

# Finding images based on their class
browser.images(class: 'thumbnail')

Finding images on the page can be done in several ways. The code above contains several ways to find multiple images on a page.

Clearing a text field 04/03/2013
# Clearing the value of a text field with a specific ID
browser.text_field(id: 'text_field_with_a_value').clear

In addition to setting the value of a text field, it can also be cleared. Clearing the field can be done with the .clear method.

Hovering over elements 04/03/2013
# It is easiest to test with an element that changes visually when hovering over it

# Hovering over a link
browser.link(id: 'link-with-hover-effect').hover

# Hovering over a div
browser.div(id: 'div-with-hover-effect').hover

Hover is a method that exists for all HTML elements and can be accomplished by finding an element and calling the hover method on it.

Sending a key to an element 15/01/2013
# Using send_keys to submit information
browser.text_field(id: 'email').send_keys(:enter)

# Use send_keys to scroll a page down in a text area element
browser.textarea(id: 'document').send_keys(:page_down)

One way to send input or other special characters to an element on the page is to use the send_key command.

A full list of keys that can be used can be found from

Selenium documentation

Closing a window 12/12/2012
# browser.window refers to a new window that was opened in the test
browser.window.close

# In case multiple new windows are opened, the following can be used
browser.windows.each do |w|
  w.close if w.title =~ /window to be closed/
end

# Alternatively, the map method can be used in the folowing way
browser.windows.map { |w| w.close if w.title =~ /window to be closed/ }

Closing a window, for example, after testing if a link opens a new window can be done as shown in this droplet.

Getting the status of a checkbox 28/11/2012
# Getting the status of a checkbox identified by an ID (using Ruby 1.9 hash syntax)
browser.checkbox(id: 'checkbox-id').set?

# Getting the status of a checkbox identified by a class name (using Ruby 1.9 hash syntax)
browser.checkbox(class: 'checkbox-class').set?

The status of a checkbox can be checked with the methods above. The calls return a boolean value, i.e. true or false.

Checking a checkbox 28/11/2012
# Setting a checkbox identified by an ID (using Ruby 1.9 hash syntax)
browser.checkbox(id: 'checkbox-id').set

# Setting a checkbox identified by a class name (using Ruby 1.9 hash syntax)
browser.checkbox(class: 'checkbox-class').set

Setting a checkbox is quite straightforward in watir-webdriver. First, the element on the page needs to be found with one of the available methods. Once a reference to the element is available, the set method can be used to set it. The same method is available for radio buttons.

Starting a browser with a specific profile 10/10/2012
# Starting the browser with a new default profile
profile = Selenium::WebDriver::Firefox::Profile.new
browser = Watir::Browser.new :firefox, :profile => profile

# Starting the browser with a modified profile
profile = Selenium::WebDriver::Firefox::Profile.new
profile.native_events = false
browser = Watir::Browser.new :firefox, :profile => profile

It is sometimes useful to start the browser with a specific profile. It could be due to wanting to have an addon available while running tests (Firebug) or something else, like disabling native events as shown in the example above.

Catching exceptions 24/08/2012
begin
  browser.link(:id => 'not existing').click
rescue Watir::Exception::UnknownObjectException
  # Do something useful
  p "Element not found"
end

Sometimes there are exceptions coming back from the webdriver due to several possible problematic situations. For example, an element is not found or it is not clickable. The tests should not break in such a situation but the exceptions should be handled gracefully.

Switching to a window 24/08/2012
# Using a specific window provided that the user already knows which window to select
browser.window.use

# If the user first needs to find a window, one way is to loop through windows and 
# compare a specific attribute. For example:
browser.windows.each do |w|
  w.use if w.title =~ /Google/
end

# The above could cause havoc in there are multiple windows with a similar title.
# Do be careful with the conditions.

WebDriver has methods to use a specific window in case multiple windows are open. The user will first have to find the one that he wants to use. Ways to do that include comparing the title or the URL to the expected one.

Using regular expressions to match a CSS class 13/08/2012
# The following will match for a part of the CSS class(es) of a DIV element and 
# returns the element
browser.div(:class => /active/)

# The following checks if a DIV with a class of active exists
browser.div(:class => /active/).exists?

Matching a partial CSS class or one of several CSS classes can be done using the regular expression operator as shown above.

Getting the page title 13/08/2012
# Retrieving browser title is very simple
browser.title

# Comparing the page title to a string can be done with an rspec matcher
browser.title.should == title

Making sure that the page titles are correct is important from the SEO point of view. Getting the title of a page with watir-webdriver is very easy after which the title can be compared to an expected value.

Waiting for an element to disappear 06/08/2012
# Wait while the element, in this case a link, is present on the page.
# The timeout is by default 30 seconds.
browser.link(:id => '<link_id>').wait_while_present

Sometimes it is useful to wait until an element disappears from the page. That can be achieved with the code above.

Waiting with a block 06/08/2012
# Waiting until a condition in the block is true. In this case until a DIV with ID of 
# navigation to be visible.
Watir::Wait.until {
  browser.div(:id => 'navigation').visible?
}

# A timeout can be provided here too
Watir::Wait.until(10) {
  browser.div(:id => 'navigation').visible?
}

You can define a block to wait for specific conditions, which by default timeouts after 30 seconds. This can be useful when waiting an element in some other part of the page before acting on an element.

Waiting for elements to be present 06/08/2012
# Click on the link only when it's present. Timeouts after 30 seconds by default
browser.link(:id => '<link_id>').when_present.click 

# Wait no more than 5 seconds for the element to be available
browser.link(:id => '<link_id>').when_present(5).click 

There are multiple ways to wait for an element to be present on a page. Webdriver waits for elements by default for a configurable amount of time. To have a specific wait time for an element, the approach above can be used.

Finding an element inside of another element 26/07/2012
# Finding the containing element, for example a div
containing_element = browser.div(:id => 'footer')

# Finding a link inside of the containing element, i.e. footer 
link = containing_element.link(:class => 'footer_link')

It is in many cases useful to restrict finding of an element to another element containing it. For example, navigation links in the top navigation or footer link in the footer.

Finding elements inside of iFrames 26/07/2012
# Finding the frame first
frame = browser.frame(:id => '<iframe_id>') 

# Finding a link inside of the frame
element = frame.link(:id => '<link_id>')

When accessing page elements in iframes, one needs to use the reference to the frame and then find elements inside of it with the usual watir-webdriver syntax. The element inside of the frame could be anything but a link is used in this example.

Retrieving all links on a page 26/07/2012
# all links
browser.links

# all links with the CSS class of navigation
browser.links(:class => 'navigation')

Retrieving multiple elements is as simple as using the plural form of the element name. Similar qualifiers as when searching for a single element can be used.

Finding a link with title 26/07/2012
browser.link(:title => "<link title>")

A link can be found with multiple methods. Sometimes using the title attribute is a good way to find it.

Taking a PNG screenshot 26/07/2012
# The following method is updated to use the new screenshot API.
# Thanks @p0deje for the information

# Taking a screenshot
browser.screenshot.png
browser.screenshot.base64

# Saving a screenshot to a file
browser.screenshot.save "<name of file>.png"

# The old selenium-webdriver based method is still available too
browser.driver.save_screenshot("<name of file>.png")

The screenshot functionality of Webdriver has been updated to have it's own method instead of the selenium-webdriver method. The filename defines the filetype of the screenshot and allows only .png.

Taking a JPG screenshot 26/07/2012
browser.driver.save_screenshot("<name of file>.jpg")

The screenshot functionality of Webdriver an be accessed with the .driver method, which taps directly into selenium-webdriver methods. The filename defines the filetype of the screenshot.

Starting Chrome 26/07/2012
browser = Watir::Browser.new :chrome

This is the command to start Chrome with watir-webdriver. All Chrome versions are started with the same command. The version that starts depends on which version is installed on the PC.

Clicking on a link 26/07/2012
browser.link(:id => '<id>').click

Page elements to be actioned upon need to be found first. In this example, a link found by specifying an ID after which it is clicked with the click method.

Finding a link with id 26/07/2012
browser.link(:id => 'link_id')

A link can be found with several methods. This tip shows how to find a link by specifying an ID.

Starting Internet Explorer 26/07/2012
browser = Watir::Browser.new :internet_explorer

This is the command to start Internet Explorer with Webdriver. All IE versions are started with the same command. The version that starts depends on which version is installed on the PC.

Starting Firefox 26/07/2012
browser = Watir::Browser.new :firefox

This is the command to start a new browser. The browser can be specified with a symbol. Webdriver supports major browsers.