Selecting elements with same class name on the page

Question

I am trying to locate elements having same classes assigned to them all over the page. I tried using

browser.find_element(css:first-child,".formProperty.fpMandatory.fpUpdateable .off .collapsedView.Uncompleted .fpColValue .textFieldValueSelector.valueSelector  .integer").send_keys"1000"

But, it fails stating syntax error SyntaxError: (irb):87: syntax error, unexpected ')', expecting =>

There are 6 elements assigned with same class on the page and I need to select those and send values into them.

<div class="body">
<div class="content">
<div class="view">
<div class="formPropertyBoxDefs">
<div id="tile379" class="formProperty fpCompleted fpMandatory " ktype="formProperty">
<div id="tile381" class="formProperty fpMandatory fpUpdateable " ktype="formProperty">
<div id="tile381_selector" class="on" fbtype="selector">
<div id="collapsedtile381" class="collapsedView Uncompleted" style="display:block; cursor:default;">
<div id="tile381_collapsed_statusFlyer" class="fpColStatus">
<div class="fpColTitle">
<div class="fpColValue">
<!-- CssName applied only on expanded mode -->
<div id="tile382" class="textFieldValueSelector valueSelector">
<div onmousedown="valueSelectorOnEnter('tile381', $('tile382_input'), 'focus')">
<input id="tile382_input" class="integer" type="text" onchange="setValueSelectorDirty('cpe111');" selector="selector" value=""/>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tile383" class="formProperty fpMandatory fpUpdateable " ktype="formProperty">
<div id="tile385" class="formProperty fpCompleted fpMandatory " ktype="formProperty">

Its the above elements which I am trying to select by class selectors. I am running it in IRB thus, won't require a wait and its not in iframe as we can see above block of code.

Any help will be appreciated.

Thanks!

Abhishekl

Answer 1

:first-child should be part of the selector:

browser.find_element(:css,".formProperty.fpMandatory.fpUpdateable .off .collapsedView.Uncompleted .fpColValue .textFieldValueSelector.valueSelector  .integer:first-child").send_keys"1000"

To select each of the elements, you can use :nth-child(n), where n is the count of the item you want to interact with:

browser.find_element(:css,".formProperty.fpMandatory.fpUpdateable .off .collapsedView.Uncompleted .fpColValue .textFieldValueSelector.valueSelector  .integer:nth-child(1)").send_keys"1000"
browser.find_element(:css,".formProperty.fpMandatory.fpUpdateable .off .collapsedView.Uncompleted .fpColValue .textFieldValueSelector.valueSelector  .integer:nth-child(2)").send_keys"200"

Note: :nth-child(n) will not work with IE 7 or IE 8.

Hopefully the last edit:

I think you're going to need to use find_elements() for this case.

elements = browser.find_elements(:css,".formProperty.fpMandatory.fpUpdateable .off .collapsedView.Uncompleted .fpColValue .textFieldValueSelector.valueSelector  .integer")

elements[0].send_keys"1000"
elements[1].send_keys"200"

Edit to explain the failure of :nth-child(n) in this case:

So, your original HTML that you edited in looked like this:

<div id="tile381" class="formProperty fpMandatory fpUpdateable " ktype="formProperty"></div>
<div id="tile383" class="formProperty fpMandatory fpUpdateable " ktype="formProperty"></div>
<div id="tile385" class="formProperty fpCompleted fpMandatory " ktype="formProperty"></div>
<div id="tile387" class="formProperty fpMandatory fpUpdateable " ktype="formProperty"></div>
<div id="tile389" class="formProperty fpMandatory " ktype="formProperty"></div>
<div id="tile391" class="formProperty fpCompleted fpMandatory " ktype="formProperty"></div>
<div id="tile393" class="formProperty fpCompleted fpMandatory " ktype="formProperty"></div>
<div id="tile395" class="formProperty fpMandatory fpUpdateable " ktype="formProperty"></div>
<div id="tile397" class="formProperty fpMandatory " ktype="formProperty"></div>
<div id="tile399" class="formProperty fpMandatory " ktype="formProperty"></div>

When I tested :nth-child(2), it worked on this particular HTML. When I tried nth-child(3), it did not work.

If your HTML looked like this:

<div id="tile381" class="formProperty fpMandatory fpUpdateable " ktype="formProperty"></div>
<div id="tile383" class="formProperty fpMandatory fpUpdateable " ktype="formProperty"></div>
<div id="tile387" class="formProperty fpMandatory fpUpdateable " ktype="formProperty"></div>
<div id="tile395" class="formProperty fpMandatory fpUpdateable " ktype="formProperty"></div>

Then :nth-child(n) would work for all four cases that it should match.

Given the structure of your HTML, find_elements is the correct approach.