Accessing nested divs using page object model - page-object-gem

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