Gxt PageObject widget example

I have provided an example for adding widgets to page-object below.  In this example, I have created a test widget to interact with the gxt pagination tool on the gxt examples page.

This widget is typical of widgets created in day-to-day use.  It defines several methods which identify and act on elements using the ‘nested element’ methods built into page-object.

Widgets such as this one typically rely on the fact that each object will be in a predictable location relative to a main table or div. This widget relies on a defined table with fixed indexes to find the correct buttons.

class GxtPager < PageObject::Elements::Div

  def first
    first_cell = cell_elements(:class=>"x-toolbar-cell")[0]
    first_cell.button_element(:tag_name=>"button").click
  end

  def previous
    next_cell = cell_elements(:class=>"x-toolbar-cell")[1]
    next_cell.button_element(:tag_name=>"button").click
  end

  def last
    next_cell = cell_elements(:class=>"x-toolbar-cell")[8]
    next_cell.button_element(:tag_name=>"button").click
  end

  def next
    next_cell = cell_elements(:class=>"x-toolbar-cell")[7]
    next_cell.button_element(:tag_name=>"button").click
  end

  def page
    page_cell = cell_elements(:class=>"x-toolbar-cell")[4]
    page_cell.text_field_element.value
  end

  def page=(page_number)
    page_cell = cell_elements(:class=>"x-toolbar-cell")[4]
    page_cell.text_field_element.value=page_number
    page_cell.text_field_element.send_keys :return
  end
end
PageObject.register_widget :gxt_pager, GxtPager, 'table'

Below you’ll see the use of the widget within a page-object. I’ve gotten into the habit of registering widgets at the bottom of the defining class, then requiring that class where it needs to be used.

require_relative 'widgets/gxt_grid'
require_relative 'widgets/gxt_pager'

class GxtSamplePageObject
  include PageObject

  div(:basic_grid, :class => "label_basic_grid")
  div(:local_pagination, :class => "label_paging_grid")
  gxt_table(:gxt_table, :class => "x-grid3")
  gxt_pager(:gxt_pager, :class =>"x-toolbar-ct")
end

Just to make sure everything is covered, I have included the step definitions which use this class below. See previous blog posts or the page-object wiki for the gxt_table code used here.

Given /^I am on the Gxt Examples page$/ do
  @page = GxtSamplePageObject.new(@browser)
  @page.navigate_to "http://gxtexamplegallery.appspot.com/"
end

When /^I have Local Pagination open$/ do
  @page.local_pagination_element.click
end

When /^I click next page$/ do
  @page.gxt_pager_element.next
end

Then /^I should be on page "(\d+)"$/ do |page_expected|
  @page.gxt_pager_element.page.should == page_expected
end

When /^"([^"]*)" should be listed in the grid$/ do |name_expected|
  @page.gxt_table_element[1][0].text.should == name_expected
end

When /^I click last page$/ do
  @page.gxt_pager_element.last
end

When /^I click on previous page$/ do
  @page.gxt_pager_element.previous
end

When /^I click on first page$/ do
  @page.gxt_pager_element.first
end

When /^type "(\d+)" into the page box$/ do |page|
  @page.gxt_pager_element.page=page
end