删除 NG-repeat 量角器中的记录

Posted

技术标签:

【中文标题】删除 NG-repeat 量角器中的记录【英文标题】:Delete a record in NG-repeat protractor 【发布时间】:2015-04-12 10:28:51 【问题描述】:

所以我正在使用量角器和角度进行 e2e 测试, 我的第一个测试是在列表中添加一个元素, 现在我正在尝试删除它,但我无法删除它

所以这就是我需要做的:

    找到我要删除的记录的名称 点击同一行的垃圾桶图标并将其删除 在出现的弹出窗口中按确定 尽量避免使用 By.css,而更喜欢与 angular 相关的所有内容(byBinding、model 等)。这是因为应用程序的这一部分最终可能会改变,因此我将不得不重做所有这些案例。

html

...

<div class="list-group-item ng-scope" ng-repeat="item in teamList">
    <span class="glyphicon glyphicon-user"></span>
    <span ng-bind="item.name" class="memberName ng-binding">nuevo Team</span>
    <a ng-click="editTeam(item._id)" class="hand-cursor">
        <span class="glyphicon glyphicon-edit memberRemoveBotton"></span>
    </a>
    <a ng-confirm-click="Would you like to delete this item?" confirmed-click="deleteTeam(item._id)" class="hand-cursor">
        <span class="glyphicon glyphicon-trash memberRemoveBotton"></span>
    </a>
</div>  

JS:

describe('Testing delete Item',function() 
        it('Should delete the Item that just got Inserted',function() 
            element(by.css('a[href="#!/item-create"]')).click(); //Opens up the Item dashBoard
            element.all(by.repeater('item in itemList')).then(function(table) 
                table.element(by.binding('item.name')).each(function(names) 
                    console.log('the names',names.getText());//I'm trying to find the name of the item that just got inserted
                    // is there like a nested chaining of elements in here ??
                );         
            );
        );
);

感谢任何有关如何解决此问题的提示

【问题讨论】:

你不能 console.log() 一个 getText(),因为它返回一个承诺。使用 then(function(text) ),就像使用 element.all() 两行一样。 【参考方案1】:
describe('Testing delete Item',function() 
  it('Should delete the Item that just got Inserted',function() 
    // Assume you know the name of the item you want to delete.
    var nameToDelete = 'some name';

    // Get the row that has the name by using filter.
    element.all(by.repeater('item in itemList')).filter(function(row)
      return row.element(by.css('.memberName')).getText().then(function(name)
        return name === nameToDelete; 
      );
    )
    // Now you should have one row.
    .get(0)
    // Get the row and click find the remove button.
    .element(by.css('.memberRemoveBotton'))
    .click();

    // Make sure it was deleted.
    var names = $$('.list-group-item .memberName').getText();
    expect(names).not.toContain(nameToDelete);
  );
);

让我知道它是否有效。

【讨论】:

【参考方案2】:

感谢安德烈斯,您的回答帮助我解决了一些疑问。

无论如何这里是答案,最乏味的部分之一是popUp window,让我们希望稍后it wont brake

it('Should delete the Team that just got Inserted',function() 
    element(by.css('a[href="#!/team-create"]')).click(); //Opens up the Team dashBoard
    element.all(by.repeater('item in teamList')).filter(function(row) 
        return row.element(by.css('.memberName')).getText().then(function(name) 
            return name === teamName;
        );
    ).first().element(by.css('.glyphicon-trash')).click();
    testHelper.popUpHandler(ptor);
    element.all(by.css('.list-group-item .memberName')).each(function(list) 
        expect(list.getText()).not.toContain(teamName);
    );
);

【讨论】:

以上是关于删除 NG-repeat 量角器中的记录的主要内容,如果未能解决你的问题,请参考以下文章

如何选择使用ng-repeat实现的下拉元素

量角器 - 获取元素的子元素?

如何使用量角器定位器找到子元素?

如何使用AngularJS从ng-repeat中的数组中删除对象?

将文本与量角器中的换行符进行比较

量角器中的迭代E2E测试