使用量角器测试 angularjs 应用程序,当我使用它时数组发生变化时,我如何保持对 element.all 行之一的引用?

Using protractor to test an angularjs app, how do i keep a reference to one of the rows of element.all when the array changes as I work with it?

我有一个 ng-repeat,一旦以任何方式修改了现有的 "last" 元素,它就会添加一个新元素。我的量角器测试看起来像这样:

var emptyPerson = this.people.last() // this gets me the last row of the ng-repeat
emptyPerson.element(by.css('.firstName')).sendKeys('first'); // this sets the firstname correctly but then the app adds a new row to the ng-repeat because of the model change here.
emptyPerson.element(by.css('.lastName')).sendKeys('last');  // this sets the lastname of the new row instead of the row that emptyPerson previously referenced

有没有什么方法可以告诉 emptyPerson 在我们完成之前坚持使用相同的元素?

示例 HTML 在编辑名字之前:

<div ng-repeat="person in object.People" class="student ng-scope">
  <div type="text" ng-model="person.FirstName" skip-label="true" placeholder="First" validator="svalidators[$index]" class="layout-default field field-FirstName type-text">
    <input type="text" ng-focus="myFocus()" ng-blur="myBlur()" class="form-control" placeholder="First" ng-model="lModel.val" name="person-FirstName">
  </div>
  <div type="text" ng-model="person.LastName" skip-label="true" placeholder="Last" validator="svalidators[$index]" class="layout-default field field-LastName type-text">
    <input type="text" ng-focus="myFocus()" ng-blur="myBlur()" class="form-control" placeholder="Last" ng-model="lModel.val" name="person-LastName">
</div>

编辑名字后的示例:

<div ng-repeat="person in object.People" class="student ng-scope">
  <div type="text" ng-model="person.FirstName" skip-label="true" placeholder="First" validator="svalidators[$index]" class="layout-default field field-FirstName type-text">
    <input type="text" ng-focus="myFocus()" ng-blur="myBlur()" class="form-control" placeholder="First" ng-model="lModel.val" name="person-FirstName">
  </div>
  <div type="text" ng-model="person.LastName" skip-label="true" placeholder="Last" validator="svalidators[$index]" class="layout-default field field-LastName type-text">
    <input type="text" ng-focus="myFocus()" ng-blur="myBlur()" class="form-control" placeholder="Last" ng-model="lModel.val" name="person-LastName">
</div>
<div ng-repeat="person in object.People" class="student ng-scope">
  <div type="text" ng-model="person.FirstName" skip-label="true" placeholder="First" validator="svalidators[$index]" class="layout-default field field-FirstName type-text">
    <input type="text" ng-focus="myFocus()" ng-blur="myBlur()" class="form-control" placeholder="First" ng-model="lModel.val" name="person-FirstName">
  </div>
  <div type="text" ng-model="person.LastName" skip-label="true" placeholder="Last" validator="svalidators[$index]" class="layout-default field field-LastName type-text">
    <input type="text" ng-focus="myFocus()" ng-blur="myBlur()" class="form-control" placeholder="Last" ng-model="lModel.val" name="person-LastName">
</div>

尝试在变量发生变化之前保存到变量:

var oldLastName = emptyPerson.element(by.css('.lastName'));
emptyPerson.element(by.css('.firstName')).sendKeys('first'); 
oldLastName.sendKeys('last');

希望对您有所帮助

这就是 Protractor 的内部工作方式。 它在对元素应用操作时搜索元素。恐怕你必须处理它 "manually" 并重新引用所需的转发器项目。

为了在编码方面做得更好一些,我会在一个函数中隐藏与转发器项目部分的第一次交互——基本上,触摸转发器的输入以获得更多项目,然后返回之前的项目最后的。沿线的东西:

var MyPageObject = function () {
    this.people = element(by.repeater("person in object.People"));

    this.touch = function () {
        var emptyPerson = this.people.last();
        emptyPerson.element(by.css('.firstName')).sendKeys('smth');

        var newEmptyPerson = this.people.get(-2);  // I think -1 would be the last
        emptyPerson.element(by.css('.firstName')).clear();

        return newEmptyPerson;
    }

    this.fillForm = function () {
        var emptyPerson = this.touch();

        emptyPerson.element(by.css('.firstName')).sendKeys('first');
        emptyPerson.element(by.css('.lastName')).sendKeys('last');    
    }
}