Can not click elements in javascript modal using Selenium WebDriver - javascript

I am trying to use Selenium WebDriver to click the 'OK' button in a modal that appears after submitting a form on a page.
Driver.SwitchTo().Alert() fails, and so does switching the window handle. I have also tried Driver.SwitchTo().ActiveElement() but that also fails. The driver is still recognising elements on the page before the button that opens the modal was clicked, so I know it is definitely not switching over, which makes Xpath and CssSelector useless for the meantime.
I have tried switching browsers but that doesn't have an effect.
<div id="confirmModal" class="modal fade">
<div class="modal header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Confirmation</h3>
</div>
<div class="modal-body">
<p>Confirm?</p>
<div class="alert alert-block">
<p> Are you sure? You can not undo this </p>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btw" data-dismiss="modal" value="Cancel" aria-hidden="true">
<input type="button" value="OK" id="confirmation-submit" class="btn btw-primary">
</div>
</div>
Any suggestions would be helpful - thank you!

I have solved a very similar problem to yours with the following code:
new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementIsVisible(okButton_id));
IWebElement okButton = driver.FindElement(By.Id(okButton_id));
okButton.Click();

Clement's answer solved this for me. Except, I was using python, so what you need to do is invoke:
driver.implicitly_wait(1)
Or for more seconds if this doesn't work.

Related

My bootstrap modal is working when i run it locally, but it won't open when i run it through git-hub?

I can run my code just fine locally. Everything seems to be perfect. But as soon as I upload my repository to Git-Hub and try to run it with Git-hub pages, part of the website breaks? Specifically, the only issue is the Modal that's supposed to run when I click 'add to library' on the nav bar.
I tried deleting it off Git-Hub and reuploading it. I've tried moving the files around but nothing seems to work. I'm really not sure what the root of the issue is (?)
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-secondary"
data-toggle="modal"
data-target="#libraryModal"
>
Add to Library
</button>
<!-- Modal -->
<div
class="modal"
id="libraryModal"
tabindex="-1"
role="dialog"
aria-labelledby="libraryModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-primary" id="libraryModalLabel">
Add to Library
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input
type="text"
class="form-control mb-2"
id="englishField"
placeholder="English"
/>
<input
type="text"
class="form-control"
id="spanishField"
placeholder="Spanish"
/>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="addWord">
Add Word
</button>
<button type="button" class="btn btn-primary" id="addPhrase">
Add Phrase
</button>
</div>
</div>
</div>
</div>
Expected: It would open up a modal with two text boxes and two buttons.
Actual: https://at-lowdesu.github.io/EstudiarEspanol/#study-inner (It doesn't open.)
Git-Hub Link: https://github.com/At-LowDeSu/EstudiarEspanol
You have a mixed content error. All src should link to https://.. but you have one with http://
<script
src="http://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
Replace http://code.jquery.com/jquery-3.4.1.min.js with https://code.jquery.com/jquery-3.4.1.min.js
I was able to fix it by changing the jQuery script call.
<script
src="//code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
The jQuery is not loaded or blocked in your page. The console said Blocked loading mixed active content “http://code.jquery.com/jquery-3.4.1.min.js”
You should fix this first, since bootstrap uses jQuery for its to run.
I've tried to inject the jQuery manually to the page and it works just fine.
Bootstrap Modal :
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
you can refer more examples of the modal.

open alert window once modal submit button clicked

