<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.
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
"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:
Related
I need to find the xpath of the help button for my automation tests.
Here is the HTML element:
<button data-component-id="nokia-react-components-iconbutton" tabindex="0" class="ActionComponent__ActionComponentDiv-sc-st3635-0 iPWdbh IconButton__StyledButton-sc-1dtic80-0 biWRLS NSPAppBanner__HelpButton-sc-761pc0-3 dvtRqt" mode="dark" type="button" xpath="1"></button>
<svg class="HelpOutline__NSPSvgIcon-sc-7y3t1-0 geSzXs HelpWidget__StyledHelp-sc-1fdz44x-0 cCTbqa" viewBox="0 0 24 24" xpath="1">
</svg>
I tried with this XPath, but it didn't work:
//*[#data-component-id="nokia-react-components-iconbutton"]//svg[contains(#class,"HelpOutline")]
If you want to select the <button> element before the <svg>, try the following XPath:
//*[#data-component-id="nokia-react-components-iconbutton" and following-sibling::svg[1][contains(#class,"HelpOutline")]]
The <button> element itself should be clickable and both the locator strategies should work:
css_selector:
button[class*='HelpButton'][data-component-id='nokia-react-components-iconbutton']
xpath:
//button[#data-component-id='nokia-react-components-iconbutton' and contains(#class, 'HelpButton')]
However, as the element is a React element so to click on the element you need to induce WebDriverWait for the element to be clickable and you can use either of the following locator strategies:
Using Java and xpath:
new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.elementToBeClickable(By.xpath("//button[#data-component-id='nokia-react-components-iconbutton' and contains(#class, 'HelpButton')]"))).click();
Using Python and css_selector:
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "button[class*='HelpButton'][data-component-id='nokia-react-components-iconbutton']"))).click()
Note: For Python clients 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
Try this XPath to locate button:
'//*[name()="svg" and contains(#class,"HelpOutline")]/preceding-sibling::button'
Note that svg tag is not a part of standard HTML-namespace, so //svg won't work. You need to use //*[name()="svg"] instead
This question already has answers here:
Scraping Data from a website which uses Power BI - retrieving data from Power BI on a website
(2 answers)
Closed 2 years ago.
I have the following element inside an iframe. This tag displays a ">" icon and will flip to the next graph on the URL when the user clicks on it. You can see it in the following URL where it says
< 1 of 16 >
https://msdh.ms.gov/msdhsite/_static/14,21995,420,873.html
<a>
<i class="glyphicon glyph-small pbi-glyph-chevronrightmedium middleIcon active pbi-focus-outline" focus-element="" tabindex="0" title="Next Page">
</i>
</a>
Using Selenium how can I send a click action to this element to flip to the next graph?
url='https://msdh.ms.gov/msdhsite/_static/14,21995,420,873.html'
p='my/path/to/chromedriver'
driver=webdriver.Chrome(p)
driver.get(url)
myframe=driver.find_element_by_class_name("flexibleFrame")
driver.switch_to.frame(myframe)
i = driver.find_element_by_class_name("glyphicon")
The > icon is within a <iframe> so to interact with the WebElement using Selenium you have to:
Induce WebDriverWait for the desired frame to be available and switch to it.
Induce WebDriverWait for the desired visibility_of_element_located().
scrollIntoView() the WebElement.
You can use either of the following Locator Strategies:
Using CSS_SELECTOR:
driver.get('https://msdh.ms.gov/msdhsite/_static/14,21995,420,873.html')
WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.CSS_SELECTOR,"iframe.flexibleFrame")))
elem = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "i.glyphicon.glyph-small.pbi-glyph-chevronrightmedium.middleIcon.active.pbi-focus-outline[title='Next Page']")))
driver.execute_script("arguments[0].scrollIntoView(true);", elem)
elem.click()
Using XPATH:
driver.get('https://msdh.ms.gov/msdhsite/_static/14,21995,420,873.html')
WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"//iframe[#class='flexibleFrame']")))
elem = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//i[#class='glyphicon glyph-small pbi-glyph-chevronrightmedium middleIcon active pbi-focus-outline' and #title='Next Page']")))
driver.execute_script("arguments[0].scrollIntoView(true);", elem)
elem.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
Browser Snapshot:
Reference
You can find a relevant discussions in:
Ways to deal with #document under iframe
i need to extract the breadcrumbs of this website site: https://www.woolworths.com.au/Shop/Browse/drinks/cordials-juices-iced-teas/iced-teas
I tried to inspect the element and copy the xpath but it doesn't extract it
from selenium import webdriver
driver = webdriver.Firefox()
driver.get('https://www.woolworths.com.au/Shop/Browse/drinks/cordials-juices-iced-teas/iced-teas')
driver.find_elements_by_xpath('//*[#id="center-panel"]/div/wow-tile-list-with-content/ng-transclude/wow-browse-tile-list/wow-tile-list/div/div[1]/div[1]/wow-breadcrumbs/div/ul/li[4]/span/span')
driver.find_element_by_css_selector('#center-panel > div > wow-tile-list-with-content > ng-transclude > wow-browse-tile-list > wow-tile-list > div > div.tileList > div.tileList-headerContainer > wow-breadcrumbs > div > ul > li:nth-child(4) > span > span')
How can I proceed?
To print the breadcrumbs of the website site: https://www.woolworths.com.au/Shop/Browse/drinks/cordials-juices-iced-teas/iced-teas you have to induce WebDriverWait for the desired visibility_of_element_located() and you can use either of the following Locator Strategies:
Using CSS_SELECTOR and get_attribute() method:
print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "ul.breadcrumbs-linkList li:nth-child(4) span span"))).get_attribute("innerHTML"))
Using XPATH and text property:
print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//ul[#class='breadcrumbs-linkList']//following-sibling::li[4]//span//span"))).text)
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
Outro
As per the documentation:
get_attribute() method Gets the given attribute or property of the element.
text attribute returns The text of the element.
Difference between text and innerHTML using Selenium
The page you are trying to scrape is written in Angular, meaning that most of the DOM elements are loaded dynamically by JavaScript AJAX code and they are not present once the page is loaded. (driver.get function returns)
You should use waits until function to locate such elements.
Here is the working example using the XPATH you provided:
driver.get('https://www.woolworths.com.au/Shop/Browse/drinks/cordials-juices-iced-teas/iced-teas')
try:
element = WebDriverWait(driver, 1).until(
EC.presence_of_element_located((By.XPATH, '//*[#id="center-panel"]/div/wow-tile-list-with-content/ng-transclude/wow-browse-tile-list/wow-tile-list/div/div[1]/div[1]/wow-breadcrumbs/div/ul/li[4]/span/span'))
)
print(element.text) ' this outputs Iced Teas
except TimeoutException:
print("Timeout")
Below one works for my validation
//*[span='first text' and span='Search results for "second text"']
Hi~in this music websit:
Music website link
i want to click on the like button in the right side of the song bar
i use below codes:
like_number=3
like_pos=f'#app > div > div.content-wrapper > div.song-list-view.list-view.view-without-leftbar > div.song-list > div > div.table.idle.song-table.song-list-table > div > table > tbody > tr:nth-child({str(like_number)}) > td:nth-child(5) > div > div > div:nth-child(1) > div'
button = self.browser.find_element_by_css_selector(like_pos)
self.browser.implicitly_wait(10)
ActionChains(self.browser).move_to_element(button).click(button).perform()
But,there is no response,console shows that my the tag is not interactive:
element not interactable” exception
I am so confused ,cause i search for whole the stack overflow ,but there is no practical solution for me
I just want to achieve a simple function of clicking on like button
Thanks if you have any great idea for me!
The hard thing is that you have to pause you mouse for a while and then click button shows ,so that you are able to click on it ,this is so wired situation.
Below is image example
To click() on the Like button in the right side of the song bar you have to induce WebDriverWait for the element_to_be_clickable() and you can use the following Locator Strategies:
Code Block:
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument("start-maximized")
driver = webdriver.Chrome(options=chrome_options)
driver.get("https://www.xiami.com/favorite/88955424")
ActionChains(driver).move_to_element(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//table/tbody/tr//div[#class='duration-container ops-container']")))).perform()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//table/tbody/tr//div[#class='duration-container ops-container']//div[#class='operations ops-right']/div[#class='ops-item']/div[#class='iconfont']"))).click()
Browser Snapshot:
References
You can find a couple of relevant discussions in:
How to resolve ElementNotInteractableException: Element is not visible in Selenium webdriver?
org.openqa.selenium.ElementNotInteractableException: Element is not reachable by keyboard: while sending text to FirstName field in Facebook
I'm trying to select below element in a webpage.
.active > b:nth-child(1)
This is my code :
timbro = browser.find_element_by_css_selector('.active > b:nth-child(1)')
hover = ActionChains(browser).move_to_element(timbro)
hover.perform()
This is part of the error I'm getting:
Message: Unable to locate element:
{"method":"css selector","selector":".active > b:nth-child(1)"}"
what I'm trying to do is activate a drop down menu so that I can click on another link.
HTML Snippet:
<li>
<b>Menu iniziale</b>
<ul style="display: block;" class="sub-links">
<li>
Anagrafica
</li>
<li>
Fine sessione
</li>
<li>
Home
</li>
<li>
Timbro
</li>
</ul>
</li>
You should try using WebDriverWait to wait until presence of element as below :-
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
wait = WebDriverWait(browser, 5)
menuIniziale = wait.until(EC.presence_of_element_located((By.LINK_TEXT, "Menu iniziale")))
hover = ActionChains(browser).move_to_element(menuIniziale).move_to_element(wait.until(EC.presence_of_element_located((By.LINK_TEXT, "Timbro"))))
hover.click().build().perform()
Edited1 :- If unfortunately LINK_TEXT does not work try using XPATH as below :-
menuIniziale = wait.until(EC.presence_of_element_located((By.XPATH, ".//a[contains(.,'Menu iniziale')]")))
hover = ActionChains(browser).move_to_element(menuIniziale).move_to_element(wait.until(EC.presence_of_element_located((By.XPATH, ".//a[contains(.,'Timbro')]"))))
hover.click().build().perform()
Or try using CSS_SELECTOR as below :-
menuIniziale = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "a.main-link")))
hover = ActionChains(browser).move_to_element(menuIniziale).move_to_element(wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "ul.sub-links > li:nth-child(4)"))))
hover.click().build().perform()
Edited2 : If this element is inside an iframe, you need to switch that iframe before finding element as below :-
wait.until(EC.frame_to_be_available_and_switch_to_it(("frame name or id")))
#Now after successfully switching to frame do any one of the above steps
Edited3 :- If you are now able to open menu but not able to select subMenu try as below :-
wait.until(EC.frame_to_be_available_and_switch_to_it(("frame name or id")))
menuIniziale = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "a.main-link")))
hover = ActionChains(browser).move_to_element(menuIniziale)
hover.build().perform()
subMenu = wait.until(EC.visibility_of_element_located((By.XPATH, ".//a[contains(.,'Timbro')]")))
subMenu.click()
Edited4: Final code
menuIniziale = wait.until(EC.presence_of_element_located((By.XPATH, ".//a[contains(.,'Menu iniziale')]")))
hover = ActionChains(browser).move_to_element(menuIniziale)
hover.perform()
subMenu = wait.until(EC.visibility_of_element_located((By.XPATH, ".//a[contains(.,'Timbro')]")))
subMenu.click()
hover = ActionChains(browser).move_to_element(subMenu)
hover.click().perform()