Транспортир: Как найти родного брата данного элемента?

Question

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

Я хочу получить транспортир для img пометить с image учебный класс. Я уже знаю текст ссылки "ССЫЛКА". Другими словами, "Как мне найти родного брата данного элемента?".

Первая строка кода может выглядеть так:

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

Есть идеи?

Спасибо и Приветствия

Answer 1

Спасибо за вдохновение. Вот мое решение, не то, на которое я надеялся, но оно работает:

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

Цепочки и by.xpath, который позволяет вернуться к родителю, являются ключами решения.

Answer 2

Это то, что я на самом деле реализую на объекте страницы:

  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 вместе с Bootstrap Select. В любом случае, мы проходим DOM вдоль following-sibling ось. Обратитесь к спецификации XPATH для себя.

Answer 3

Использование селекторов Xpath - не лучший выбор, так как замедляет механизм поиска элементов.

Я разработал плагин для решения этой конкретной проблемы: https://www.npmjs.com/package/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'));

Вы всегда можете проверить другие удобные методы, доступные здесь...

Теперь вы можете найти такие веб-элементы, как:

1. Поиск главного родительского элемента
2. Поиск родительского элемента
3. Поиск следующего брата или сестры
4. Поиск предыдущего брата или сестры
5. Поиск любого следующего брата или сестры
6. Поиск первого дочернего элемента
7. Поиск последнего дочернего элемента

И, знаете что, все, что можно найти с помощью селекторов CSS

Надеюсь, это вам поможет...