Accessing nested divs using page object model

Question

I am having trouble accessing the nested divs.

here is my scenario. I need to access the total in inner div. Can some one please shed some light here.

<div id="RequestSend">
    <div class="title">
        Requests Sent
    </div>
    <div class="total">
        10
    </div>
</div>
<div id="RequestReceived">
    <div class="title">
        Requests Received
    </div>
    <div class="total">
        20
    </div>
</div>

I tried the following, but did not succeed.

    Approach 1:

    prof.rb
    =======

    div(:total_count, {:class => 'total'})
    div(:request_send, {:id => 'RequestSend'})

    prof_spec.rb
    =============
    page.request_send_element.total_count.should eq 10

    Output:
    NoMethodError: undefined method `total_count' for #<Selenium::WebDriver::Element:0x....>


    Approach 2:

    prof.rb
    =======
    divs(:total_count, {:class => 'total'})

    prof_spec.rb
    ============
    total_count[0] # for first 
    total_count[1] # for second

Please note I am a new user to page object.

Answer 1

Solution 1 - Blocks

The most straightfoward approach would be to use blocks when defining your accessors. This allows you to specify paths to an element - ie allowing you to scope the search to specific elements.

The easiest one is to just chain a bunch of div_element1 methods together:

div(:request_send_total){
  div_element(:id => 'RequestSend').div_element(:class => 'total')
}
div(:request_received_total){
  div_element(:id => 'RequestReceived').div_element(:class => 'total')
} 

Alternatively, if you might need to look for different things in the RequestSend/RequestReceived divs, I would create an accessor specifically for each of those divs. Then the accessor for the total, would call the parent element:

div(:request_send, :id =>'RequestSend')
div(:request_send_total){
  request_send_element.div_element(:class => 'total')
}
div(:request_received, :id =>'RequestReceived')
div(:request_received_total){
  request_received_element.div_element(:class => 'total')
}

In both cases, your page API would be:

page.request_send_total
#=> 10
page.request_received_total
#=> 20

Solution 2 - Widgets

A more complicated implementation, but nicer page API, would be to use widgets. Basically this is like creating an element type with its own specific methods.

You could create a request widget like:

class Request < PageObject::Elements::Div
  def total
    div_element(:class => 'total').text
  end
end
PageObject.register_widget :request, Request, :div

Your page object, would then use the registered request accessor:

request('request_send', :id => 'RequestSend')
request('request_received', :id => 'RequestReceived')

Finally, you would get the total values as:

page.request_send_element.total
#=> 10
page.request_received_element.total
#=> 20