CODEWITHSUNDEEP
rubywatirwatir-webdriverpage-object-gempageobjects
Farooq
Farooq

Reputation: 1995

Accessing a nested element 3 levels deep using page objects

Using the Page Object model and gem I want to access an element that is nested 3 layers deep. I've successfully accessed nested elements that are 2 elements deep but for 3 the same method isn't working.

3 elements defined in my Page Object:

div(:serv_info, :class => "service-info")
div(:validate_method, :class => "validate-method")
div(:scar_input_group, :class => "input-group")

So I tried to chain those 3 elements to access the div class input-container input-left-half round like this:

div(:scar_first_name_error){validate_method_element.serv_info_element.scar_input_group_element.div_element(:class => "input-container input-left-half round")}

But I got the error that serv_info_element is an undefined method, which makes sense, but is it possible to chain the 3 predefined elements I stated above to access the input-container input-left-half round?

I read this: https://github.com/cheezy/page-object/wiki/Nested-Elements but didn't want to have to repeat any code if I can help it.

Upvotes: 1

Views: 2096

Answers (1)

Justin Ko
Justin Ko

Reputation: 46846

Assuming that the nesting is always the same, rather than having the :scar_first_name_error map through each ancestor, you could define each element with respect to its parent (or ancestor).

Let us assume the HTML is:

<html>
  <body>
    <div class="validate-method">
      <div class="service-info">
        <div class="input-group">
          <div class="input-container input-left-half round">
            text
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

You could define the page as:

class MyPage
  include PageObject

  div(:serv_info) { validate_method_element.div_element(:class => "service-info") }
  div(:validate_method, :class => "validate-method")
  div(:scar_input_group) { serv_info_element.div_element(:class => "input-group") }
  div(:scar_first_name_error) { scar_input_group_element.div_element(:class => "input-container input-left-half round") }
end

Notice that the :serv_info is defined with respect to its parent :validate_method, :scar_input_group is defined with respect ot its parent :serv_info, etc.

With this page object, we can see we can get the lower element's text:

page = MyPage.new(browser)
p page.scar_first_name_error
#=> "text"

Upvotes: 1

Related Questions