Could not find the element using the specified cssSelector

I am attempting to locate and interact with this specific div element.

<div class="leaflet-marker-icon marker-cluster marker-cluster-small leaflet-clickable leaflet-zoom-animated" style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; opacity: 1; transform: translate(702px, 396px); z-index: 396;" title="13 tracks listened in , UA">

My goal is to do the following:

WebElement cluster = driver.findElement(By.cssSelector("marker-cluster-small"));

However, my attempts have not been successful. Here is what I have tried:

WebElement cluster = driver.findElement(By.xpath("//div[@class='leaflet-marker-icon marker-cluster marker-cluster-small leaflet-clickable leaflet-zoom-animated']"));

Unfortunately, neither of these methods are working as expected. The first method resulted in an "Unable to locate element" error message. While the second method did not throw any errors, when I try to click on the element using:

cluster.click();

nothing seems to happen. Could you please advise on what I might be doing incorrectly? Thank you.

csswebdriverselenium-webdriver

Answer №1

For a solution to your question, you may want to check out this page How can I find an element by CSS class with XPath?. Try using the XPath query "//div[contains(@class, 'marker-cluster-small')]" to achieve a similar outcome as your initial attempt. Hopefully, this suggestion proves useful to you in some way.

Answer №2

An alternative approach is to locate it using CSS selectors:

driver.find_element(:css, '.leaflet-marker-icon.marker-cluster.marker-cluster-small.leaflet-clickable.leaflet-zoom-animated')

Nevertheless, Conor's solution is preferred in this scenario due to the excessive length of the class attribute.

Answer №3

If you're working with CSS selectors, remember that simply using marker-cluster-small won't suffice because it expects an element tag, not a class. To target a class specifically, utilize the dot notation like so:

div.marker-cluster-small

or

.marker-cluster-small

Keep in mind that CSS selectors on classes are more efficient than xpath selectors, as you can pinpoint just one class even if there are other classes associated with the element.

Therefore, I suggest utilizing this CSS locator solution for optimal efficiency and conciseness:

WebElement cluster = driver.findElement(By.cssSelector(".marker-cluster-small"));

P.S. CSS validation conducted using firepath on firefox.

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

Is there a way to modify the color of my question post-submission?

Within my code, there are numerous queries that need to be addressed. Upon submission, I desire to alter the color of each question to green if the response is correct, or red if it is incorrect. document.getElementById("submit-button").addEventLi ...

javascripthtmlcsscolors

Ways to Customize <td> Elements Within a <table> Container

Currently, I am utilizing jsp along with css to style the <td> within the <table> tag. My desired code format is shown below: https://i.sstatic.net/WJjA8.png However, what I am currently receiving is: https://i.sstatic.net/bLyvd.png #beng ...

htmlcss

Leveraging Selenium to execute the webdriver for Chrome and configuring a proxy to track visited URLs

I'm a beginner in the world of automation and I'm curious about incorporating selenium webdriver with Python. My goal is to have the Chrome webdriver launch a website while attaching a proxy to monitor user actions. The proxy can be executed usin ...

pythonpython-3.xseleniumwebdriverselenium-chromedriver

Utilizing Selenium with Java: Extracting Data from a Single Dropdown Menu (Time Selection)

Hey there: I am facing an issue with extracting data from a calendar field. I am trying to extract the information (HH.MM.AM/PM) from a single date field, but so far, it has been unsuccessful. This is the code snippet I have been using: WebElement currT ...

javaselenium-webdriver

Selecting CSS Properties with jQuery

I am trying to make an image change color to blue and also change the background color to blue when it is clicked inside a div. However, my code doesn't seem to be working as expected. Is there a more efficient way to apply CSS to elements? FIDDLE v ...

jquerycss

Use jQuery to change the background color when clicked

Below is the HTML code with UL and LI elements: <UL> <LI><span id='select1'>Text</span></LI> <LI><span id='select2'>Text</span></LI> <LI><span id='select3'>Tex ...

javascriptjquerycss

My divs are multiplying twice as fast with every iteration of the Javascript For Loop

