Hi I'm trying to click on this button that stays disabled until you fill in other fields. I am working with firefox. My script fills out those fields and the button is now clickable with my mouse. But when I try to click that element through selenium I get an error
WebDriverException: Message: Element is not clickable at point (281.8333282470703, 14.149993896484375). Other element would receive the click: <li ng-class="{active: $state.includes('urlAdm')}" id="adm-menu"></li>
Here is the html for the button.
<div class="col-xs-offset-2 col-xs-5">
<button type="submit" class="btn btn-primary ng-binding" ng-disabled="!userForm.$valid || user.deleted_at" disabled="disabled">
<i class="fa fa-check-square-o fa-fw"></i>
Create
</button>
<!-- ngIf: isAddUser() --><button ng-if="isAddUser()" type="button" class="btn btn-default ng-scope" ng-click="resetForm()">
<i class="fa fa-eraser fa-fw"></i>
Clear
</button><!-- end ngIf: isAddUser() -->
<!-- ngIf: !user.deleted_at && user.id !== currentUser.id && user.id -->
<!-- ngIf: user.deleted_at -->
</div>
I've tried regularly clicking on the button and doing it through actions but neither work.
Here is the code
element = driver.find_element_by_xpath("//*[#id='user-editor-1']/form/div[5]/div/button[1]")
ActionChains(driver).move_to_element(element).click().perform()
Any help would be greatly appreciated. Thanks!
You should try to click using execute_script() as below :-
element = driver.find_element_by_xpath("//button[contains(.,'Create')]")
driver.execute_script("arguments[0].click();",element)
Hope it helps....:)
Related
first time poster! I'm still fairly new to coding and Django...
I'm looking to create a django if statement to see if a certain button is pressed. I have a toast set up to show an error warning if a search returns no results, but it also pops up if the user clears the search.
Here's the button(s)
<div class="input-group-append">
<button class="form-control rounded-circle btn form-button ml-2" type="submit">
<span>
<i class="fas fa-search"></i>
</span>
</button>
<button class="form-control rounded-circle btn form-button ml-2 closebutton" type="clear" name="clear">
<span>
<i class="fas fa-times"></i>
</span>
</button>
</div>
I'd like it to spot if the button with the name/type "clear" is clicked, then it won't run the toast. Toast is below:
{% if button == 'clear' %}
<div class="toast custom-toast rounded-0 border-top-0" data-autohide="false">
<div class="arrow-up arrow-danger"></div>
<div class="w-100 toast-capper bg-danger"></div>
<div class="toast-header bg-white text-dark">
<strong class="mr-auto">Error!</strong>
<button type="button" class="ml-2 mb-1 close text-dark" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body bg-white">
{{ message }}
</div>
</div>
{% endif %}
I'd like it to spot if the button with the name/type "clear" is clicked, then it won't run the toast.
This if statement is only run on the server when it renders the HTML for the web page. It is checking if a variable named button has the string value "clear". This has nothing to do with any HTML elements in the page, let alone the name of a particular <button>. Instead, the value of the variable button comes from the "context" when your Python calls one of the render functions.
I'm looking to create a django if statement to see if a certain button is pressed.
There are two different ways to handle button clicks:
Submit a form to the server which then returns a response with a new page. This can be the same Django template rendered with different values in the context in order to get the behavior that you want.
Add an onclick handler to the button. This should be a JavaScript function that peforms the action you want. It can manipulate the elements in the page to add a toast or anything else.
The first option is very slow because it will require a new network request. The second option is probably preferred here since it will be very responsive to the user's actions.
I'm using Foundation 6 with Angular2, and I have a couple of Reveal modals, that needs to open in a sequence. I've copied the example from Zurb directly, but when I click the button in the first modal, the new modal opens and the first doesn't close.
The default value for multipleOpened should be false, but they just open on top of each other.
Screenshot
I've tried setting data-multiple-opened="false" and also data-options="multipleOpened:false;", but they still open on top of each other.
Here is my code:
<p><a data-open="exampleModal2">Click me for a modal</a></p>
<!-- This is the first modal -->
<div class="reveal" id="exampleModal2" data-reveal data-options="multipleOpened:false;">
<h1>Awesome!</h1>
<p class="lead">I have another modal inside of me!</p>
<a class="button" data-open="exampleModal3">Click me for another modal!</a>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- This is the nested modal -->
<div class="reveal" id="exampleModal3" data-reveal data-options="multipleOpened:false;">
<h2>ANOTHER MODAL!!!</h2>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
Can anyone point me in the right direction?
I'm not sure if this is the effect you're after, but you can force the closing of the first modal by adding data-close to the button that launches the second one:
<a class="button" data-close data-open="exampleModal3">Click me for another modal!</a>
JSFiddle example
I'm trying to click on a link in navbar to trigger modal for third party authentication, which I need to test. I have some help before about how to fetch and click with selenium, and everything was good until this.
This is the link I'm trying to click
<li class="pull-right hidden-xs hidden-sm" id="showlogin"><button type="button" class="btn btn-sm btn-info round">GET STARTED</button></li>
my test structure is:
def test_live_societe_login_using_third_party_modal(self):
"""TODO: Docstring for test_live_societe_login_third_party_modal.
:returns: return modal for third party authentication
"""
WebDriverWait(self.browser, 10).until(lambda browser:
self.browser.find_element_by_id
('showlogin')).click()
self.assertIn('http://societe.herokuapp.com/contact', self.browser.current_url)
I was able to test all application pages, but hitting this one I got selenium.common.exceptions.ElementNotVisibleException: Message: Element is not currently visible and so may not be interacted with exception. I'm a little confused about it, can someone help me over come this, thanks.
Ok, I was locking at this the wrong way, in my navbar I have constructed GET STARTED button like this:
<li class="pull-right hidden-xs hidden-sm" id="showlogin"><button type="button" class="btn btn-sm btn-info round">GET STARTED</button></li>
<li class="dropdown hidden-md hidden-lg" id="showlogin">
<button type="button" class="btn btn-sm btn-info round">GET STARTED</button>
<ul class="dropdown-menu">
<li class="btn-group-vertical"><a id="facebook_login" href="/accounts/facebook/login" method="js-sdk" class="btn btn-default navbar-btn"><i class="fa fa-facebook"></i> Sign in with Facebook</a>
<a id="linkedin_login" href="/accounts/linkedin/login" class="btn btn-default navbar-btn"><i class="fa fa-linkedin"></i> Sign in with LinkedIn</a>
<a id="twitter_login" href="/accounts/twitter/login" class="btn btn-default navbar-btn"><i class="fa fa-twitter"></i> Sign in with Twitter</a></li>
</ul>
</li>
You can see that I have two <li></li> tags, one is a button for larger viewport and the other tag have dropdown menu for smaller viewport. In the first place I was not selecting the right <li></li> tag. When selenium start testing he opened a tablet view browser (≥768px) and that changed the situation in the sense of I needed to select dropdown and then find a button to click and trigger third party authentication.
I can select dropdown with Css selector, so I just find_element_by_css_selector('div#navbar ul li.dropdown'), after this I selected right social button. All I need to do now is handle social authentication.
This is the code for selecting dropdown and social button for third party authentication:
def test_live_societe_login_using_third_party_modal(self):
"""TODO: Docstring for test_live_societe_login_third_party_modal.
:returns: return modal for third party authentication
"""
dropSelect = WebDriverWait(self.browser, 20).until(
lambda browser: (self.browser.find_element_by_css_selector('div#navbar ul li.dropdown')))
dropSelect.click()
twitter_choice = dropSelect.find_element_by_id('twitter_login')
twitter_choice.click()
I have a requirement to open a confirmation box on click on select2 dropdown and when popup gets open, background page should be disable. I have done below coding but when I click on dropdown it open the popup but at the same time it also open own dropdown.please see the screen shot for visual effect
Below code written in HTML for select2 dropdown.
<ui-select ng-model="selectedSectorModel.Selected" ng-click="ShowConfirm();" on-select="selectSectorEvents();" theme="select2">
<ui-select-match>
<span ng-bind="$select.selected.Text"></span>
</ui-select-match>
<ui-select-choices repeat="item in (industrySectorObject | filter: $select.search) track by item.Value">
<span ng-bind="item.Text"></span>
</ui-select-choices>
</ui-select>
Below code written to open popup in controller.In controller i have written code for ShowConfirm();
$scope.ShowConfirm = function() {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'scripts/app/popup/myModalpopup.html',
controller: 'MyCtrl',
backdrop: 'static',
keyboard: false,
resolve: {
items: function() {
return valueitem;
}
}
});
}
below code is for popup HTML myModalpopup.html.
<div class="container" style="overflow: hidden;">
<div class="row">
<div class="col-lg-12">
<div class="modal-header">
<h3 class="modal-title">Please Confirm</h3>
</div>
<div class="modal-body">
Some Text Here
</div>
<div class="modal-footer">
<button class="btn btn-warning css3linear" type="button" ng-click="ok()" autofocus>OK</button>
<button class="btn btn-warning css3linear" type="button" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
Below is Screenshot for the issue.
background is disabled but not dropdown and also dropdown open on the top of popup
I am creating an app in django and I have the next problem: I want to add a glyphicon into the next button:
<input class="btn btn-primary" type=button name="name" onClick="location.href='/location/'" value='I am a button'>
Concretely, I want the glyphicon to be with the text 'I am a button'. How can I do it?
Thank you!!!
instead of using input type button, you should try using button element
so something like this
<button type="button" class="btn btn-primary" onClick="location.href='/location/'">
<span class="glyphicon glyphicon-music"></span> I am a button
</button>
add the class as the icon class. For example class="glyphicon glyphicon-off for power button. Moreover remove the value of the button.