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.

Answer 1

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
  

Answer 2

"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: