How to address dynamically added form fields from an AngularJS / Karma e2e test?

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');

have a look at this to see if it helps http://stackoverflow.com/questions/7672389/testing-dom-manipulating-in-jasmine-test . I think you need to simulate the click on 'add', adding some data in the required fields, and then try some expects on the newly added data to see if it matches. — Nicolae Olariu, Aug 14 '13 at 10:02

score 0 · Answer 1 · answered Aug 22 '13 at 05:18

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...');
   }
}

How to address dynamically added form fields from an AngularJS / Karma e2e test?

1 Answers1