<div dir="ltr"><div><br></div><div>Dan pointed this out to me this week: <a href="https://github.com/cheezy/page-object/wiki/Nested-Elements">https://github.com/cheezy/page-object/wiki/Nested-Elements</a></div><div><br></div><div>It turns out we really need this feature for Flow tests. </div><div><br></div><div>On a Flow page (or "Flow board") you have a set elements within a of "Topic" element that repeat, and that are identifiable only in relation to the "Topic" in which they are nested. </div><div><br></div><div>For example, if a test Unwatches a Topic and then tries to check that the state is correctly "Unwatched", it becomes impossible to distinguish the watch button in the second topic from the one in the first, or the third, etc. </div><div><br></div><div>So we need nested elements from time to time.  They look like this: </div><div><br></div><div><div>div(:first_topic_watchlist_container, css: ".flow-topic-watchlist", index:0)</div><div>  a(:first_topic_watch_link) do |page|</div><div>    page.first_topic_watchlist_container_element.link_element( css: ".flow-watch-link-watch" )</div><div>  end</div><div>  a(:first_topic_unwatch_link) do |page|</div><div>    page.first_topic_watchlist_container_element.link_element( css: ".flow-watch-link-unwatch" )</div><div>  end</div></div><div><br></div><div>This makes it possible to distinguish the "Watch" and "Unwatch" links in the first Topic from those in every other Topic on the page. </div><div><br></div><div>So a note on usage: after talking it over with Dan, we decided that the convention of passing |page| for the nested elements is the most correct name for that object. (As opposed to say passing the same object but named |first_topic_watchlist|.  Dan persuaded me that |page| is more correct.)</div><div><br></div></div>