how to locate a button for selenium

Question

<button id="export-button" aria-label="export transactions" color="primary" aria-haspopup="true" aria-expanded="false" type="button" data-component-id="Button" class="Buttonstyle__StyledButton-sc-1vu4swu-3 cHnaSs"><div class="Buttonstyle__StyledFlexContainer-sc-1vu4swu-0 bEnvol"><div class="Buttonstyle__StyledIconContainer-sc-1vu4swu-1 bAsplb"><svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" class="Iconstyle__StyledIcon-sc-82cwdi-0 doMWlN"><path fill-rule="evenodd" d="M18 18.75V11.5a.75.75 0 111.5 0v8a.75.75 0 01-.75.75H5.25a.75.75 0 01-.75-.75v-8a.75.75 0 111.5 0v7.25h12zM12.767 6.322l-.02 10.292a.75.75 0 11-1.5 0l.02-10.315L8.38 9.185a.75.75 0 01-1.06-1.06l4.155-4.155a.75.75 0 011.06 0l4.231 4.23a.75.75 0 01-1.06 1.062l-2.94-2.94z"></path></svg></div>Export</div></button>

I like to locate the imaged button to use selenium. I have tried using ID,xpath, Link_TEXT, css_selector as below, but none of them worked.

export_btn=browser.find_element(By.ID,'export-button')
export_btn=browser.find_element(By.XPATH,'//*[@id="export-button"]/div')
export_btn=browser.find_element(By.XPATH,'//button[normalize-space()="Export"]')
export_btn=browser.find_element(By.LINK_TEXT,'Export')
export_btn=browser.find_element(By.CSS_SELECTOR,'#export-button')
export_btn=browser.find_element(By.CSS_SELECTOR,'#export-button > div')

would you please help me to locate the button?

Thank you in advance, hoo

UPDATE -20Feb22-

Thank you undetected Selenium, cruisepandey !!

I still cannot locate the button. It is my bad. I should have provided more information as possible. This is an online banking site so that URL link won't work.

The button consists of 2 divided parts. one for upper arrow shape and the other is the Export word itself. The element that I had provided is Export button as a whole. there are more details of the three elements

Export button as a whole

element

<button id="export-button" aria-label="export transactions" color="primary" aria-haspopup="true" aria-expanded="false" type="button" data-component-id="Button" class="Buttonstyle__StyledButton-sc-1vu4swu-3 gzjAAB"><div class="Buttonstyle__StyledFlexContainer-sc-1vu4swu-0 bEnvol"><div class="Buttonstyle__StyledIconContainer-sc-1vu4swu-1 bAsplb"><svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" class="Iconstyle__StyledIcon-sc-82cwdi-0 doMWlN"><path fill-rule="evenodd" d="M18 18.75V11.5a.75.75 0 111.5 0v8a.75.75 0 01-.75.75H5.25a.75.75 0 01-.75-.75v-8a.75.75 0 111.5 0v7.25h12zM12.767 6.322l-.02 10.292a.75.75 0 11-1.5 0l.02-10.315L8.38 9.185a.75.75 0 01-1.06-1.06l4.155-4.155a.75.75 0 011.06 0l4.231 4.23a.75.75 0 01-1.06 1.062l-2.94-2.94z"></path></svg></div>Export</div></button>

Selector

#export-button

XPATH

//*[@id="export-button"]

Full XPATH

/html/body/div[2]/div/miniapp-transactions//div/div/div/div[2]/div/div/div/div/div[1]/div/div/div/div[2]/div/div/span/button

upper arrow

element

<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" class="Iconstyle__StyledIcon-sc-82cwdi-0 doMWlN"><path fill-rule="evenodd" d="M18 18.75V11.5a.75.75 0 111.5 0v8a.75.75 0 01-.75.75H5.25a.75.75 0 01-.75-.75v-8a.75.75 0 111.5 0v7.25h12zM12.767 6.322l-.02 10.292a.75.75 0 11-1.5 0l.02-10.315L8.38 9.185a.75.75 0 01-1.06-1.06l4.155-4.155a.75.75 0 011.06 0l4.231 4.23a.75.75 0 01-1.06 1.062l-2.94-2.94z"></path></svg>

Selector

#export-button > div > div > svg

XPATH

//*[@id="export-button"]/div/div/svg

Full XPATH

/html/body/div[2]/div/miniapp-transactions//div/div/div/div[2]/div/div/div/div/div[1]/div/div/div/div[2]/div/div/span/button/div/div/svg

Export word itself

element

<div class="Buttonstyle__StyledFlexContainer-sc-1vu4swu-0 bEnvol"><div class="Buttonstyle__StyledIconContainer-sc-1vu4swu-1 bAsplb"><svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" class="Iconstyle__StyledIcon-sc-82cwdi-0 doMWlN"><path fill-rule="evenodd" d="M18 18.75V11.5a.75.75 0 111.5 0v8a.75.75 0 01-.75.75H5.25a.75.75 0 01-.75-.75v-8a.75.75 0 111.5 0v7.25h12zM12.767 6.322l-.02 10.292a.75.75 0 11-1.5 0l.02-10.315L8.38 9.185a.75.75 0 01-1.06-1.06l4.155-4.155a.75.75 0 011.06 0l4.231 4.23a.75.75 0 01-1.06 1.062l-2.94-2.94z"></path></svg></div>Export</div>

Selector

#export-button > div

XPATH

//*[@id="export-button"]/div

Full XPATH

/html/body/div[2]/div/miniapp-transactions//div/div/div/div[2]/div/div/div/div/div[1]/div/div/div/div[2]/div/div/span/button/div

