Selenium (Python) : Element is not clickable - python

I'm trying to select a payment on a website. I have three choices : SEPA, Credit/debit, PayPal. I want to click on Credit/Debit.
It looks like this
Those choices are inside a main div, and each choice is inside another div that contains input (radio type) and label.
The problem is that I can't click on this choice because I have the following error:
selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element is not clickable at point (466, 1613)
with this code:
element = driver.find_element_by_css_selector("input[type='radio'][id='input-method-cc'][value='cc']")
element.click()
I found a workaround that works, but for some reasons it mess up the form and invalidate it.
Here is what I tried:
element = driver.find_element_by_css_selector("input[type='radio'][id='input-method-cc'][value='cc']")
driver.execute_script("arguments[0].click();", element)
I tried other solutions, such as waiting until element visible, xpath, ... but got no result.
I would like to know why my element is not clickable, while I can click on it with javascript?
Any help appreciated! Thanks
HTML Code :
<div id="place-order" class="has-shadow">
<div class="white-box">
<div class="recurly-payment-fields mb-4">
<div class="recurly-payment-buttons row my-4">
<div class="recurly-payment-buttons__item col method-sepa" data-target="method-sepa">
<input type="radio" id="input-method-sepa" name="method" value="sepa" checked="" class="sr-only">
<label class="sr-only" for="method-sepa">SEPA</label>
<div class="recurly-payment-buttons__button p-3 d-flex justify-content-center">
<div class="logo"></div>
</div>
</div>
<div class="recurly-payment-buttons__item col method-cc active" data-target="method-cc">
<input type="radio" id="input-method-cc" name="method" value="cc" class="sr-only">
<label class="sr-only" for="method-cc">Credit Card</label>
<div class="recurly-payment-buttons__button p-3 d-flex justify-content-center">
<div class="logo"></div>
</div>
</div>
<div class="recurly-payment-buttons__item col method-paypal" data-target="method-paypal">
<input type="radio" id="input-method-paypal" name="method" value="paypal" class="sr-only">
<label class="sr-only" for="method-paypal">PayPal</label>
<div class="recurly-payment-buttons__button p-3 d-flex justify-content-center">
<div class="logo"></div>
</div>
</div>
</div>
<div id="recurly-payment-methods" class="recurly-payment-methods">
<div id="field-method-sepa" class="recurly-payment-methods__field method-sepa collapse" style="">
<p>
<label for="iban">IBAN</label>
<input type="text" id="iban" name="iban" class="form-control" placeholder="e.g. FR1420041010050500013M02606" data-recurly="iban">
</p>
</div>
<div id="field-method-cc" class="recurly-payment-methods__field method-cc collapsed collapse show" style="">
<div id="recurly-card-field" name="card">
<div data-recurly-element-id="HYOmiZxK5SgiQBEk" class="recurly-element recurly-element-card">
<iframe allowtransparency="true" frameborder="0" scrolling="no" name="recurly-element--HYOmiZxK5SgiQBEk" allowpaymentrequest="true" style="background: none; width: 100%; height: 100%;" src="https://api.recurly.com/..." tabindex="0"></iframe>
</div>
</div>
</div>
<div id="field-method-paypal" class="recurly-payment-methods__field method-paypal collapsed collapse" style="">
<span class="text-md-3">You will be directed to PayPal when checkout is complete.</span>
</div>
</div>
</div>
<div class="woocommerce-terms-and-conditions-wrapper">
<div class="terms-and-conditions-text mr-4">
<a data-toggle="collapse" href="#terms-and-conditions" class="terms-and-conditions-link" target="">
Clicking
<strong>Submit</strong>
means that you agree to the
<span class="text-link">terms and conditions</span>
.
</a>
</div>
<div id="terms-and-conditions" class="terms-and-conditions collapse rounded">
</div>
</div>
</div>
</div>

Add a wait condition
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
element = WebDriverWait(driver, 20).until(
EC.element_to_be_clickable((By.CSS_SELECTOR, "input[type='radio'][id='input-method-cc'][value='cc']")))
element.click();

Sometime, it's a size of screen.
The screen magnification feature even with headless mode seems to resolve errors.
javascript :
driver.manage().window().maximize();
python :
driver.maximize_window()
java :
driver.manage().window().maximize();

Related

How to click on the checkbox in reference to the text using Selenium Python

