Press the identical button arrangement with selenium using python

How do I click on buttons with the same classes one by one?

This is the Python code I am using:

clk_but1 = wait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//button[@class = ('applyBtn btn btn-sm btn-red')]")))
driver.execute_script("arguments[0].click();", clk_but1)

clk_but2 = wait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//button[@class = ('applyBtn btn btn-sm btn-red')]")))
driver.execute_script("arguments[0].click();", clk_but2)

The HTML code is as follows:

<div class="daterangepicker dropdown-menu ltr opensright show-calendar" 
     style="display: block; top: 118px; left: auto; right: 0px;">
...
</div>
<div class="daterangepicker dropdown-menu ltr opensright show-calendar" style="display: none; top: 118px; left: auto; right: 0px;">
...
</div>
javascriptseleniumbootstrap-4

Answer №1

Opting for find_elements_by_css_selector over xpath is recommended due to the likelihood of xpath changing, making code maintenance challenging. It's advisable to also iterate through the elements using a loop.

elements = driver.find_elements_by_css_selector("button.daterangepicker")

for element in elements:
   element.click();

revision

In a discussion on stackoverflow - Nilesh, it has been convincingly argued why CSS-selector should be favored.

Answer №2

There are two identical blocks labeled as <div class="daterangepicker. However, one of the blocks is visible while the other remains hidden. This means that you can only interact with the button located within the visible block.

The visible block is styled with display: block

<div class="daterangepicker dropdown-menu ltr opensright show-calendar" 
     style="display: block; top: 118px; left: auto; right: 0px;">

The invisible block is styled with display: none

<div class="daterangepicker dropdown-menu ltr opensright show-calendar" 
    style="display: none; top: 118px; left: auto; right: 0px;">

To locate the visible block, first find it and then target the button inside it.

div.daterangepicker:not([style*='display: none']) // locate the visible block

driver.find_element_by_css_selector(
   "div.daterangepicker:not([style*='display: none']) .applyBtn"
).click()

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

Guide to creating the shared section of two wheels with CanvasRenderingContext2D

Is it possible to dynamically draw the shared area of two circular shapes using JavaScript and CanvasRenderingContext2D? My ultimate goal is to be able to adjust the size of the shape, ranging from a complete circle to a mere point. The desired outcome is ...

javascripttypescriptcanvaschart.jshtml5-canvas

How can I position two bootstrap tables side by side based on their columns

Currently, I am utilizing bootstrap and Laravel form control to generate the table structures below. The one issue I am encountering is figuring out how to align the delete and edit buttons from two separate tables. Here is a snapshot of the current layout ...

csslaravelbootstrap-4

Steps for handling errors in Node.js when the query result rowCount is 0 and throwing an error in response

If the rowcount is 0, I need to send a response as failed. If the rowcount is 1, I need to send a success status. Can someone please assist me with this? When I try to print (client.query), it displays the result in JSON format (refer to attached image). ...

javascriptangularjsnode.js

"Selenium's find_elements_by_class_name function is failing to retrieve the complete list of elements

Struggling to scrape data from a website using Selenium and Python 3, encountering issues. Code snippet from the target site: <uni-view data-v-13033eed="" class="select-container" style="height: 1777px;"> <uni-view data-v-13033eed="" class ...

pythonpython-3.xseleniumselenium-webdriver

Numerous XMLHttp requests causing JSON data to be overwritten

