如何解决来自 AngularJS / Karma e2e 测试的动态添加的表单字段？答案

【问题标题】：How to address dynamically added form fields from an AngularJS / Karma e2e test?如何解决来自 AngularJS / Karma e2e 测试的动态添加的表单字段？
【发布时间】：2013-08-14 09:32:56
【问题描述】：

如何处理来自 AngularJS / Karma e2e 测试的动态添加的表单字段？我可以使用哪个选择器来定位这些？

我将使用AngularJS form example 作为参考。

而静态表单字段，比如

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

【问题讨论】：

看看这是否有帮助 stackoverflow.com/questions/7672389/… 。我认为你需要模拟点击'add'，在必填字段中添加一些数据，然后对新添加的数据尝试一些期望，看看是否匹配。

标签： javascript forms testing angularjs karma-runner

【解决方案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 Here

【讨论】：