I have this web code:
<a id="btn">Click</a>
<script>
$('document').ready(function() {
$('#btn').click(function() {
...
location.search = $.params({click: '1'});
});
});
</script>
This code work perfectly in Chrome.
But I want to test it with HtmlUnit. I wrote:
page= (HtmlPage) ((HtmlAnchor) page.getDocumentElement().querySelector("#btn")).click();
assertThat(page.getUrl().getQuery(), containsString("click=1"));
This code works randomly. Sometime the test passed and sometimes failed.
I think it is due because of the asynchronous call to JS, but I couldn't solve it.
So how can I test it?
Besides, there is better solution to test web site insted HtmlUnit? HtmlUnit disappointed...
The fact that your code works randomly might mean that there is a timing issue in the asynchronous JS call. I have explained the best alternative to come around these kind of issues in this other question: Get the changed HTML content after it's updated by Javascript? (htmlunit)
Answering your second question, HtmlUnit is a pain in the neck when it comes to JS. Maybe Selenium with the native browser (eg: IE) drivers are a better alternative. Plan C would be PhantomJS but it is not a Java library.
I fell also in similar issue. My html link is triggering javascript using events.
My not working test code was:
HtmlAnchor anchor = element.getFirstByXPath("//a[#id='...']");
anchor.click(); // This is not firing events on js side!!!!
How it works:
HtmlAnchor anchor = element.getFirstByXPath("//a[#id='...']");
anchor.fireEvent("click"); // JS running which listening on click events!
Related
Working on an asp.net website. All the controls are in an UpdatePanel.
I have some js code on my page. For some reason after docment.ready is called add_endRequest is being called (repeatedly). I've been trying to troubleshoot why this is being called, but I can't figure it out. What is the best way to tell what triggered endRequest? Any suggestions as to troubleshooting? Here's some of the code...
<script type="text/javascript">
$(document).ready(function () {
// code....
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
alert('add_endRequest')
// code
alert('add_endRequest done');
});
An easy way (since its just the javascript side) is to use the Sources panel.
Ive used this on Chrome mostly, but I know comparable exists in other major browsers too.
https://developer.chrome.com/devtools/docs/javascript-debugging
The Sources panel lets you debug your JavaScript code. It provides a graphical interface to the V8 debugger.
Find the line you want to put a breakpoint on, click the line number then see the stacktrace and other info in the right.
You can use that to start looking at what is triggering and place other breakpoints if required to see the local variables that helped cause this.
You can also use this to make local changes to a file, though ofcourse when you refresh these are lost, but it can be useful for quick debuging too.
As a sidenote, if you are wanting broad advice like this probably best you take a look at https://softwareengineering.stackexchange.com/, some awesome resources there too.
I am using the animate.css animations found here. And I am trying to use the window.onbeforeunload functionality in JavaScript. It works on Firefox, but I can't get it to work with chrome. Is there a more compatible way to do this. My code so far is imbedded in the html file just so I can figure this out, but the accomplishments id is for an aside and the class "animated fadeOutLeft" is used to call the animation, which works. I just want it to wait until the page is going to another internal link before it does that.
MY CODE
<script>
window.onbeforeunload = loadOut;
function loadOut () {
document.getElementById('accomplishments').className
document.getElementById('accomplishments').className + 'animated fadeOutLeft';
}
</script>
Now I am open to using JavaScript, JQuery, SASS, LESS, CSS, and/or any other method. The desired outcome is to get the animation to occur when a person clicks a site internal link. The goal is to make this look more like a app than a webpage.
I had some problems with chrome page transition too, and decided to use the plugin smoothState.js . Maybe this could help. An example here.
I'm am doing a JS location.replace in Opera. There is a known bug that the location does not get replaced but updated when only the location.hash changes (see http://my.opera.com/community/forums/topic.dml?id=568931).
I was trying to do the following workaround:
var url = location.href.split("#")[0];
if (window.opera) {
window.history.back();
}
location.replace(url + '#' + newhash);
Unfortunately that does not seem work. Before I start experimenting with setTimeout, I wanted to check if maybe someone has a better idea.
I think the best workaround for this is to not work around it at all.
Reasoning: firstly, the script running in this page should be terminated if I use the back button, or history.back() is called. Hence, in your workaround above the script will (or should) actually stop running before the location.replace() call. We can not remember that you wanted to call location.replace() and do it on the page you've gone back to, because that would be a script injection security issue.
Secondly, even if this workaround worked I would very much recommend not using it. The reason is that Opera will eventually fix its bug. If an end user used a fixed Opera version and a page running your script, each click on one of your links would remove one entry from that user's browsing history..
For a proper solution, you could investigate history.replaceState() - a new method specified in HTML5: http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#dom-history-replacestate
Can you clarify a bit? I took the example from the forum link you posted and uploaded it here: http://people.opera.com/miket/tmp/replace.html. In Opera 11.61/Mac, it appears to work as expected.
Are you seeing something different? Can you explain your problem in more detail?
I am having an issue where all link button controls on my page do not work once we deploy our website to our production server. Here are a few details:
We have 3 environments upon which we develop: Our local Machine, which uses local IIS7 to run for development; test environment which is an actual webserver behind our firewall(IIS6); Production which is our live webserver(IIS6). The website works fine on local machines and test server but once we click a link button on production server it hangs.
The problem does not exist in Chrome, or FireFox it only exists in IE9. It does not exist when you put IE9 in compatibility mode.
If I use the IE9 Developer tool bar and watch the scripts, as soon as you click one of the link buttons the console shows this error:
SCRIPT28: Out of stack space
, line 340 character 9
I am using quite a bit of JQuery and am wondering if this is causing an issue: However, I see no javascript errors.
Any thoughts?
Thanks for any suggestions.
As people said in comments: it means that infinite recursion takes place. Whether it is simple recursion or some devious path across code like a serpent biting its tail - unknown, it seems IE gives out no stacktrace, or does?
I've reproduced this issue when I'm doing the following code:
HTML
<span class="search-icon"><input title="search" type="submit" value=""></span>
JS
(function($) {
$('.search-icon').on('click', function(e) {
// The click event will call $('.search-icon').on('click', function(e) { .. } for every time
// which make an infinte loop in click event as long as there are no stop condition added here.
$(this).find('input').click();
});
})(jQuery);
I've solve this problem by changing my JS code to be:
(function($) {
$('.search-icon').on('click', function(e) {
$(this).closest('form').submit();
});
})(jQuery);
I hope this answer will be helpfull for you.
Can you post the code / a link to the code, or close this issue?
Common problems: you might have a closure problem in the html, thus different browsers interpret the html hierarchy differently, or you might be looping through a for(x in y) where x contains a backreference to y.
Check out the msdn page for info on this error. In my case, the error was caused by:
Your code triggered an event cascade.
An event cascade is caused by triggering an event that calls an event procedure that's already on the stack. ...
Basically, I was trying to trigger a click event (using jQuery) on a file upload control using the control's click event. Seems like it would cause infinite recursion. Perhaps you may be having a similar problems with your buttons.
I'm trying to debug some JavaScript, I want to find out what code gets executed when I hover over a certain div element (I've got no idea which bit of code, because there's no direct 'onmouseover' - I think there's a jQuery selector in place somewhere?).
Usually I'd use the "Break All" / "Break On Next" facility provided by Developer Tools / Firebug, but my problem is that other code (tickers, mouse movement listeners etc.) immediately gets caught instead.
What I'd like to do is tell the debugger to ignore certain JavaScript files or individual lines, so that it won't stop on code I'm not interested in or have ruled out. Is there any way to achieve that in IE (spit, spit!) - or could you suggest a better approach?
In FireFox this feature is called "Black boxing" and will be available with FireFox 25. It let's do exactly what you where looking for.
This feature was also introduced to Chrome (v30+) although it's tougher to find/configure. It's called "skip through sources with particular names" and Collin Miller did an excellent job in describing how to configure it.
Normally I'm for putting answers and howtos here instead of links but it would just end in me copying Collin's post.
Looks like you're looking for Visual Event.
You might want to take a look at Paul Irish's Re-Introduction to the Chrome Developer Tools, in particular the Timeline section (starts around 15 minutes into the video.)
You can start recording all javascript events - function executions (with source lines etc) and debug based on what events fired. There are other really handy debugging tools hiding in that google IO talk that can help you solve this problem as well.
If you're pretty sure it's a jQuery event handler you can try to poke around with the jQuery events.
This will overwrite all the click handlers (replace with the type you're interested in) and log out something before each event handler is called:
var elem = document.body; // replace with your div
// wrap all click events:
$.each($._data(elem).events.click, function(i, v) {
var h = v.handler;
v.handler = function() {
// or use 'alert' or something here if no Dev Tools
console.log('calling event: '+ i);
console.log('event handler src: '+ h.toString());
h.apply(h, arguments);
};
})
Then try calling the event type directly through jQuery to rule out that type:
$('#your_div').click()
You can use JavaScript Deobfuscator extension in Firefox: https://addons.mozilla.org/addon/javascript-deobfuscator/. It uses the same debugging API as Firebug but presents the results differently.
In the "Executed scripts" tab it will show you all code that is running. If some unrelated code is executing as well it is usually easy enough to skip. But you can also tweak the default filters to limit the amount of code being displayed.
If using are using IE 7.0 onwards, you should have developer toolbar from where you can debug. Just use breakpoint where you need, rest of the code will not stop.
Alternatavely you can define other applications like Interdev/ Visual Studio.net for debugging purpose too.