4

I need to select the textbox created by ng-repeat and send some values using sendKeys Function. But I'am not sure about the method to select the textboxes. Please suggest a method to accomplish this Or Should I use css selectors instead.

<div class="qst_input_hld ng-scope" ng-repeat="option in options track by $index">
<input type="text" class="input-sm ng-pristine ng-valid" ng-model="options[$index]" placeholder="Option 1" ng-class="isOptionEmpty[$index] ? 'error-border' : ''">
<!-- ngIf: $index > 1 -->
</div>
albert
  • 369
  • 2
  • 5
  • 16

2 Answers2

4

There are multiple ways to locate the text input and, since there is a repeater there, I suspect there are multiple text boxes. Assuming you want to send keys to the first one, here is one option:

var desiredInput = element.all(by.repeater("option in options")).first().all(by.tagName("input")).first();
desiredInput.sendKeys("desired text");

Note that you don't need to handle the track by part at all - it is getting stripped away by Protractor (source code reference).

Also note that I've just used the by.tagName() technique which may or may not work depending on if you have the other input elements there. You can be more strict and use a CSS selector instead, e.g. check the placeholder:

var desiredInput = element.all(by.repeater("option in options")).first().$('input[placeholder="Option 1"]');

And, if you want to send keys to input element for every item in the repeater, use each():

element.all(by.repeater("option in options")).each(function (elm) {
    var desiredInput = elm.$('input[placeholder="Option 1"]');
    desiredInput.sendKeys("desired text");
});
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • 1
    +1 for mentioning we don't need to handle track by at all. I was looking for that confirmation in a google search, and it led me to this answer. I'll ask the Protractor team for more documentation on this. – Keith Oct 11 '16 at 17:59
  • @Keith thanks! By the way, I've added a rule to the [`eslint-plugin-protractor` ESLint plugin](https://github.com/alecxe/eslint-plugin-protractor) that would warn if you do use extended repeater syntax inside `by.repeater()` locators. [Check it out](https://github.com/alecxe/eslint-plugin-protractor/blob/master/docs/rules/use-simple-repeaters.md). – alecxe Oct 11 '16 at 18:02
0

Provide a name and id attribute to your text boxes :

<input ... name="your_textbox" id="textbox_{{index}}" />

And if you want to select all textboxes :

document.getElementsByName("your_textbox");

Specific textbox :

document.getElementById("textbox_"+i);   //i=index

Through Protractor : First change the ng-model of your input box to : 

<input type="text" class="input-sm ng-pristine ng-valid" ng-model="option" placeholder="Option 1" ng-class="isOptionEmpty[$index] ? 'error-border' : ''"> <!-- see ng-model=option -->

Then select it by using model : 

var repeaterElements= element(by.repeater('option in options'));

repeaterElements.each(function(entry) {
    var input = entry.element(by.model("option"));
});
Rambler
  • 4,994
  • 2
  • 20
  • 27
  • I actually mean to select the textboxes in Protractor E2E Testing Framework by using element(by.repeater). Is it possible. – albert May 30 '16 at 06:21