如何通过AngularJS / Karma e2e测试解决动态添加的表单字段？

Question

How can I address dynamically added form fields from an AngularJS / Karma e2e test? Which selector can I use to target these?

I will use the AngularJS form example as a reference.

While the static form fields, like

<input type="text" ng-model="form.name" required/>

can be targeted like

 input('form.name').enter('change');

how would I target the dynamically added fields? I refer to the fields added by clicking "add" in this section:

<label>Contacts:</label>
    [ <a href="" ng-click="addContact()">add</a> ]
    <div ng-repeat="contact in form.contacts">
      <select ng-model="contact.type">
        <option>email</option>
        <option>phone</option>
        <option>pager</option>
        <option>IM</option>
      </select>
      <input type="text" ng-model="contact.value" required/>
       [ <a href="" ng-click="removeContact(contact)">X</a> ]
    </div>

EDIT: Entering the first contact details is straightforward. Simulating the click on addContact is straightforward. But how do I enter the next contact details, in the added fields? I can't really use the same selector again... The following changes both contact.value

input('contact.value').enter('abc@mail.com');

Answer 1

Like you said, if you only need to enter the same value you can you your code:

input('contact.value').enter('abc@mail.com');

If you need to input different values, you need to change your html in order to add classes to the relevant divs:

<label>Contacts:</label>
[ <a href="" ng-click="addContact()">add</a> ]
<div class="contacts-holder" ng-repeat="contact in form.contacts">
  <select ng-model="contact.type">
    <option>email</option>
    <option>phone</option>
    <option>pager</option>
    <option>IM</option>
  </select>
  <input class="contact-input" type="text" ng-model="contact.value" required/>
   [ <a href="" ng-click="removeContact(contact)">X</a> ]
</div>

Then in your JS code you can reference those using:

element('.contacts-holder').query(function (contacts, done) {
   //contacts is now a jquery lite element
   angular.forEach(contacts.find('.contact-input'), function( contact) {
         element(contact).input( 'whatever you want...');
   }
}

Read more about AngularJs E2e Here