Recently, I developed a script that generates a series of fields based on a number provided by the user (k). Initially, I had a script that would create the correct number of fields. However, I decided to arrange them like vectors on the screen, so I made ...

javascripthtmlcss

Enable vertical scrolling on the second row of a table while keeping the first row fixed as the table header (CSS)

While embedding the Ace Editor in a Chrome popup window, I encountered a challenge. My goal was to keep the first row of text always visible at the top while allowing the rest of the Editor to fill the screen. However, there is an issue with a vertical scr ...

javascripthtmlcssace-editor

Fading effect of Bootstrap JS on reducing content size

My quest for a toggle collapse button led me to this helpful link: https://getbootstrap.com/docs/4.0/components/collapse/ I found what I needed, but encountered an issue with the transition; clicking on the button immediately reveals my div. I desire a slo ...

javascripthtmljquerycssbootstrap-4

Can JavaScript values be passed into CSS styles?

I am currently working on dynamically updating the width of a CSS line based on a JavaScript value (a percentage). The line is currently set at 30%, but I would like to replace that hard-coded value with my JavaScript variable (c2_percent) to make it mor ...

javascripthtmlcssdjango

Changing the text color and background color of a span element when a ng-click event is triggered

There are two buttons, Today and Tomorrow, each with an ng-click function. By default, the button background color is white and text color is red. When the Today button is clicked, the background color changes to blue and the text color changes to white. ...

javascripthtmlcssangularjs

Applying Bootstrap Style to an Inline Select Element: A Step-by-Step Guide

Currently working on a page layout using Thymeleaf and Bootstrap 5. I have divided the page into two parts, with this section behaving as desired: <main role="main" class="pb-3"> <br> <p>Post office ex ...

htmlcssthymeleafbootstrap-5

Eliminate the dimming background on a discussion thread in Discourse

Working on customizing a theme for my blog using the Discourse engine has been quite interesting. I have noticed that every post, or "topic," loads with a blue background that quickly transitions to the main background color. You can take a look at an exam ...

csssassdiscourse

Tips for preventing text from breaking onto a new line in Safari

I have cforms plugin installed on a WordPress page. Interestingly, the word "required" in Russian appears to consist of two words as per the translation office. While it displays correctly in Firefox, in Safari it breaks and aligns to the bottom left of ...

csswordpress

Tips for dynamically updating the id value while iterating through a class

Here's the HTML snippet I am working with: <div class="info"> <div class="form-group"> <label class="control-label col-sm-2">Title</label> <div class="col-xs-10 col-sm-8"> <inpu ...

javascriptjqueryhtmlcss

I'm having trouble getting my dropdown content to align properly with my centered search bar. Any suggestions on how to fix this issue?

How can I align the dropdown content to the center in its td element? I haven't included all of my code here, so feel free to ask if you need more information. The search bar is supposed to be at the center of this table navbar. This is the HTML: &l ...

htmlcss

Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

When multiple checkboxes are selected by the user, corresponding form fields should appear based on the checkboxes. For example, if both flight and hotel checkboxes are checked, then the full name and last name fields should be displayed while other fields ...

javascripthtmlcss

What is the best way to create a smooth transition for a bootstrap navbar in chrome, toggling from right to left on

I have successfully modified the bootstrap navbar to toggle from right to left instead of top to bottom using the following code: For HTML- <nav class="navbar navbar-inverse" role="navigation" style="height: 55px; padding-top: 2px; background-color: # ...

javascriptjquerycssgoogle-chrometwitter-bootstrap-3

Tips for keeping two row headers in place on a table while scrolling:

Check out my fiddle here: https://jsfiddle.net/oed1k6m7/. It contains two td elements inside the thead. thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; } The code above only makes the first row fixed. How can I make b ...

htmlcsshtml-table

What is the best way to make the first LI elements stand out in a nested structure by applying bold

I had an idea like this: #list li > a { font-weight: bold; } However, I only want the top level items to be made bold, not nested LI's within LI's -- hope that makes sense?? :) EDIT | <ul id="list"> <li><a href="#"& ...

csscss-selectors