Geek Answers Handbook

Using CSS selectors instead of XPath locators when searching through siblings

Currently, I have the following page object fields:

this.filterTeamDropdown = $("filter-item-edit .dropdown button");
this.teams = this.filterTeamDropdown.all(by.xpath("following-sibling::ul//li[contains(@class, 'dropdown-list-item')]"));

Is there a way to replace the XPath locator for the field teamsand select the CSS selector instead?

The motivation for this comes from the style guide and the recommendation not to use XPaths .

From what I understand, it is not possible for the CSS selector to go to the next sibling, starting with the current element in context. But are there any alternatives?

+4
source share
2 answers

. CSS, id, CSS-, -... XPath. ... .

, XPath , . , , ( A) . CSS-, .

SO, XPath, , goto , . , XPath. , - , XPath, XPath . , , , , ( ?), XPath, / .

, , W3C CSS Selector , , , . , HTML, , .

https://www.w3.org/TR/selectors/#selectors

https://www.w3.org/TR/selectors/#adjacent-sibling-combinators

, +. , CSS- XPath? , /, , , XPath CSS.

filter-item-edit .dropdown button + ul li.dropdown-list-item
+5

, , locator() , :

this.filterTeamDropdown = $("filter-item-edit .dropdown button");
this.teams = this.filterTeamDropdown.$$(this.filterTeamDropdown.locator().value + " + ul li.dropdown-list-item")
+1

More articles:


All Articles