CODEWITHSUNDEEP
javascriptseleniumtestingprotractorend-to-end
Brian
Brian

Reputation: 465

How to select element in Protractor by html attribute when value contains

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" autocomplete="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 comparable way to locate elements in this way with Protractor?

Upvotes: 4

Views: 4195

Answers (3)

alecxe
alecxe

Reputation: 473833

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]"));

Upvotes: 5

Brine
Brine

Reputation: 3731

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!

Upvotes: 0

Alex Lindemann
Alex Lindemann

Reputation: 1

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.

Upvotes: 0

Related Questions