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

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>

如何获得 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”没有唯一 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() with an adjacent sibling selector:

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

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

Protractor: How can I get the next tag

testing

end-to-end

jasmine

angularjs

protractor