Have a link on the page:
<a id="quote" href="quote.html" target="_blank">Quote</a>
Click it in CasperJS, but I can't capture the page in new window.
casper.start('http://domain.com');
casper.thenClick('#quote');
casper.then(function() {
this.capture('file1.png');
});
casper.run();
see also the documentation in casperjs about:
casper.waitForPopup();
casper.withPopup();
the new window(when clicking on link with target="_blank" attribute) can be considered as Popup.
document at: http://docs.casperjs.org/en/latest/modules/casper.html#waitforpopup
CasperJS doesn't work with new windows. You have to manually remove the "target=_blank" before cliking on the link :
this.evaluate(function () {
[].forEach.call(__utils__.findAll('a'), function(link) {
link.removeAttribute('target');
});
});
casper.start('http://domain.com');
casper.thenClick('#quote');
casper.waitForResource('file1.png' , function() {
this.capture('file1.png');
});
casper.run();
You should try to wait for all the resources to be loaded, then proceed with other job. This will always work.
Related
In my page automation script, when I click a label link, a new window will be opened. The url of the link is generated by a complicated javascript.
<a class="link_text" href="#" onclick="process('2c913f9e4c7314e1014c74a4a5e02573')">办理任务 </a>
after triggered the url becomes:
https://oa.phicomm.com/workflow/doJob.action?taskVo.processExecutionId=2c913f9e49d0d5280149d12fabd90dd0&taskVo.taskId=10851011
I try to use the API- casper.waitForPopup after I do the click action.
casper.waitForPopup(/.+/, function(){
this.echo(this.getTitle());
}, null, 20000);
But it failed as wait timeout 20000ms expired. I also tried put the urlstring as the parameter:
casper.waitForPopup(/oa.phicomm.com\/workflow\/doJob\.action\?taskVo\.processExecutionId=2c913f9e49d0d5280149d12fabd90dd0&taskVo\.taskId=9100818/, function{
this.echo(this.getTitle());
});
still timeout. I also capture the screenshot, clearly it's still in the previous page. I try the thenOpen method directly inputting the url. It works. But since I want to auto it, I can't know the url before I actual trigger the link. I am a newer to CasperJS, anyone knows how to solve this problem? Thanks.
There was same issue with me i have resolve this problem by first selector exist or not
casper.[waitForSelector][1]('#example_id', function() {
this.echo("yes");
});
If your selector exist then try this
casper.[waitForPopup][1](0, function() {
this.echo('Popup');
});
casper.withPopup(0, function() {
this.capture('screen.png');
});
Read more about waitForPopup
Example: (werkwijze is custom, i also have the same code with other names like -contact)
$(function() {
$('#activator-werkwijze').click(function(){
$('#overlay-werkwijze').fadeIn('fast',function(){
$('#box-werkwijze').animate({'bottom':'0px'},800);
});
});
$('#boxclose-werkwijze').click(function(){
$('#box-werkwijze').animate({'bottom':'-600px'},800,function(){
$('#overlay-werkwijze').fadeOut('fast');
});
});
});
activator shows the content, boxclose closes the content.
clicking all activators opens all content while it needs to open only one and close the others..
edit got it fixed:
This is the script which works, (the overlay is useless) jsfiddle.net/8y7Sr/126/
You need to provide more information about how you are calling the pop-up script. If you are using jquery, you can just close all and then open one
$('.className').slideDown(200);
$('#specificItem').slideUp(200);
But again, you should explain how you are doing the calls in more detail for a better answer
example, put inside function jQuery
if($('.hide').css('display')=='block'){ $('.hide').slideUp(); }else{ $('.hide').slideDown(); }
$(function() {
$('.activator').each(function(){
$(this).click(function(){
showHideAnimation(clickedObj);
});
});
}
function showHideAnimation(clickedObj)
{
$('.activator').each(function(){
if($(this).id == clickedObj.id) {
$(this).fadeIn('fast',function(){
$(this).animate({'bottom':'0px'},800);
});
} else {
$(this).animate({'bottom':'-600px'},800,function(){
$(this).fadeOut('fast');
});
}
}
}
Please try this if it doesn't work properly then replace $(this) with only this
I'm banging my head against the wall here, and hoping I'm just blind to something obvious.
I have this DOM structure:
<ul>
<li>
<h3>Lorem ipusm</h3>
<p class="remove-story">Delete</p>
</li>
</ul>
And this is my jQuery:
$(".remove-story a").click(function()
{
var parent = $(this).closest('li');
$.get($(this).attr('href'), function()
{
$(parent).fadeOut();
});
return false;
});
As it stands, clicking on the link within .remove-story does nothing, and the action triggered by the URL in the link does not occur either.
No JS errors pop-up in the console either on page load or when clicking the link.
If I remove the $.get function and simply fade out the list item, that works as expected.
If I visit the URL manually (or remove the return false and click the link), the link works and the back-end action completes (story removed).
Is there an error in my code here that anyone can spot? If not, any ideas as to where to look next to troubleshoot this?
I would firstly check if that get request really been send our, I mean using some tool like Fiddler or Chrome developer tool network tab, and then maybe add break point inside the call see if the parent you in that certain context is nothing or a wrong object
Wrap your onclick with $(document).ready(function() {}):
$(".remove-story > a").click(function(e)
{
var parent = $(this).closest('li');
alert($(this).attr('href'));
$.ajax({
url: $(this).attr('href'),
success: function() {
alert(12);
$(parent).fadeOut();
},
error: function(e) {
alert('baaaahhhh:' + e);
}
})
//e.stopPropagation();
return false;
});
Update: Changed $.get to $.ajax to see if thrs error while doing Ajax request.
You need to encode your link encodeURIComponent($(this).attr('href'));
Here is a jsfiddle working:
http://jsfiddle.net/9Wnt8/
I have a main menu and one of its options has an accordion effect on toggle with the following script:
$(document).ready(function(){
$(function(){
$("#accordion").accordion({
active: false,
autoHeight: false,
collapsible: true
});
});
});
When one of its sub-options is selected I add an active class with this:
jQuery.fn.slideFadeToggle = function(speed, easing, callback){
return this.animate({opacity: 'toggle', width: 'toggle'}, speed, easing, callback);
};
$(document).ready(function(){
$("#subNavUs").hide();
$("#us").click(function () {
$("#subNavSys").hide();
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavUs").slideFadeToggle(800);
$('*').removeClass('active');
$(this).addClass('active');
return true;
});
$("#subNavSys").hide();
$("#sys").click(function () {
$("#subNavUs").hide();
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavSys").slideFadeToggle(800);
$('*').removeClass('active');
$(this).addClass('active');
return true;
});
And this triggers a sub-menu, but when I select any of this new sub-menu's options to load a new page both the accordion menu and the sub-menu are back hidden. How can I make them stay open and show the active class I want to assign them?
Just added "navigation: true" to the accordion function. It was a beginner's mistake but I finally got it to work :)
I post it in case someone might have the same issue.
Here's what I've made so far:
// somewhere in the page code...
<img alt="" src="images/frame.png" onclick="uploadImage()" />
I have created a jQuery script:
// in the head section of the page...
<script type="text/javascript">
$('#uploadContactImage').dialog({
title: 'Change contact image',
buttons: {
"Upload new image": function() {
$(this).dialog("close");
},
"Remove current image": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
</script>
Finally, I have a javascript file with the empty function:
function uploadImage() {
}
The use case should be: User clicks the image, the dialog pops up. Based on the button the user has clicked, certain functions should be called.
Please note that my image tag is generated through AJAX, i.e. the jQuery script is not connected to it. That's the first problem.
The second problem is that I don't know how to call the jQuery script to actually display the dialog.
The third and the last problem is that I don't know how to handle the choice the user makes.
As you must have concluded by now, I am a complete newbie when it comes to jQuery. Can you help me out to get started? Thanks.
Boris,
This is quite simple to do. Firstly, I would not use an onClick event as jQuery has much better ways to manage this. Instead, it should look as follows:
HTML:
<img alt="" src="images/frame.png" id="imageUpload" />
jQuery:
$('img#imageUpload').dialog({
title: 'Change contact image',
buttons: {
"Upload new image": function() {
$(this).dialog("close");
},
"Remove current image": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
First you'll need some hook, or path, to select the image element. Second, since it's added to the page after the document load you'll need to attach the event listener after the response.
select the element
So if you have control of the html returned via ajax add an id to it and select it trivially with jquery:
<img alt="" src="images/frame.png" onclick="uploadImage()" id="pickME" />
...and someplace in the ajax callback...
$("#pickME").click(...
If you can't add the id you'll have to drill down to it by starting from the wrapping element and looking for the img descendant.
attach the event
you can't attach the click event when the document is "ready" because the ajax hasn't inserted it into the document yet. So the thing here is to add the event handler after the img is inserted into the document. So you need to catch that event so you know when its time to add your click event.
ajax(...
success: function(data){
...stuff data into document...
$("#pickME").click(function(){
...attach the dialog to the element...
you might be out of your depth ;-)