Unable to click on checkbox. Using page-object-gem

Question

I am having trouble clicking on a checkbox using the page-object-gem. The html code looks like this:

<label class='cc pointer value-apple'>
 <input class='hidden' type='checkbox' value='apple'></input>
 <div style="background-image:url(/images/fruit-apple-3453452346.jpg)"><div>
</label>
<label class='cc pointer value-banana'>
 <input class='hidden' type='checkbox' value='banana'></input>
 <div style="background-image:url(/images/fruit-banana-2359235674.jpg)"><div>
</label>

Using watir-webdriver I have no issues clicking on the label or div since the checkbox is hidden. Those work fine. However this does not seem to work using the page-object-gem. I have tried the following:

label(:select_fruit_apple, :class => /apple/)
on(FruitsPage).select_fruit_apple

div(:select_fruit_apple, :style => /apple/)
on(FruitsPage).select_fruit_apple

Any suggestions on how to do this is much appreciated.

Answer 1

Since Watir-Webdriver requires you to click the label or div, you will have to do the same with the page object.

The label and div accessor methods do not create methods to click the element. For the code you tried, when you call select_fruit_apple, it is just returning the text of the label or div element.

To click the label (or div), you will need to:

1. Get the label/div element. This can be done by either defining a method that uses a NestedElement or creating the label/div accessor and using the _element method.
2. Call the click method for the element. This will call Watir-Webdriver's click method.

Here is what the class would look like if you were using NestedElement directly:

class MyPage
  include PageObject

  def select_fruit_apple()
    label_element(:class => 'value-apple').click  
  end
end

Alternatively, if you need the label/div element for multiple things, you might want to create an accessor for them:

class MyPage
  include PageObject

  label(:apple, :class => 'value-apple')
  def select_fruit_apple()
    apple_element.click
  end
end

You can then call this method to set the checkbox:

on(FruitsPage).select_fruit_apple    

Of course, if you want to save having to define a method for each fruit, you could use a method that takes a parameter:

class MyPage
  include PageObject

  def select_fruit(fruit)
    label_element(:class => 'value-' + fruit).click  
  end
end

Then the method call would be:

on(FruitsPage).select_fruit('apple')