Protractor:在innerhtml的基础上获取元素

Question

我用Protractor做e2e测试。

在那里，我需要获得一个基于innerhtml内容的元素。但我不知道该怎么做。

在html代码中，它看起来像这样：

<div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
<label class="item item-radio" ng-repeat="locale in locales">
     <input type="radio" name="group" ng-checked="false" ng-click="updateLocale(locale)">
     <div class="item-content ng-binding">
        English (USA)
     </div>
     <i class="radio-icon ion-checkmark"></i>
</label>

现在，我需要基于"英语（美国）的innerhtml的元素"input"。

我测试的是：

var languageOption = element(by.className('input div item-content ng-binding').getText()).toBe('English (USA)');

我总是收到错误"没有方法'getText'"我做错了什么？

Answer 1

这非常困难，因此必须为ng repeat中的每个输入元素（或其他元素）创建唯一的id。

我是这么做的：

<input id="locale{{$index}}"...>

您可以根据需要定义第一个。通过上面的解决方案，我得到了这个：

locale0本地1本地2…等等

然后你可以得到这样的元素：

element(by.id('locale0'));

Answer 2

我建议您先使用map，然后再使用filter。使用map返回div的文本和输入，然后根据div文本过滤map的结果。

it('should ...', function() {
  var localeToLookFor = 'English (USA)';
  // Use map to return the text and the input.
  $$('.item.item-radio').map(function(row) {
    return {
      text: row.$('item-content').getText(),
      input: row.$('input');
    }
  }).then(function(rows) {
    // Here you have an array with elements.
    // Array.<{text: string, input: WebElement}>
    // Find the text you are looking for and return.
    for (var i = 0; i < rows.length; i++) {
      if (rows[i].text === localeToLookFor) {
        return rows[i];
      }
    }
    throw Error('Could not find element');
  }).then(function(radioInput) {
    // Here you should have a WebElement with the radio.
  });
});