Struggling with how to select an element that doesn't have a standard unique id or class. How would I select this input element with Protractor?

Note: I cannot use the class ComboBoxInput_Default class, as this drop down box is used on several other page elements. There also isn't any easily identifiable parent element for at least 10+ DOM levels.

<div style="display:inline; white-space: nowrap;" id="ctl00_ctl31_g_b56afa08_7869_450c_8871_f6759a89d9b1_ctl00_WPQ3txtFields_ddPositioList_10_Solution_MultiComboSelection" class="ComboBox_Default">
  <input type="text" style="width: 133px; height: 15px;" delimiter=";" class="ComboBoxInput_Default" value="-select-" name="ctl00$ctl31$g_b56afa08_7869_450c_8871_f6759a89d9b1$ctl00$WPQ3txtFields_ddPositioList_10_Solution_MultiComboSelection_Input" id="ctl00_ctl31_g_b56afa08_7869_450c_8871_f6759a89d9b1_ctl00_WPQ3txtFields_ddPositioList_10_Solution_MultiComboSelection_Input" autoplete="off">    
<div>

The only identifying markup that makes each of these inputs different is appended to the end of the generated id, Solution_MultiComboSelection_Input.

If I had to get this element with jquery, I would use the (not preferrable) contains $( "input[name*='Solution_MultiComboSelection_Input']" ). Is there some parable way to locate elements in this way with Protractor?

Struggling with how to select an element that doesn't have a standard unique id or class. How would I select this input element with Protractor?

Note: I cannot use the class ComboBoxInput_Default class, as this drop down box is used on several other page elements. There also isn't any easily identifiable parent element for at least 10+ DOM levels.

<div style="display:inline; white-space: nowrap;" id="ctl00_ctl31_g_b56afa08_7869_450c_8871_f6759a89d9b1_ctl00_WPQ3txtFields_ddPositioList_10_Solution_MultiComboSelection" class="ComboBox_Default">
  <input type="text" style="width: 133px; height: 15px;" delimiter=";" class="ComboBoxInput_Default" value="-select-" name="ctl00$ctl31$g_b56afa08_7869_450c_8871_f6759a89d9b1$ctl00$WPQ3txtFields_ddPositioList_10_Solution_MultiComboSelection_Input" id="ctl00_ctl31_g_b56afa08_7869_450c_8871_f6759a89d9b1_ctl00_WPQ3txtFields_ddPositioList_10_Solution_MultiComboSelection_Input" autoplete="off">    
<div>

The only identifying markup that makes each of these inputs different is appended to the end of the generated id, Solution_MultiComboSelection_Input.

If I had to get this element with jquery, I would use the (not preferrable) contains $( "input[name*='Solution_MultiComboSelection_Input']" ). Is there some parable way to locate elements in this way with Protractor?

• javascript
• selenium
• testing
• protractor
• end-to-end

3 Answers 3

Sure, use the "contains" or "ends-with" CSS selector:

element(by.css("input[id*=Solution_MultiComboSelection_Input]"));
element(by.css("input[id$=Solution_MultiComboSelection_Input]"));

If that is the only element with ComboBoxInput_Default as the class, then you could select it using element(by.css('.ComboBoxInput_Default'))

This page has a lot of examples for selectors.

Hard to know for sure without seeing the rest of the page but I'd try...

$('input[value="-select-"].ComboBoxInput_Default);

or maybe

$('div.ComboBoxInput_Default input.ComboBoxInput_Default);

That said, the best solution is to have an identifier added to the code. Hope this helps!