I have a text box with the following html. The id
is dynamic and I cannot use it.I fill some text in the text box.
<input type="text" id="117841" class="NEdit" title="MyText" maxlength="20" style="position: absolute; overflow: hidden; font-style: normal; font-weight: normal; font-family: arial; font-size: 12px; text-transform: uppercase; width: 184px; left: 28px; top: 0px; height: 14px;">
There is a Add button and when I click that a New Tab is created. In the new tab, I will have a text box with the same properties above except that a new id
is being created.
<input type="text" id="118355" class="NEdit" title="MyText" maxlength="20" style="position: absolute; overflow: hidden; font-style: normal; font-weight: normal; font-family: arial; font-size: 12px; text-transform: uppercase; width: 184px; left: 28px; top: 0px; height: 14px;">
Both the text boxes are on the same page but in different tabs with one being visible
and the other not visible. The Tabs show as divs. There is no relationship between the tabs and the fields within them. The Tabs show as below:
<div id="117285" class="NTabTabs" style="position: absolute; overflow: visible; left: 0px; top: 0px; width: 1211px; height: 20px;"><div class="NTabTab" id="117285t0" style="cursor: pointer; position: absolute; overflow: hidden; white-space: pre; text-align: center; left: 2px; top: 2px; width: 101px; height: 16px; padding-top: 1px; border-top-width: 1px; border-top-style: solid; border-left-width: 1px; border-left-style: solid; border-right-width: 1px; border-right-style: solid;">Tab#1</div><div class="NTabActiveTab" id="117285t1" style="cursor: pointer; position: absolute; overflow: visible; white-space: pre; text-align: center; left: 104px; top: 0px; width: 65px; height: 19px; padding-top: 1px; border-top-width: 1px; border-top-style: solid; border-left-width: 1px; border-left-style: solid; border-right-width: 1px; border-right-style: solid;">Tab#2</div></div>
How do I identify these text boxes based on their visibility?
Thank you!
I believe that the best approach is to find some distinguishing property between the two elements. For example, there must at least be something in the HTML that makes one visible and not the other.
However, if that is not an option, I think the only option left is to iterate through all of the possible text fields and take the one that is visible.
For example, in the following page there are two text fields with the first not being visible:
<html>
<body>
<div style="display:none;">
<input type="text" id="1">
</div>
<div>
<input type="text" id="2">
</div>
</body>
</html>
You could use a text field accessor that goes through the text field elements and picks the first visible one.
class MyPage
include PageObject
text_field(:field){ text_field_elements.find(&:visible?) }
end
When the page object is used, you will see that the field_element
will be the second text field since it is the one that is visible:
page = MyPage.new(browser)
p page.field_element.attribute('id')
#=> "2"
Note that to keep the example simple, the accessor's block is iterating through all text fields. However, you can pass additional parameters to text_field_elements
to be more specific about which text fields to check. For example, the following accessor would find the first visible text field with a specific title:
text_field(:text2){ text_field_elements(:title => 'MyText').find(&:visible) }
来源:https://stackoverflow.com/questions/26874114/page-object-gem-identifying-object-with-same-properties-based-on-their-visibili