I want to click an element on the modal popup window.
This SO answer helped me a lot with finding appropriate element, but it seems like other div is chosen (and actually clicked).
Popup code is:
<div id="reports-loader" class="modal" tabindex="-1" style="">
<div class="modal-header">
<h3 class="modal-title">Super Title</h3>
</div>
<div class="modal-body">
<iframe src="//some_source" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="">
</iframe>
<div id="reports-loader-skip-intro">
Skip
Try Feature
</div>
</div>
</div>
<div id="reports-backdrop"></div>
The "reports-backdrop" div is to be the grey area covering the whole browser window, beneath the popup (the "reports-loader").
The code I am using to get the Skip link is:
popup = #browser.div(:id => 'reports-loader', :class => 'modal')
puts popup.div(:class => 'modal-body').a(:text => 'Skip').exists?
popup.div(:class => 'modal-body').a(:text => 'Skip').click
and puts returns the true.
Unfortunately, the wanted element is not clicked, but the "reports-backrop" div is used:
true # <-- the puts printout
Selenium::WebDriver::Error::UnknownError: unknown error: Element is not clickable at point (101, 115). Other element would receive the click: <div id="reports-backdrop" style="opacity: 0.7141267829936161;"></div>
(Session info: chrome=35.0.1916.153)
(Driver info: chromedriver=2.9.248315,platform=Windows NT 6.1 SP1 x86_64)
(eval):1:in `process_watir_call'
What is OK in the whole situation - it seems like the button is actually clicked, since popup disappears (with no clicking it stays on the screen). Unfortunately, due to the error a test is failed.
Does anyone have some clues...?
Related
I am in the process of testing a modal dialog using Katalon Studio, and the AUT is a web app that uses Bootstrap. I tried going to this official documentation on how to handle such elements, but that documentation was incomplete. It didn't contain instructions on how to handle my use case. I tried everything in it, and nothing worked.
Thus, even though my tests all pass (I did right up to closing the dialog by Clicking its "Ok" button), my teardown method (which logs out and closes the browser) is blocked by that annoying popup. At the end of the test, the "Ok" button was outlined a light blue, and I had to manually click it to get it to trigger.
The modal dialog's HTML code :
<div class="modal fade show" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Device Passcode</h5>
</div>
<div class="modal-body">
<p>36395732</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
A screenshot of the AUT, and the Katalon Studio screen, after that last test step:
I resolved the issue by focusing on the dialog prior to click, and then right after, focusing back on the main screen.
I have a modal window (using bootstrap), with a close button. The modal window opens and closes fine in most browsers. However, in internet explorer, there is a problem. We can open the modal window fine, and close it fine ... but if we try to open it again, it wont.
Most of the javascript functionality is in bootstrap. Below is the html for the open button [I believe data-toggle="modal" and data-target="#exampleModal" are the key to opening the window]...
Get The Demo
...and the html for the start of the modal window, with the close button [note the id="exampleModal" tells which window to open. And the data-dismiss tells to close "modal"...
<div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="padding-right: 17px; display: block;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- CLOSE BUTTON -->
<div class="row at-modal-close-box">
<a href="#" data-dismiss="modal" aria-label="Close">
<img src="https://www.amazingdg.com/_dev/temp/images/modal-close-btn.svg" alt="Close Demo Form">
</a>
</div>
...
You can view the page here:
https://www.amazingdg.com/_dev/temp/
Note: When I click the open button a second time, there is an error in IE's console ... Object.keys: argument is not an Object. Note: this error doesn't occur the first time opening the modal window. Not sure how to fix it...
---------------------------------------------------
I tried to remove the fade class ... that made the modal window show ALL of the hidden elements in the form (required fields, successfully sent message, etc.)
if ($.browser.msie) {
$("#exampleModal").removeClass("fade");
}
---------------------------------------------------
I tried to change the fade transition (not supported by IE) using an IE media query. This removed the fade, but didn't fix the issue.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */
.fade {
transition:none !important;
}
}
I had a similar issue on IE, and it was solved by doing the following:
Whenever you open the modal, using:
modal.element.modal();
Send in an empty object, like this:
modal.element.modal({});
This fixed the issue for me in IE (without the need to mess with the fade classes) and didn't change the behavior in other browsers!
Remove fade class which does not work in IE
if ($.browser.msie) {
$("#exampleModal").removeClass("fade");
}
I was facing the same issue that got a very simple fix.
You can simply toggle the modal using jQuery in the function that you call:
$("classnameORidName'").modal("show");
I have added a paragraph in the slider.
<div>
<a>
<img src="image.jpg"/>
<p>Some texts</p>
</a>
<div>
The paragraph is display on top of the image.The slider works fine after finishing loading the whole page. However, when the page is loading, I can see all of the paragraph for each slide show in the same time. I only want it shows the first slide paragraph when loading. Can anyone please help?
You can display only one slide and hide all other slides (by specifying style="display: none;") at the beginning.
<div u="slides" ...>
<div>
<a>
<img src="image.jpg"/>
<p>Some texts</p>
</a>
<div>
<div style="display: none;">
...
<div>
</div>
Or you can use jssor slider no-jquery version, it will initialize jssor slider immediately without waiting for page load.
I'm using the form navbar-search. I want to have an "advanced search" modal that opens from a link within the navbar.
If I put the modal div within my tag in the navbar, when the modal opens it is behind the darkened area that is normally outside of the modal window. Clicking anywhere closes the modal and the darkened mask.
I can fix this by moving the modal div outside of the navbar (and, thus, outside of my form) but then it breaks my form functionality. The advanced search modal is supposed to function as an extension of the form field directly in the navbar but if I use two different forms to fix the modal problem, the forms don't work together any longer. Does that make sense?
If I enclose the entire nav bar plus my modal (which is outside the navbar) in a tag, it works but screws up some of the navbar formatting so I'm thinking this is not a very clean solution.
So, I either need to a way to fix the modal display issue or a way to make my form situation work properly (as in, linking two forms together without having a ton of duplicate markup for hidden fields and the like).
Thanks for any ideas!
Matt
Here is what I have now (which I've gone ahead and just adjusted css afterward to make things line up). I don't think it is semantically correct according to how bootstrap's navbar is supposed to be used, but my form is working correctly and that is a big deal to me. :)
<form>
<navbar></navbar>
<modal></modal>
</form>
I am a little unsure what you are asking, but this is a stab at what I think you are asking. The modal does not actually need to put the code for the modal in the form itself. The only thing you need in the navbar is the link and trigger activating the modal.
<form>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Advanced Search</li>
</ul>
</div>
</div>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Advanced Search</h3>
</div>
<div class="modal-body">
<p>Put your search fields here. </p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Search</button>
</div>
</div>
See working link.
http://jsbin.com/ifaqaj/1/edit
I have this type of element:
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="">
</a>
</div>
I want to be able to:
Drag the whole div, even if I click on the /anchorimage (before dragging).
Still respond normally to an anchor/image click (without a drag).
Right now, only the image is dragged when I click on it.
Here's a fiddle: http://jsfiddle.net/M5tBd/
As per the HTML5 Editor's Draft spec, Images and Anchors with a href element are both elements that are, by default draggable. Your anchor is probably capturing the dragstart event, preventing the div from ever getting it. Try setting draggable="false" on your <img> and <a> elements.
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank" draggable="false">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="" draggable="false">
</a>
Your fiddle doesn't even work dragging the img element for me in Chrome under Ubuntu, so you may have other issues besides this.