How do I handle elements and sub-sections that are technically outside a section's scope?

Question

I am attempting to model a page which contains sections and sub-sections, and I am running into trouble with scoping.

The section I am defining can be found in the DOM in a hierarchy like so:

html > body > div.page-background > div#wrapper > div#content > div#primary > ... > div#reserve-search

And so I have defined the section on the page with the CSS Selector div#reserve-search. However, clicking on a button in this section pulls up a pop-up panel that needs to be interacted with. Even though the pop-up is logically a part of the section, it is located in a different part of the DOM:

html > body > div#overlay-address

This puts me in a bind. The current code looks a bit like this:

class ReserveSearchPage < SitePrism::Page
    section :reserve_search_section, ReserveSearchSection, "div#reserve-search"
end

class ReserveSearchSection < SitePrism::Section
    section :overlay_address_section, OverlayAddressSection, "div#overlay-address"
    element :address_section_button, "a#button"

    def interactWithAddressSection
        address_section_button.click
        wait_until_overlay_address_section_visible
        ...
    end
end

class OverlayAddressSection < SitePrism::Section
    elements :things, "blah#stuff"
    ...
end

The problem with the above is that when I attempt to invoke interactWithAddressSection, the OverlayAddressSection is defined by the ReserveSearchSection's scope, so that it actually looks for the sub-section in the DOM under div#reserve-search div#overlay-address. Since the sub-section isn't located there, the calls time out and the sub-section is not found.

I want to define this sub-section within the larger section, which is definitely where it logically belongs and where it needs to be accessed. Is there any way to define the sub-section's locator without using the parent section's scope?

Obviously, it's more convenient and "right" for a sub-section to exist within its parent in the DOM, but I've seen lots of pop-ups and panels defined like this, technically living in a very different part of the page, even though the structure should definitely be modeled as a sub-section of a different part of the DOM. It seems like there ought to be a way for me to break out of the parent section's scope, perhaps by defining the sub-section with some sort of absolute selector. Does such a method exist? If not, are there any other workarounds?

score 0 · Answer 1 · answered Jan 06 '14 at 21:47

I posted this after accidentally creating a new account. I believe I've answered my own question. Like most of my questions, the answer I've come up with is pretty simple.

Working on the assumption that there is no magic solution to this, I simply made the OverlayAddressSection a SitePrism::Page rather than a SitePrism::Section. I can create and invoke this Page from within a section without any of the Page's elements or sections inheriting the overarching section's scope.

It seems like a good enough solution to a hopefully infrequent problem.

How do I handle elements and sub-sections that are technically outside a section's scope?

1 Answers1