如何选择没有 ng-repeat 元素文本的编辑按钮？答案

【问题标题】：How to select an Edit button with no text of an ng-repeat element?如何选择没有 ng-repeat 元素文本的编辑按钮？
【发布时间】：2019-01-22 10:55:50
【问题描述】：

我有一个表单构建器，我从 ng-repeat 中选择字段类型，并且该元素出现在画布中。我想在画布上单击该元素的编辑按钮。单击编辑按钮会显示更多要输入的字段。但是所有元素都在 ng-repeat 中，并且按钮没有 id、name、model。

【问题讨论】：

检查这个：stackoverflow.com/questions/34783140/…希望这会对你有所帮助
@MaheshShahane 您共享的链接用于将元素添加到现有的 div 标签，但在我的情况下，我想对现有的“编辑”按钮执行操作，例如单击但无法找到该按钮的定位器使用量角器。

标签： angularjs protractor

【解决方案1】：

我认为这样的事情应该可以解决问题：

function editBuilder(builderName) {
  // select title of a builder which is span
  const title = element(by.cssContainingText('.h4', builderName));

  // get root form element (parent element)
  const root = title.element(by.xpath('..'));

  // get edit button 
  const editButton = root.$('[ng-click="editFields($index)"]')

  // click or something
  return editButton.click(); 
}

然后你可以像这样调用这个函数：

editBuilder('Text Field').then(...);

【讨论】：

编辑按钮的xpath为：//*[@id="tab-content-11"]/div/md-content/form/div/div/div[1]/div /div[1]/div[1]/md-content/div[1]/div/button[1] 每次访问页面时，ID 都会发生变化。
不要使用这么长的xpath，这样是行不通的，只需选择同一块中的编辑按钮，块标题所在的位置。将.. 传递给xpath 返回父元素
我无法选择第二个 ng-repeat 元素的编辑按钮。

【解决方案2】：

我只能使用以下代码选择第一个 ng-repeat 元素：

element(by.xpath("//button[@class='md-icon-button md-button md-ink-ripple md-default-theme']")).click(); element(by.name("label")).clear().sendKeys("admin");

【讨论】：

【解决方案3】：

如果有多个编辑按钮，您可以这样定位它们：

element.all(by.css('.icon.icon-pencil.s20')).get(<index>);

索引从 0 开始
如果只有一个，那么：

element(by.css('.icon.icon-pencil.s20'));

【讨论】：