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

Question

是否有可能在另一个元素之后获得一个元素？（不是子元素）

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>

我怎样才能得到ul以下element(by.id('second-input'))？

以下是我的理解：

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' 没有唯一的 id 或任何独特的东西。

Answer 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()与相邻的兄弟选择器一起使用：

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

Answer 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