量角器：我怎样才能得到下一个标签答案

【问题标题】：Protractor: How can I get the next tag量角器：我怎样才能得到下一个标签
【发布时间】：2015-01-07 06:27:39
【问题描述】：

是否可以在另一个元素之后获取一个元素？（不是子元素）

HTML 代码：

<input id="first-input" type="text"/>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<input id="second-input" type="text"/>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<input id="third-input" type="text"/>
<ul>
    <li>1</li>
    <li>2</li>
</ul>

如何在element(by.id('second-input')) 之后获得ul？

这是我的理解：

element(by.id('second-input')).element(by.tagName('ul')) // This doesn't work because this looks for sub-elements in <input id="second-input">
element.all(by.tagName('ul')).first() // This doesn't work because it gets the 'ul' following <input id="first-input">
element(by.id('second-input')).element.all(by.tagName('ul')) // This doesn't work because this looks for all 'ul' elements as sub-elements of <input id="second-input">

在我的例子中，这些 'ul's 没有唯一的 id 或任何唯一的东西。

【问题讨论】：

给 uls 唯一的 ID。由于它没有嵌套，javascript不会理解你的函数
UL 由第三方库生成。我不想碰它。还有其他选择吗？

标签： angularjs testing jasmine protractor end-to-end

【解决方案1】：

您可以使用by.xpath() 并要求以下ul 兄弟：

element(by.id('second-input')).element(by.xpath('following-sibling::ul'));

或者，一口气：

element(by.xpath('//input[@id="second-input"]/following-sibling::ul'));

另一种选择是将by.css() 与adjacent sibling selector 一起使用：

element(by.css('#second-input + ul'));

【讨论】：

【解决方案2】：

使用 Xpath 选择器并不是一个更好的选择，因为它会减慢元素查找机制。

使用protractor-css-booster 插件将非常简单。该插件将帮助您使用 css 选择器查找兄弟元素。

下载插件

npm install --save protractor-css-booster

在你的配置文件中添加插件：

exports.config = {
  // ... the rest of your config
  plugins: [
    {
      // The module name
      package: "protractor-css-booster"
    }
  ]
};

现在，您可以找到如下元素：

const ulElem=element(by.css('#second-input')).element(by.followingSibling('ul')); \\ returns the first div

【讨论】：