I'm trying to access a checkbox which is contained within an element as shown below.
I cannot identify using xpath as the order of these elements can change during development. Id is also out of bounds because the developer has implemented a plain ascending order for id like item-0, item-1 etc, meaning, the id would change depending on the order of elements on the page. So I'd like to identify the text Flexibel and using this element tick the associated checkbox. Is there a way to do that?
The element hierarchy upon inspection is given below
<div _ngcontent-adp-c61="" class="col-xl-4 col-sm-6 py-2 ng-star-inserted" id="item-6">
<div _ngcontent-adp-c61="" class="card border shadow-none h-100 mb-2">
<input _ngcontent-adp-c61="" type="checkbox" class="form-check-input item-selector m-1 font-size-20 ng-star-inserted" style="z-index: 2;">
<!---->
<div _ngcontent-adp-c61="" class="card-body d-flex flex-column parent list-group-item-action pb-0" style="cursor: pointer;">
<div _ngcontent-adp-c61="" class="d-flex align-items-start position-relative">
<div _ngcontent-adp-c61="" class="flex-shrink-0 avatar rounded-circle me-3 ng-star-inserted"><img _ngcontent-adp-c61="" alt="" class="img-fluid border border-primary border-2 rounded-3" style="padding: 1px;" src="assets/ces/time-model/TimeModelType-TimeInterval.svg">
<div _ngcontent-adp-c61="" class="d-flex justify-content-center">
<!---->
</div>
</div>
<!---->
<div _ngcontent-adp-c61="" class="flex-grow-1 overflow-hidden">
<div _ngcontent-adp-c61="" class="d-flex gap-2"><h5 _ngcontent-adp-c61="" class="font-size-15 mb-0 text-truncate"><span _ngcontent-adp-c61="" class="text-dark">Flexibel</span></h5><!---->
</div>
<p _ngcontent-adp-c61="" class="text-muted text-wrap mb-0 ng-star-inserted">allowed working hours for PQS team members</p>
<!---->
</div>
</div>
<div _ngcontent-adp-c61="" class="d-flex h-100 visible-parent-hover ng-star-inserted"><div _ngcontent-adp-c61="" class="btn flex-grow-1 align-self-end"><i _ngcontent-adp-c61="" class="uil-pen ng-star-inserted"></i><!----> Bearbeiten </div></div>
<!---->
</div>
<!---->
</div>
</div>
Thanks!
The desired element is a Angular element, so to click on the checkbox element with respect to the text Flexibel you need to induce WebDriverWait for the element_to_be_clickable() and you can use the following locator strategy:
Using XPATH and ancestor:
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[#class='text-dark' and text()='Flexibel']//ancestor::div[contains(#class, 'card border shadow-none')]//input"))).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

Python - How to change the input field value using Selenium for

I am trying to change the input field value in a form input using Selenium and Python, but unable to do so.
See time picker
I want to be able to perform .sendKeys() for each one (Hour, Minutes, Seconds, AM/PM). My code is the following:
end_time_input = driver.find_element_by_xpath('/html/body/div[4]/div[4]/div[2]/form/ol/li[2]/div/div/div[2]/div[2]/input')
end_mins_input = driver.find_element_by_css_selector('#ldb\:filter\:list\:1 > div > div > div.mins > div.mi_tx > input')
end_seconds_input = driver.find_element_by_xpath('//*[#id="ldb:filter:list:1"]/div/div/div[4]/div[2]/input')
end_meridian_input = driver.find_element_by_xpath('/html/body/div[4]/div[4]/div[2]/form/ol/li[2]/div/div/div[5]/div[2]/input')
time_input.send_keys("10")
end_mins_input.send_keys("30")
end_seconds_input.send_keys("30")
end_meridian_input.send_keys("AM")
However, this is not working.
I also tried changing the value from the main input --> input id="ldb:filter:list:1:timeInput"
> <div class="time_pick" style="display: inline-block;width: 140px">
<input id="ldb:filter:list:1:timeInput" class="axw-wdb-time ldb-input" name="ldb:filter:list:1:timeInput"
value="5:24:25 PM" placeholder="12:00:00 AM" aria-label="Time input End DateTime" data-timepicki-tim="10"
data-timepicki-mini="24" data-timepicki-sec="25" data-timepicki-meri="PM" style="opacity: 1;">
<div class="timepicker_wrap " style="display: none; top: 20px; left: 0px;"><div class="arrow_top">
</div>
<div class="time" id="time_column"><div class="prev action-next">
</div>
<div class="ti_tx"><input type="text" class="timepicki-input">
</div>
<div class="next action-prev">
</div>
</div>
<div class="mins">
<div class="prev action-next">
</div>
<div class="mi_tx">
<input type="text" class="timepicki-input">
</div>
<div class="next action-prev">
</div>
</div><div class="seconds">
<div class="prev action-next">
</div>
<div class="sec_tx">
<input type="text" class="timepicki-input">
</div>
<div class="next action-prev">
</div>
</div>
<div class="meridian" id="meridian_column">
<div class="prev action-next">
</div>
<div class="mer_tx">
<input type="text" class="timepicki-input" readonly="">
</div>
<div class="next action-prev">
</div>
</div>
</div>
</div>
Is this indeed a webased application? or application based?
With web based, does the element expose another dropdown or typeahead container with different xpath?
If application, elements should be made discoverable in code...

Cannot locate and click an element using Selenium and Python

I really tried almost everything that comes on my mind to click on buttons No
Bellow is an entire HTML code of it
<div class="row nest">
<div class="condition-row clearfix" id="condition_row_1">
<div class="field small-12 medium-6 columns">
<label>
Does this item still have the retail tags attached? <span>*</span>
</label>
<div class="btn-group elastic">
<a class="pill condition-tags btn white sml ">Yes</a><a class="pill condition-tags btn white sml ">No</a>
</div>
<p class="error clearfix" id="condition-tags_error" style="display: none;">Please select an answer</p>
<input class="required" type="hidden" id="property[condition-tags]" name="property[condition-tags]" value="">
</div>
<div class="field small-12 medium-6 empty columns"></div>
</div>
<div class="condition-row clearfix" id="condition_row_2">
<div class="field small-12 medium-6 columns">
<label>
Does this item have any signs of wear? <span>*</span>
</label>
<div class="btn-group elastic">
<a class="pill condition-wear btn white sml ">Yes</a><a class="pill condition-wear btn white sml ">No</a>
</div>
<p class="error clearfix" id="condition-wear_error" style="display: none;">Please select an answer</p>
<input class="required" type="hidden" id="property[condition-wear]" name="property[condition-wear]" value="">
</div>
<div class="field small-12 medium-6 empty columns"></div>
</div>
<div class="condition-row clearfix" id="condition_row_3">
<div class="clearfix"></div>
<div class="field small-12 columns" id="condition-custom-outer" style="display: none;">
<hr class="hr-line">
<label>Tag any signs of wear.</label>
<div class="btn-group elastic">
<a class="pill condition-list btn white sml ">Scuffs or scratches</a><a class="pill condition-list btn white sml ">Damaged or missing stones</a><a class="pill condition-list btn white sml ">Tarnishing</a> <a class="condition-add-custom btn white sml" id="condition-add-custom" href="javascript:void(0);">
<span class="icon-plus-solid"></span>Add your own
</a>
</div>
<div class="clearfix"></div>
<hr class="hr-line">
<label>Note</label>
<textarea class="condition-notes" placeholder="Please describe wear or damage in detail." id="property[condition-note]" name="property[condition-note]"></textarea>
<input class="customConditions" type="hidden" id="property[condition-list]" name="property[condition-list]" value="">
</div>
<div class="field small-12 medium-6 empty columns"></div>
</div>
</div>
Tried with XPATH,CSS_SELECTOR, LINK_TEXT
All available methods
Seems none of them working.
try:
WebDriverWait(driver, 10).until(
EC.element_to_be_clickable((By.XPATH,'/html/body/div[3]/div/div/div[2]/form/div[3]/div[2]/div[1]/div/div[2]/div[1]/div[2]/div/div[1]/div[1]/div/a[2]'))).click()
except:
errorDuringFill = True
Using FIREFOX
Live purpose available on : https://www.tradesy.com/sell/
Category : Shoes ... & Accessories & Jewelry & Bracelets
This answer taken from: Can not click on a Element: ElementClickInterceptedException in Splinter / Selenium
You can try the below 2 methods to click on element.
element = driver.find_element_by_css('div[class*="loadingWhiteBox"]')
driver.execute_script("arguments[0].click();", element)
element = driver.find_element_by_css('div[class*="loadingWhiteBox"]')
webdriver.ActionChains(driver).move_to_element(element ).click(element ).perform()
hope this will work.
Try changing the xpath to:
"//div[contains(#class,'condition-row')]//a[contains(.,'No')]"
You should really take some time and read on locators, instead of copying the full path from the inspector - it will make your job easier, and your day happier.
I'd try to link to the condition-row class above, just to exclude similar components of that page. And then we can use the class of a and text()
Try this:
driver.implicitly_wait(4)
e = driver.find_element_by_xpath("//div[contains(#class,'condition-row')]//a[contains(#class,'condition-tags') and text()='No']")
e.click()

Navigation bar doesn't collapse on click with selenium webdriver

I'm new to selenium. In a website When I click on the navigation menu from the browser it opens up. But I couldn't open it with selenium webdriver.
Here is the source HTML Sample:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse np" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-1">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="icon-filter"></span>
Quick Filters
</a>
<ul class="dropdown-menu">
<li class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<label class="nmt">
Category
</label>
<input type="hidden" id="hidJobCategory" value="-1" />
<div class="row">
<div class="col-md-12">
<div class="radio">
<label for="CategoryType1">
<input type="radio" checked name="CategoryType" id="CategoryType1" value="F" onclick="loadCatgory(this.value)"><!--loadCatgory(this.value)-->
Functional Category
</label>
<label for="CategoryType2">
<input type="radio" name="CategoryType" id="CategoryType2" value="B" onclick="loadCatgory(this.value)" ><!--loadCatgory(this.value)-->
Special Skilled Category
</label>
</div>
</div>
</div>
I tried this:
foo = driver.find_element_by_xpath('//*[#id="bs-example-navbar-collapse-1"]/ul/li[1]/a')
foo.click()
It didn't work. It redirects to another page.
Since it is a hyperlink you can also try:
driver. find_element_by_link_text('Quick Filters').click();
Not sure if you need to hover over the hyperlink before you click on it. If yes, then probably you will have to hover over it before clicking using the WebDriver Actions class.

Python 3 and Selenium, submit button not clickable

I know that there are similar questions asked about element not clickable issue but for me didn't worked any proposed solution. Mainly I am using Chromedriver and sometimes Geckodriver, this appear on both.
Still getting, Message: unknown error: Element is not clickable at point (470, 1499)
even as you can see I tried with find_element.click() and also with action chains.
More confusing in my case is that part with ("M_1_anchor") pass and part with ("submit") fail, not clickable. Just to add another confusion, same function worked fine till middle of August 2017.
My function is:
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
def select_and_click_edit_contact_details(self):
wait = WebDriverWait(self.driver, 10)
action = ActionChains(self.driver)
wait.until(expected_conditions.element_to_be_clickable((By.ID, "M_1_anchor")))
self.driver.find_element_by_id("M_1_anchor").click()
action.move_to_element(self.driver.find_element_by_id("submit")).perform()
action.click(self.driver.find_element_by_id("submit")).perform()
#self.driver.find_element_by_id("submit").click()
I admit that submit button is not optically visible on page and user need to scroll down but that shouldn't be reason for failing.
</select></div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#report">
Report
</a>
</h4>
</div>
<div id="report" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<label class="col-xs-2 col-md-3 control-label">
Image file of your logo
</label>
<div class="col-xs-10 col-md-9">
<img class="img img-responsive" src="data:image/jpg;base64,/9k=" width="100"> </div>
</div>
<div class="row" style="margin-top: 20px;">
<label class="col-xs-2 col-md-3 control-label">
Footer text on driver accounting
</label>
<div class="col-xs-10 col-md-9">
<p class="form-control-static">
20
</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-
toggle="collapse" data-parent="#accordion" href="#cashbox">
Cashbox
</a>
</h4>
</div>
<div id="cashbox" class="panel-collapse collapse">
<div class="panel-body">
<p>Currently there are no cashboxes defined!</p>
</div>
</div>
</div>
<div class="form-group"></div>
<div class="form-group">
<label class="control-label col-md-3">
<input type="submit" id="submit" value="Edit" class="btn btn-primary">
</label>
</div>
</form></div>
<script type="text/javascript">
$(function () {
$("#list option").attr('disabled', true);
$('.selectpicker').selectpicker(
{
showContent: false
});
});
</script>
</div>
</div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<script src="/HaleWebApplication/bundles/DatatablesNewJs?
v=83AITBTc8vgdDH09rqjGm5-sSopLGkHfDID5YpRCCVs1"></script>
<script src="/HaleWebApplication/bundles/TreeviewJs?
v=p6JgEssUYL1w3zZdiBDt4Ul_VWhmdclj9e1PSoZpKWI1"></script>
So at the end solution was to downgrade Chrome version from 61 to 60 and upgrade ChromeDriver from 2.31 to 2.33. it is important to synchronize browser and webdriver versions. Thank all for answers.
When I put "expected_conditions.element_to_be_clickable" instead of "actionChains_move_to_element" and run it under FF Geckodriver it worked fine. So it is Chromedriver problem or Chrome problem, but I don't know exact where or what is causing that. If someone could help me to identify it and open a bug to Chromedriver, would be much thankful.

Categories

Resources