<div class="modal" id="myInquiry" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 id="myModalLabel">Thank you for your feedback:</h4>
</div>
<div class="modal-body">
<label for="inquiry">Feedback:</label>
<textarea class="form-control" rows="5" id="inquiry"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal" id="send">Send</button>
</div>
</div>
</div>
</div>
This is the code I have for my modal footer. I am wanting to click the send button and close the modal. Once it has been closed I want to have an alert window or modal pop up and thank the user for giving their feedback. I am new to web development and am getting stuck on this issue after numerous attempts (after finding different solutions on other questions) but nothing is working.
The modal's div id is 'myInquiry' if that helps.
Thank you!
You need to add an action to your modal Close button, worst way would be like:
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="alert('thank you');">Close</button>
you can add the ID to the button and then use jQuery to handle the action, and show something better than this.
You can add jQuery code like this.
$('button#send').click(function() {
alert('Alert Content');
}
Then you can see the alert "Alert Content" when you click the Send Submit button.
Bootstrap modal has a hide.bs.modal event, you can listen to that event and then, when the modal is closed (hidden from user) you can show the thank modal. Here is an example on jsfiddle. Cheers, sigfried.
Maybe you can try adding an
onclick="window.alert('<Your text here>')"
attribute to the button.

Understanding how data-dismiss attribute works in Bootstrap

I'm new to Bootstrap and i'm facing problem with this example:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As per my understanding data-dismiss="modal" attribute should close the modal if you click on it, but i don't understand how it works behind the scene. I checked the official documentation at: http://getbootstrap.com/javascript/#modals-examples but there's no explaination.
The hiding functionality is implemented in the modal.js in this way.
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
Basically it's just finding the elements that have the attribute of data-dismiss and the value of modal. Upon click it will hide these elements.
replace data-dismiss="modal" by: onclick="$('#modal_id').modal('hide');"
You should have something like this:
<button type="button" class="close" onclick="$('#modal_id').modal('hide');" aria-label="Close">
onclick="$('#modal_id').modal('hide');" will close only the particular modal in which it is placed.
please note if it is this answer is useful.
If u use multiple modals on one page open at the same time on top of each other dismissing the topmost with data-dismiss="modal" will hide all active modals.
exactly in bootstrap.js find the element with attribute data-dismiss="modal" and trigger this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) behind. i.e. it hides the element but in more complex way.
It is roughly equivalent to onclick="$(this).closest('.modal').modal('hide')", i.e. it is searching the DOM upward for .modal (means, the definition of dialog itself) and hides it. The dialog's DOM is not removed.
I triggered the data dismiss with JQuery like so
$('.close').click();
This triggered like if user would of clicked the close button on modal, making data-dismiss hit. You might run in to some issues if there is layers of modals at one, hence will close all.
reference to where I found my solution here

Button for modal does nothing when clicked

I created a button that references a modal but it doesn't open the modal at all. This area of code isn't my realm, SQL is. This code actually lives in an SQL procedure that is called when interacting with a website.
Thoughts?
--Remove package item, Modal Popup
<div id="delete_btn_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class=modal-body>
<h3><font color="red" align="center">Are you sure?</h3></font></br>
<p>Deleting a package item will remove the entire package</br></br>
<button type="button" class="btnStyle" data-dismiss="modal">Close</button>
<button type="button" class="btnStyle" onclick=location.href="http://wowfestival.lajollaplayhouse.org/cart/precart.aspx?p=499">Delete Package</button>
</p>
</div>
</div>
</div>
--button
<button type="button" class="btnStyle" data-toggle="modal" data-target="#delete_btn_modal">Delete</button>
Seems you have not added bootstrap javascript
Your code is perfect and fine
Check the bootply for your code. : http://www.bootply.com/zOa8UJ4Vfb
Also check you you have jQuery included as well .
If not use below cdn for quick test.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Twitter Bootstrap Dialog shows "2 times"

I am building my website using Twitter Bootstrap. I found that my dialog shows "2 times". Here is a video for you if you don't know what am I talking about(expire in 7 days).
Watch this video
Note: I only clicked the Close button one time. You can see there is a dialog appeared about I clicked Close and it disappeared in less than 1 second.
Here is my code.
<div class="modal fade" id="contactModel" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Contact</h4>
</div>
<div class="modal-body">
<p id="modelText">Thank you! Your submission has been received!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My button calls JavaScript.
<button onclick="submitForm()" type="button" id="submit" class="btn btn-primary">Send</button>
My JavaScript
$('#contactModel').modal('show');
Can anyone help me to solve this? Thanks in advanced.
I don't see your button's code, but I guess you've been using the bootstrap modal in both ways : via data attributes and via js.
Choose one. Look here http://getbootstrap.com/javascript/#modals in "Usage".
Anyway, if it's not the button, then your code works well. here is a proof: http://www.bootply.com/eYXtmm6Yrr.

Categories

Resources