I am trying to setup a CasperJS script that will do some testing on a personal site.
I need to check for a selector, and if it cannot be found on the page, click the next page link in the pagination and check again.
I am struggling to wrap my head around this problem and how to solve it. I know I need some sort of loop, and I even tried a while() loop, but I don't understand CasperJS enough to get it working.
Basic idea of what I want, in psuedocode:
open page http://www.example.com
check if 'li.my-class' exists
if not
click '.next-page'
then check again for 'li.my-class'
(repeat this process)
else
'li.my-class' exists, go do something else
I've tried reading about waitFor, waitforSelector etc. The documentation doesn't help me much as it's quite basic in terms of examples.
I recommend you to use recursion, especially a recursive IIFE. Here is the implementation:
var casper = require('casper').create();
casper.start('http://www.example.com');
(function go() {
casper.wait(1000, function () {
if (!this.exists('li.my-class')) {
this.click('.next-page');
go();
} else {
// Do something...
}
});
})();
casper.run();
Related
I apologize if this is a duplicate, just haven't been able to find anything close to this myself.
The company I work for has an online reporting system that is run by an ng-app applied directly to the body tag. I have been tasked with modifying the result that returns from this ng-app. Following code is called using onload attached to the body tag.
function getElements(){
var list;
list = document.getElementsByClassName("neutral");
[].forEach.call(list, function (listItem) {
addNeutral(listItem);
});
...
Basically, trying to find anything with class "neutral" and apply results from another function to it. The addNeutral function is basically just
element.classList.add("neutralHighlight");
This code seems to run and gathers the correct list of elements, but the new class is never added and no errors occur. So long story short, is there any way to modify the output of a ng-app using code separate from the ng-app itself? Any guidance would be greatly appreciated.
Update 3/5/20
So I implemented Shaun's response and it still isn't working properly. With some debug messages, I can see that it collects the "list" variable as an HTMLCollection. The forEach function doesn't seem to even trig
function getElements(){
var list;
list = document.getElementsByClassName("neutral");
console.log(list); //Debug - Shows in console
[].forEach.call(list, function (listItem) {
console.log(listItem); //Debug - Does not show in console
addNeutral(listItem);
});
}
function addNeutral(element){
angular.element(element).addClass("neutralHighlight");
console.log("!!!end addNeutral"); //Debug - Does not show in console
}
Update 3/9/20 -SOLUTION-
Application is returning the HTML Collection, but it displays with a length of 0 (still displays the objects, but I think that's a Firefox console thing). When trying to loop through the list items, it returns null for the first item, so the function is still being called before the Angular app loads completely.
That being said, I messed around with things a bit this morning and came to a solution! I ended up using the setInterval function with a 5 second interval (since I need it to update, I may change this to optimize it later by adding onChange items to the objects I grab initially). The setTimeout that was proposed would have worked with a delay added to it. This probably isn't the most elegant solution, and there's probably a better way to do it, but this works for anyone interested.
function getElements(){
var list;
list = document.getElementsByClassName("neutral");
for (i = 0; i <= list.length; i++){
var listItem = list.item(i);
addNeutral(listItem);
}
}
function loadFunction(){
setInterval(function(){getElements()}, 5000);
}
I added <script>loadFunction()</script> right before the closing HTML tag to execute.
Update 4/21/20 -IMPROVED SOLUTION- CSS Attributes
So this is a bit specific to my scenario, but I wanted to include it for anybody else who may come across this in the future. I was actually able to accomplish this entirely with CSS attribute selectors. The tags that I wanted to edit all had specific titles assigned to them via the ng-app provided from the company, so I was able to use CSS selectors like div [title~="NotReadyForNextCall"]{<custom styling here>} to select any block that included an agent who was not ready for their next call. This is a much better solution in terms of resources required to operate and overall performance, so I hope it helps anybody looking at this down the line!
You might be able to get around this by using the angular object in your code and adding the class on an angular.element instead. AngularJS doesn't use a virtual DOM but it does use its own node references (which is what makes it so tricky to work with outside of the framework, as Lex pointed out in the comments of your question). Try:
angular.element(element).addClass("neutralHighlight");
Yes, you have access to angular outside of the app! And a last note, addClass() is available on angular.element because AngularJS comes with jqLite.
Further investigation
It looks like the above solution works if the class 'neutral' is being added in angular via the class attribute, but it looks like your app may be adding it programmatically with the ng-class directive after the DOM has rendered.
I wrapped your getElements() function in a setTimeout():
setTimeout(getElements);
This is unfortunately not a guarantee that the ng-class update will have taken place, but what it does is it executes the function after the previous digest cycle has completed and that appears to be working.
An even safer solution would be to use document.ready but again with the angular.element wrapper. This will ensure the initial DOM state has been rendered by AngularJS, including applied directives:
angular.element(document).ready(function() {
getElements();
});
EDIT: Update 3/9/20 -SOLUTION-
The solution proposed in the answer is almost identical to the setTimeout() answer given here. The only difference is setInterval() will keep executing the code every 5 seconds until you tell it to stop.
You can do this with the following:
var loadFunction = setInterval(function() {
var el = getElements();
if (el) clearInterval(loadFunction);
}, 5000);
And just return a bool in your getElements() like so:
function getElements() {
var list;
var found = false;
list = document.getElementsByClassName("neutral");
[].forEach.call(list, function (listItem) {
addNeutral(listItem);
found = true;
});
return found;
}
See: codepen.io/shaunetobias/pen/KKpXRxq
First, a little disclaimer: I'm no master at working with javaScript / jQuery, although I have handled it quite a few times. Recently, I have sometimes found myself being forced to make redundant code, i.e. repeat line(s) of code regarding diferent events, because I don't know how to do it in a more efficient way. A small example would be enabling a button after checking if any checkbox in a page is selected. This is done either upon page loading or after any checkbox is selected:
var checkboxes = $("input[type='checkbox']");
$('#nextfl').attr("disabled", !checkboxes.is(":checked"));
checkboxes.click(function()
{
$('#nextfl').attr("disabled", !checkboxes.is(":checked"));
});
I don't think this could be solved using the bind or on functions, for instance, since it refers to events not related to the same element. I believe it must exist a straightforward solution to this though, but as I said before, I have little experience in JS / jQ, and there are some similar situations where I have repeated dozens of lines of code, which is of course at least a bad practice.
You can always split redundant code into functions with javascript:
function doCheckboxLogic () {
$('#nextfl').attr("disabled", !checkboxes.is(":checked"));
// and any other logic that needs to be done
}
You then call that function in place of the redundant code block:
checkboxes.click(function()
{
doCheckboxLogic();
});
There's not much gained here since it's one line of code anyway, but this really helps with encapsulating more complicated blocks of logic
Best practice in this case is to extract common logic to its own function which can be called as required. Try this:
$(function() {
var $checkboxes = $("input[type='checkbox']");
function checkState() {
$('#nextfl').attr("disabled", !$checkboxes.is(":checked"));
}
$checkboxes.click(checkState); // run the function on click of a checkbox
checkState(); // run it on load of the page
});
There is probably a very simple explanation for this (and likely a much cleaner way to do it), but I'm new and can't quite figure it out. Any assistance would help the learning process...
I have one script that displays one div or another based (show instead of hide) on what a user selects from a dropdown list. Like so:
var PickDiv = (function(){
var _obj = {};
var hideShow = function(elem){
if($(elem).val() === '1'){
$("#slider_action").show();
$("#slider_dollar").hide();
}else if($(elem).val() === '2'){
$("#slider_dollar").show();
$("#slider_action").hide();
}else{
$("#slider_dollar, #slider_action").hide();
}
};
_obj.checkValue = function(){
hideShow($('#build_opt'))
};
var events = function(){
$('#build_opt').change(function(){
hideShow(this);
});
};
$(document).ready(function(){
events ();
checkValue ();
});
return _obj;
}());
This works great and displays the right div based on what is selected from the dropdown. I thought I could reuse this same idea later in my code to have the same effect. Once the div is displayed (after making a selection related to script above), I need to provide another dropdown with additional options. The user will select one of these and then a div will display. So, I figured, I could use something like this:
var RunRate = (function(){
var _obj2 = {};
var hideShow_2 = function(elem_2){
if($(elem_2).val() === '6'){
$("#db_sign").show();
$("#app_down", "#in_redem", "#site_vis", "#cont_ent" ).hide();
}else if($(elem_2).val() === '7'){
$("#app_down").show();
else{
$("#app_down", "#in_redem", "#site_vis", "#db_sign", "#cont_ent" ).hide();
}
};
_obj2.checkValue_2 = function(){
hideShow_2($('#action_type_2'))
};
var events_2 = function(){
$('#action_type_2').change(function(){
hideShow_2(this);
});
};
$(document).ready(function(){
events_2 ();
checkValue_2 ();
});
return _obj2;
}());
Of course, this doesn't work. I tried a number of different things with no luck. Note that if I exclude the first script from my code, the second script works fine, so I know it works. I'm guessing it has something to do with the two scripts sharing a variable or something about jquery that I'm clearly missing.
Any help would be appreciated. Overall, looking to be able to do a number of these types of dependent dropdowns without interfering with one another.
Thanks for your help!
UPDATE:
Note that if in the second script, I replace:
$(document).ready(function(){
with
$( window ).load(function() {
then the problem is solved. So, clearly the problem is related to the document.ready interfering with each other, but I don't know how to fix this without this "hack" above especially if I want to use more of these dependent dropdowns. Is there a way to pass a different variable and call that instead of document?
UPDATE 2
Figured out the problem...my original code was throwing an error due to an undefined reference (checkValue). That error was causing the document ready to not work in the second function. Referenced a more detailed explanation in my answer below.
Figured out the problem thanks to this answer to a related question pointed out by #skmasq. #JustinWood was onto something with his comment on my original question. Turns out that my scripts were throwing an error ("Uncaught ReferenceError: checkValue is not defined"), which was not allowing the document ready function to work properly.
Here's the critical part of the answer :
It is important to note that each jQuery() call must actually return. If an exception is thrown in one, subsequent (unrelated) calls will never be executed.
This applies regardless of syntax. You can use jQuery(), jQuery(function() {}), $(document).ready(), whatever you like, the behavior is the same. If an early one fails, subsequent blocks will never be run.
Could be that $(document).ready() overwrites the initial job? It doesn't matter if you use different functions/variable names ...$(document).ready is the same ...
So, as a sort of exercise for myself, I'm writing a little async script loader utility (think require.js, head.js, yepnope.js), and have run across a little bit of a conundrum. First, the basic syntax is like this:
using("Models/SomeModel", function() {
//callback when all dependencies loaded
});
Now, I want to know, when this call is made, what file I'm in. I could do it with an ajax call, so that I can mark a flag after the content loads, but before I eval it to mark that all using calls are going to be for a specific file, then unset the flag immediately after the eval (I know eval is evil, but in this case it's javascript in the first place, not json, so it's not AS evil). I'm pretty sure this would get what I need, however I would prefer to do this with a script tag for a few reasons:
It's semantically more correct
Easier to find scripts for debugging (unique file names are much easier to look through than anonymous script blocks and debugger statements)
Cross-domain requests. I know I could try to use XDomainRequest, but most servers aren't going to be set up for that, and I want the ability to reference external scripts on CDN's.
I tried something that almost got me what I needed. I keep a list of every time using is called. When one of the scripts loads, I take any of those using references and incorporate them into the correct object for the file that just loaded, and clear the global list. This actually seems to work alright in Firefox and Chrome, but fails in IE because the load events seem to go off at weird times (a jQuery reference swallowed a reference to another type and ended up showing it as a dependency). I thought I could latch on to the "interactive" readystate, but it doesn't appear to ever happen.
So now I come asking if anybody here has any thoughts on this. If y'all want, I can post the code, but it's still very messy and probably hard to read.
Edit: Additional usages
//aliasing and multiple dependencies
using.alias("ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", "jQuery");
using(["jQuery", "Models/SomeModel"], function() {
//should run after both jQuery and SomeModel have been loaded and run
});
//css and conditionals (using some non-existant variables here)
using.css({ src: "IEFix", conditionally: browser === "MSIE" && version < 9 });
//should include the IEFix.css file if the browser is IE8 or below
and to expound more on my response below, consider this to be file A (and consider the jquery alias from before to be there still):
using(["jQuery", "B"], function() {
console.log("This should be last (after both jQuery and B have loaded)");
console.log(typeof($));
});
Then this would be B:
using("C", function() {
console.log("This should be second");
});
And finally, C:
console.log("This should be first");
The output should be:
This should be first
This should be second
This should be last (after both jQuery and B have loaded)
[Object Object]
Commendable that you are taking on such an educational project.
However, you won't be able to pull it off quite the way you want to do it.
The good news is:
No need to know what file you are in
No need to mess with eval.
You actually have everything you need right there: A function reference. A callback, if you will.
A rough P-code for your using function would be:
function using(modules, callback) {
var loadedModules = []
// This will be an ajax call to load things, several different ways to do it..
loadedModules[0] = loadModule(modules[0]);
loadedModules[1] = loadModule(modules[1]);
// Great, now we have all the modules
// null = value for `this`
callback.apply(null, loadedModules);
}
Solution below: Edit #2
I've a HTML-list the user is able to sort. I don't want to save the data after every drag/drop action, so I save the data on unload: in a cookie and database. Thats working, but:
After saving the data the list is hidden and I get a "syntax error" in this line:
<!DOCTYPE html>
It's strange because everything works fine after refreshing the same page (F5) without changing anything.
I try to find the cause but no success. That's the flow:
1. visit the page (index.php)
2. change the list (set: list_is_dirty = true)
3. click any internal link (call $(window).unload( ... save_data() ... )
4. target page appears without the list (syntax error!)
5. refreshing the page (everything works fine)
Do you have any idea how to find this error? Any tools or strategies? Or maybe the same experience with the unload function?
Thanks in advance!
Edit:
Some code:
var list_is_dirty = false;
// document ready?
$(function() {
function sort_list() {
// some code, not important
}
sort_list();
$(window).unload(function() {
if (list_is_dirty == true) {
/* ---------- HERE's the error! ---------- */
/* The error occures when I try to call the script.php
I tried load(), $.post(), $.get() but nothing works.
The string is correct. I'm not even able to call any of
these functions without params.
*/
// send data to script.php to save data
$("#div").load("script.php?str="+list_data_str);
$.cookie("list_data", list_data_str);
}
});
}
Edit #2 / Solution:
I don't know why, but everything works with window.onbeforeunload instead of jQuery.unload(). An explaination would be great! I'm sorry for this confusing thread!
window.onbeforeunload = function(e) {
$("#div").load("script.php");
}
I think that your issue is with: list_data_str as it's not defined anywhere.
if you are trying to say that you want to do AJAX post for example, then obviously you need to look for success event
else it appears that what your demo code is missing something because you can do it the way you are trying if at the receiving script you use $_GET over the URL and not pay attention to any parameters.. In other words, you are missing the object and when you refresh the page it's loaded into the DOM. Apparently that could be the issue that you are describing, I would suggest that you post a bit more of relevant to your issue code.. like the receiving script or any errors from a debugger like Firebug.
Regarding how to test it, you might want to use console.log in supported browsers or simply alert when is setting up the cookie.
var global list_is_dirty = false;
function sort_list(list, list_is_dirty) {
// some code, not important
//check the list and the flag
//you should return a value, else it does not make sense to use a function here.. note the var defined as global
return list; //?? not sure what to return as don't know what this code does from the posting
}
jQuery(function($)
{
$(window).load(function(e){
var list_data_str= sort_list( );
// send data to script.php to save data
e("#div").load('script.php?str='+list_data_str);
//on unload destroy the cookie perhaps?? or if it's not set a session variable
e.cookie("list_data", list_data_str);
...
The unload event
$(window).unload(function(e) {
$("#div").load("script.php?str="+list_data_str);
$.cookie("list_data", list_data_str);
}
});
}
....
// About your EDIT: Are you passing in here any parameters to the script? Because I think the problem is at that logic.
window.onbeforeunload = function(e) {
$("#div").load("script.php");