I am facing an issue where my JSON data is being overwritten by the result of the last XMLHttpRequest made for each country. Is there a way to prevent this from happening? Below is the code snippet in question: function getDataBetween() { for (var i = ...

javascriptjsonxmlhttprequest

Submitting POST data to PHP using AJAX

Having always sent AJAX requests with jQuery, I am now faced with the challenge of sending them using 'vanilla' JS. Despite my best efforts, I have managed to get everything working except for passing the data along with the request. The two vari ...

javascriptphpajax

Owl caroussel - Add a numbered image counter in between the navigation buttons

Recently, I made some adjustments to the owl caroussel nav buttons "next" and "previous" by modifying lines 2966 and 2968 to resemble arrows. To further enhance it, I now plan to include a div that will feature an image counter positioned between the navi ...

javascripthtmlcssowl-carousel

Image not displayed after uploading to presigned AWS S3 URL in React Native

I've been attempting to upload an image to AWS S3 in my React Native app (expo managed workflow) but I keep encountering the issue of the file being empty. Strangely, there are no errors thrown during the process. Even after trying to use the Uppy AWS ...

javascriptreactjsamazon-web-servicesreact-nativeamazon-s3

Move the cursor and watch as the Hover Image seamlessly follows its path

Currently, I am attempting to create an interactive hover effect with an image that moves along with the mouse cursor. While I have come across various resources for achieving this effect, the limitation of working within a Wordpress theme restricts my ab ...

javascriptjquerymouseeventpseudo-element

Angular modules are designed to repeat chunks of code in a

Whenever I scroll the page, my function pushes items to an array. However, I am facing an issue where the pushed items are repeating instead of adding new ones. Solution Attempt onScroll(): void { console.log('scrolled'); var i,j,newA ...

javascriptangulartypescript

modify an element using jquery

Hey there! I'm facing an issue where I have an ID of #item_quantity in a span, and I want it to refresh its contents once a button with the ID of #update_cart is clicked. It seems that everything else updates fine on click, but for some reason, the sp ...

javascriptjqueryjsonajaxajaxform

Unable to write or upload error in a Node Express application

My GET and POST APIs are functioning properly, however, my app.put is not working as expected. https://i.sstatic.net/Oc0QT.png Upon sending a PUT request to localhost:3001/contacts/1 using Postman, I am unable to see the console.log output: https://i.ss ...

javascriptnode.jsexpressput

What is the recommended approach for effectively cascading the deletion of a secondary object in MongoDB when an account is

My app allows users to create accounts and interact with posts by liking and sharing them. However, I'm facing an issue when a user decides to delete their account. I have managed to resolve most of the related data removal except for one specific cas ...

javascriptnode.jsmongodbexpressmongoose

Hold off until the specified text appears in the text box

How can we use WebDriver to wait until text appears in a text field? I am dealing with a kendo text field where the values are fetched from a database, so there is a delay before they appear. I need to ensure the values have loaded before moving forward. ...

javaseleniumselenium-webdriver

Establishing the NumbroJS cultural settings

I have been attempting to modify numbro's culture. I initially tried the straightforward method, but encountered an error: Unknown culture : ' + code numbro.culture('fr-FR'); My attempt looked like this: const br = require('numb ...

javascriptnode.js

How do I set up a timing mechanism in a VSCode extension to automatically clear error messages after a specified duration?

I'm currently in the process of developing a VSCode extension, and ran into an issue where I need to display an error message if a certain condition is met. However, I want this error message to automatically disappear after a set amount of time (say, ...

javascriptvisual-studio-codevscode-extensions

Firebase causing API to render only upon typing initiation

I have been working on developing a Twitter-like app using React and Firebase, but I have come across a small bug. Currently, I am using useEffect to display my firebase collection when the page loads, and then mapping the tweets to the page. However, the ...

javascriptreactjsfirebasegoogle-cloud-firestore

Tips for using the .join() method in React when the array is not initially present

I'm currently working on a functional React component that retrieves data from an API request and displays it. The object initially is empty until the request is made. Inside the object, there is an array structured like this: ['US', ' ...

javascriptreactjsecmascript-6

Tips for selecting and clicking on a partial URL within an href tag using Selenium with Python

When using Selenium, I am able to locate the element that needs to be clicked. However, I am facing an issue where the href attribute only contains a portion of the complete link. For instance, the website is https://vietstock.vn The element can be found ...

pythonseleniumscrape

Initiate an "execute.document" command directly from the address bar

While reviewing my old website, I stumbled upon this snippet: <input type="image" id="QuickPass" name="QuickPass" src="/images/QuickPass.gif" alt="Quick Pass" onclick="document.pressed=this.value" value="QuickPass" /> nestled within this form: & ...

javascripthtmlurl