如何通過AngularJS / Karma e2e測試解決動態添加的表單字段？

Question

如何處理來自AngularJS / Karma e2e測試的動態添加的表單字段？ 我可以使用哪個選擇器來定位這些？

我將使用AngularJS表單示例作為參考。

而靜態表單字段就像

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

可以像

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

如何定位動態添加的字段？ 我指的是在本節中單擊“添加”添加的字段：

<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>

編輯：輸入第一個聯系方式很簡單。 模擬addContact的點擊非常簡單。 但是，如何在添加的字段中輸入下一個聯系方式？ 我真的不能再次使用相同的選擇器...以下內容更改了兩個contact.value

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

Answer 1

就像您說的那樣，如果您只需要輸入相同的值，則可以編寫代碼：

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

如果需要輸入其他值，則需要更改html以便將類添加到相關的div：

<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>

然后，在您的JS代碼中，您可以使用以下代碼引用這些代碼：

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

在此處閱讀有關AngularJs E2e的更多信息