web-dev-qa-db-ja.com

分度器：特定の要素の兄弟を見つける方法は？

<div>
   <a href='...'>LINK</a>
   <img class='image' />
</div>
<div>
   ...
</div>

imgクラスのimageタグの分度器要素を取得したいと思います。リンクテキスト「LINK」はすでに知っています。つまり、「特定の要素の兄弟を見つけるにはどうすればよいですか？」.

コードの最初の行は次のようになります。

browser.findElement(by.linkText('LINK'))

何か案は？

ありがとう＆乾杯

javascriptjasminekarma-runnerprotractorui-testing
13
user1879408

インスピレーションをありがとう。これが私の解決策であり、私が望んでいたものではありませんが、それは機能します：

element(by.css('???')).element(by.xpath('..')).element(by.css('???')).click();

チェーンと、親に戻ることができるby.xpathが、ソリューションの鍵です。

23
user1879408

これは私が実際にページオブジェクトに実装するものです：

  this.widgets['select-status'] = this.ids['select-status']
      .element(by.xpath('following-sibling::div[1]'));
  this.widgets['select-status.dropdown'] = element(by.css('.btn-group.bootstrap-select.open'));

このページは、Bootstrap with Bootstrap Select。とにかく、following-sibling軸に沿ってDOMをトラバースします。XPATH仕様を参照してください。 。

1
Khanh Hua

Xpathセレクターを使用すると、要素検索メカニズムが遅くなるため、適切な選択ではありません。

私はこの特定の問題に対処するためのプラグインを設計しました： protractor-css-booster

プラグインは、より良い方法で、そして最も重要なことにCSSセレクターを使用して兄弟を見つけるためのいくつかの便利なロケーターを提供します。

このプラグインを使用すると、直接使用できます。

var elem = await element(by.cssContainingText('a','link text')).nextSibling();

elem.click(); //proceed with your work

または、これをバイロケーターとして使用します

var elem = element(by.cssContainingText('a','link text')).element(by.followingSibling('img'));

利用可能な他の便利な方法をいつでもチェックアウトできます ここ ...

これで、次のようなWeb要素を見つけることができます。

  1. 祖父母の要素を見つける
  2. 親要素の検索
  3. 次の兄弟を見つける
  4. 以前の兄弟を見つける
  5. 次の兄弟を見つける
  6. 最初の子要素を見つける
  7. 最後の子要素を見つける

そして、あなたが使用して見つけることができるすべてのものを推測しますか???? CSSセレクター????

願わくば、それはあなたを助けるでしょう...

0
Abhinaba Ghosh