I believe if I can click one of the three, Export will be executed. Thank you for your time for helping me !!

hoo

PS I attach the button image with a new button, if I succesfully can click the export button, the new one will show.

Update -21Feb22

I have noticed the export button appears only when they have some transactions to show. It prevents to locate the button? I attached the image of the part of the codes.

In order to give you a locator we need to see that page - please provide a link to that page if possible or at least the entire XML / HTML code of that page. We have nothing to do with picture you provided. — Prophet, Feb 19 '22 at 17:20

cruisepandey · Answer 1 · 2022-02-20T14:29:44.577

0

"Export"

is a text node, Selenium usage xpath v1.0 so you can not write the text-based xpath for this.

However, you can try with the below XPath:

//div[starts-with(@class,'Buttonstyle__StyledIconContainer-sc')]//*[name()='svg' and starts-with(@class,'Iconstyle')]

PS : Please check in the dev tools (Google chrome) if we have unique entry in HTML DOM or not.

Steps to check:

Press F12 in Chrome -> go to element section -> do a CTRL + F -> then paste the xpath and see, if your desired element is getting highlighted with 1/1 matching node.

and if it is unique:

You can click it like this:

export_btn = browser.find_element(By.XPATH, "//div[starts-with(@class,'Buttonstyle__StyledIconContainer-sc')]//*[name()='svg' and starts-with(@class,'Iconstyle')]")
export_btn.click()

or with WebDriverWait:

WebDriverWait(browser, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[starts-with(@class,'Buttonstyle__StyledIconContainer-sc')]//*[name()='svg' and starts-with(@class,'Iconstyle')]"))).click()

Imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

Update:

edited Feb 20 '22 at 14:29

answered Feb 19 '22 at 18:34

cruisepandey

28,520
6
20
38

thank you cruisepandey. I should have provided more information regarding this question. Please look my update. – hooch Feb 20 '22 at 03:11
@hooch: I understand that the button `consists of 2 divided parts.` which part do you click manually to trigger the click? – cruisepandey Feb 20 '22 at 11:00
hi cruisepandey, either one will pop up another button to click. when i click the area of the button, it will show so as upper arrow and Export word itself. i update my question with the image. – hooch Feb 20 '22 at 12:27
@hooch: What is the error that you got when you used this xpath `//div[starts-with(@class,'Buttonstyle__StyledIconContainer-sc')]//*[name()='svg' and starts-with(@class,'Iconstyle')]`, See above I have attached an image, and xpath should work since it is unique in nature. – cruisepandey Feb 20 '22 at 14:30
@ cruisepandey thank you for checking ! this is error that i get selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//div[starts-with(@class,'Buttonstyle__StyledIconContainer-sc')]//*[name()='svg' and starts-with(@class,'Iconstyle')]"} (Session info: chrome=98.0.4758.102) – hooch Feb 20 '22 at 22:59
I probalby have not provided enough information still.. I found the export button appears not always and found some script saying shadow-root. I attach the image on my question. banking site getting hard to do web scraping.... thank you cruisepandery !! – hooch Feb 21 '22 at 00:19

undetected Selenium · Answer 2 · 2022-02-19T18:55:25.893

0

To locate the element with text as Export you can use either of the following Locator Strategies:

Using css_selector:

element = driver.find_element(By.CSS_SELECTOR, "button#export-button[aria-label='export transactions'][data-component-id='Button'][color='primary'] > div")

Using xpath:

element = driver.find_element(By.XPATH, "//button[@id='export-button' and @aria-label='export transactions'][@data-component-id='Button']/div[contains(., 'Export')]")

Ideally, to locate the clickable element and to invoke click() on it you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following locator strategies:

Using CSS_SELECTOR:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "button#export-button[aria-label='export transactions'][data-component-id='Button'][color='primary'] > div"))).click()

Using XPATH:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//button[@id='export-button' and @aria-label='export transactions'][@data-component-id='Button']/div[contains(., 'Export')]"))).click()

Note : You have to add the following imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

edited Feb 19 '22 at 18:55

answered Feb 19 '22 at 18:39

undetected Selenium

183,867
41
278
352

thank you undetected selnium! I have tried out but didn't work due to my bad. I should have provided more information regarding this question. please look at my update. I am bit messy to ask a question on stack overflow. please forgive me. – hooch Feb 20 '22 at 03:13
Considering the update to your question [my answer](https://stackoverflow.com/a/71188019/7429447) would remain unchanged as the facts you have updated are already factored in. – undetected Selenium Feb 20 '22 at 14:06
hi undetected Slenium, thank you so much for checking ! WebDriverWait(browser, 20).until(EC.element_to_be_clickable((By.XPATH, "//button[@id='export-button' and @aria-label='export transactions'][@data-component-id='Button']/div[contains(., 'Export')]"))).click() File "C:\Users\hooch\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\support\wait.py", line 89, in until raise TimeoutException(message, screen, stacktrace) – hooch Feb 21 '22 at 00:26
WebDriverWait(browser, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "button#export-button[aria-label='export transactions'][data-component-id='Button'][color='primary'] > div"))).click() File "C:\Users\hooch\AppData\Local\Programs\Python\Python310\lib\site-packages\selenium\webdriver\support\wait.py", line 89, in until raise TimeoutException(message, screen, stacktrace) selenium.common.exceptions.TimeoutException: Message: – hooch Feb 21 '22 at 00:32
I have noticed the export button appears only when they have transactions. I have attached the image of the code on my Question. If there are more information needed to solve, please let me know. – hooch Feb 21 '22 at 00:39

how to locate a button for selenium

2 Answers2