Finding a predecessor with Selenide through tag and class identification

Trying to find the ancestor element using Selenide library on a website. The ancestor element is <div class="BorderGrid-cell" ...>.

The .closest(".BorderGrid-cell") method works well. However, the .closest("div.BorderGrid-cell") method does not work (error "NoSuchElementException: no such element: Unable to locate element"). Why is this?

Coding to inspect the page https://github.com/selenide/selenide. The code should identify the list of contributors and hover over the first contributor in the list. Since there are no suitable locators in the list, I search for the text "Contributors," then move up to the ancestor of the located tag (via closest), and proceed down to the list.

Working code:

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

Non-working code:

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

The only difference is the 'div' in the .closest() method. It was expected that both codes would function similarly. Why does the second one fail to work?

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

Answer β„–1

It seems that the method was not intended to handle such a selector. :

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

Either is used before the first of two (or occasionally more) alternatives that are being specified (the other being introduced by β€œor”).

Therefore, you must choose a single selector from the list (not a combination of them):

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement a hover effect on each direct child individually using CSS?

I have been attempting to create a tab bar with hover effects on its direct children, but I am facing some challenges. Below is the code snippet I have so far, which aims to apply an effect to each element inside the list individually. HTML code : < ...

When I click on the button, the page reloads instead of executing the essential code

On my website, there is a settings page where users can edit their profiles. After editing, they click the update button which triggers the updateProfileData function. This works smoothly in Chrome browser, but in Firefox, the page reloads as soon as the b ...

Using Angular to convert JSON data to PDF format and send it to the printer

Currently, I am retrieving JSON data from an API and now need to convert this data into a PDF format for printing. I am encountering an issue where the CSS styling for page breaks is not rendering properly within my Angular component. When I test the same ...

Exclude the UL hierarchy from removing a class in jQuery

Check out this fiddle to see the code snippet: http://jsfiddle.net/3mpire/yTzGA/1/ I am using jQuery and I need to figure out how to remove the "active" class from all LIs except for the one that is deepest within the hierarchy. <div class="navpole"&g ...

Controlling Material-UI using a custom .css stylesheet

Are there alternative methods for customizing Material-UI components using CSS stylesheets? I'm aware of the {makeStyles} method and JSS overrides, but I find it messy in the code and confusing when trying to modularize it in other files. Is there a ...

JavaScript Function Not Executed in Bottom Section

I've implemented AngularJS includes in my project. Below is the code snippet from my index.html: <!DOCTYPE html> <html ng-app=""> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> ...

Aligning Content in the Middle of a Bootstrap Row

I'm struggling to horizontally center the content in the "row" class div. I've attempted using justify-content-center and other variations. <div class="container"> <div class="row"> <div class="col-md-4 portfolio-item ...

Creating consistent indentation in HTML code can be achieved without the presence of any unnecessary

When I add indentation to my HTML code, it results in extra whitespace between elements on different lines. <div id="nbcntcnt"> <a href="notset.html" class="nbcntbutton" id="snbb">Overview</a> <a href="notset.html" class="nbcntb ...

The grid layout is being disrupted by a concealed input

As I work on styling my admin panels with Twitter Bootstrap, I've encountered a strange issue. Upon testing in Chrome 28 and Firefox, adding a simple hidden input seems to disrupt the grid layout. If the hidden input is moved into div.span6 or remove ...

Understanding the Hierarchy of CSS and Bootstrap Styles

I have been using a custom CSS file along with bootstrap. Initially, I had my custom CSS written before the Bootstrap CSS. However, I recently discovered that it's recommended to include Bootstrap CSS first before any custom CSS. As a result, I'm ...

Guide to designing a dropdown navigation menu in GWT

Hey, I'm currently working on setting up a drop down menu using GWT and here's the layout I have in mind: | Categories | Pictures | Other | When the categories dropdown opens, my goal is to display the categories grouped in pairs. For example: ...

What steps do I need to take in order to accomplish this specific CSS

Hey there, I have a question that may seem silly, but I am struggling to find a solution on my own. Unfortunately, my CSS skills are not the best :( I'm trying to achieve the following layout where the text should wrap at the end of the container (di ...

Attaching a Stylesheet (CSS) without being inside the HEAD Tag

After seeing numerous inquiries about this topic, I have yet to find the answer I seek. My main question is whether it is feasible to connect an external stylesheet in a location other than the HEAD tag. I am facing this issue because I need to use Conflu ...

Numerous anchor links are present

Is it possible to eliminate the red lines between "google links" while keeping the border color as red? How can I achieve this? Here is the code snippet provided: <!doctype html> <html> <head> <title>Website</title> </he ...

Is there a glitch in MacOS Firefox's background-size:cover feature? Any tips on how to work around it?

Here is an example link to see the issue: I've noticed there is a strange empty 1px line at the bottom of the box. It seems to occur when Firefox tries to resize an image with an odd number of lines. Has anyone else encountered this problem? If so, h ...

Ways to transform a 4-column CSS table into a 2-column layout for mobile and tablet viewing

For my latest project, I am faced with the challenge of creating a responsive table that transforms from 5 columns to 2 columns on smaller screens. While using complex jQuery is an option, I prefer a more semantic approach. Additionally, I need to incorpor ...

Vertical Alignment of Navigation Bar in Bootstrap 4

I am trying to align the center of my navigation bar using the "Cover" Bootstrap 4 template. Please find the current code provided below. <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> ...

Begin by positioning flex elements outside of the screen and then animate them into their final

I'm struggling to find the right approach to make this animation work effectively. Currently, I have two elements centered vertically within a flexbox layout. My goal is to animate these elements into their final positions by sliding in from off-scre ...

How to make your divs stand out using Bootstrap

Can anyone assist me in aligning my divs based on the example below? https://i.sstatic.net/OAyCj.jpg Here is what I have achieved so far: https://i.sstatic.net/KkOWg.jpg I am struggling to apply spacing between the two divs, and they are not of equal h ...

Is there a way to dynamically adjust @keyframes properties through JavaScript?

I am looking to dynamically change the top value of the keyframes based on a JavaScript variable x. While I have experience changing CSS with JavaScript, this particular challenge has me stumped. Code: var x = Math.floor((Math.random() * 1080) + 1); ...