Search code examples
cssselenide

Locating ancestor by Selenide using tag and class


I am trying to locate ancestor element (using Selenide library) on a site. The ancestor element is <div class="BorderGrid-cell" ...>.

Method .closest(".BorderGrid-cell") works fine. But method .closest("div.BorderGrid-cell") doesn't work (error "NoSuchElementException: no such element: Unable to locate element"). Why is so?

I am writing code, which inspects the page https://github.com/selenide/selenide The code should find the list of contributors and hover mouse on the first contributor of the list. As there are no good locators in the list, I find the text "Contributors", then go up to the ancestor of the found tag (via closest), and then go down to the list.

Code, which works fine:

$("div.Layout-sidebar").$(byText("Contributors")).closest(".BorderGrid-cell").$$("ul li").first().hover();

Code, whish doesnt work:

$("div.Layout-sidebar").$(byText("Contributors")).closest("div.BorderGrid-cell").$$("ul li").first().hover();

The only difference is the 'div' in the .closest() method. I expected that both codes should work the same. Why does not the second one work?

Code on Github: https://github.com/Anton248/QA_guru_getting_started_Java/blob/master/src/test/java/github/DifferenceBetweenTwoExpressions.java


Solution

  • I suppose that method wasn't designed to work with such selector. https://selenide.org/javadoc/current/com/codeborne/selenide/SelenideElement.html#closest(java.lang.String) :

    selector - Either HTML tag, CSS class, attribute or attribute with value.

    Either - used before the first of two (or occasionally more) alternatives that are being specified (the other being introduced by “or”).

    So, you have to chose a single selector from the list (not their combination):

    • HTML tag,
    • CSS class,
    • attribute
    • attribute with value.