I opened the Chrome development console pane and evaluated this expression:
Array.from(document.querySelectorAll("div.fc-event-inner")).filter(e => {
let r = e.getBoundingClientRect();
return (r.left < 1354) && (r.top < 531) && (r.right > 1167) && (r.bottom > 487);})
It returned an empty array.
Then I used the "Select an element in the page to inspect it" button in the development pane to click on an element and see my element expanded in the element list. Then I re-evaluated the same expression and it returned an array of 2 elements even though nothing on the page had moved. Why am I getting inconsistent results?
BTW, I probably should have simplified the question. I think the same is true when I simply evaluate
document.querySelectorAll("div.fc-event-inner")
Edit: I am trying to evaluate the contents of each IFrame before running my target querySelectorAll. When I evaluate this expression, things are OK, but I still don't get any updated results:
document.querySelectorAll("iframe")[0].contentWindow.document.childElementCount
But when I try to evaluate this condition:
document.querySelectorAll("iframe")[1].contentWindow
Chrome has a rather hard error (STATUS_BREAKPOINT):
I am able to circumvent this error using eval, but I find that the content of the iframe is blank:
eval("document.querySelectorAll(\"iframe\")[1].contentWindow.document.body.outerHTML")
Result: "<body></body>"
Accessing content within an IFrame poses unique challenges. To access the content from JavaScript, it's necessary to first access the correct IFrame. For example:
eval("document.querySelector(\"iframe\").contentDocument.querySelector(\"iframe\").contentWindow.document.querySelectorAll(\".fc-event-inner\")")
The eval is necessary to avoid a Chrome error that occurs as soon as the development tools pane tries to evaluate and highlight the inner frame while you type. The eval prevents the real-time evaluation and highlighting.
If using Selenium, this seemed to be working for me:
var f = switchTo.frame(0)
var banners = f.findElements(By.cssSelector("div.fc-event-inner"))
Utilities.actionLog("Banners: " + banners.size)
Related
i am new to js
Around eight hours I am trying to debug why I am getting the below empty object
document.getElementsByClassName("sports-title") is working fine in fiddle but when I put in my code base its not working fine.
it is returning like this so I am not able to proceed.
codebase output
sports - title-- -- > {}
third-- -- > undefined
fiddle ouput
sports-title---->{"0":{}} third---->{}
I am using same html structure.
can you guys tell me what could be problem so that I can proceed.
findStringInsideDiv() {
var sportsTitle = document.getElementsByClassName("sports-title");
var third = sportsTitle[0];
var thirdHTML = third.innerHTML
//str = str.split(" ")[4];
console.log("sports-title---->" + JSON.stringify(sportsTitle));
console.log("third---->" + JSON.stringify(third));
console.log("thirdHTML---->" + JSON.stringify(thirdHTML));
if ( thirdHTML === " basketball football swimming " ) {
console.log("matching basketball---->");
var menu = document.querySelector('.sports');
menu.classList.add('sports-with-basketball');
// how to add this class name directly to the first div after body.
// but we are not rendering that div in accordion
//is it possible
}
else{
console.log("not matching");
}
}
If document.getElementsByClassName("sports-title") isn't returning any elements this could mean:
Your HTML source doesn't have any elements with class="sports-title", possibly because of a syntax error, spelling error, etc.. Try inspecting your web page with a browser's DOM inspector and look for the elements which you think should be in the sports-title class.
Or
Your Javascript is executing before the .sports-title elements are actually added to the document, because scripts are (normally) executed synchronously during document parsing, as soon as the parser encounters them. Try moving the <script> element to the end of the <body>, after all the other elements are defined.
There may be other possible causes that I can't think of right now.
This probably isn't the answer but I can't leave a comment so here goes:
I was messing with your jsFiddle and I noticed that if you change JSON.stringify(object) to object.ToString that they turn into undefined. So my question to you is are you sure you're code in your codebase matches the jsfiddle?
Also if you're using JSfiddle to make and test your code first, you might consider installing Brackets.io. It has a nifty live update feature that makes web development easier for beginners and it opens up a preview on the browser. I've noticed in the past that JSfiddle doesn't always operate the same as a browser.
I am trying to get DOMElements and click on each of them. After that I want to run assertions on the response.
var nodes = this.evaluate(function(){
var nodes = document.querySelectorAll('.editable .action');
return nodes;
});
//Print the base URI for the node
for (i = 0; i < nodes.length; ++i) {
if(null != nodes[i]){
require('utils').dump(nodes[i].baseURI);
}
}
I have around 5 nodes that are a match, but nodes[0] is the only one that is not null. The rest are null in CasperJS. However running the same test in chrome browser I get all the nodes, none of them are null.
CasperJS is built upon PhantomJS and has the same limitations. One of those limitations is that there are two contexts and the page context which has access to the DOM is sandboxed. It's not possible to pass non-primitive objects such as DOM nodes out of the page context.
Documentation:
Note: The arguments and the return value to the evaluate function must be a simple primitive object. The rule of thumb: if it can be serialized via JSON, then it is fine.
Closures, functions, DOM nodes, etc. will not work!
You cannot compare this with Chrome, because Chrome doesn't have two contexts in normal operation.
You can pass representations of DOM nodes out of the page context. CasperJS has some convenience functions for this like casper.getElementsInfo(selector).
If you want to click every element, then there are different ways to achieve that depending on how the elements are positioned on the page. My answer here shows two ways with CSS selectors and XPath expressions outside of the page context.
See also:
casper.evaluate(fn, args...)
Using a JS bookmarklet to set a custom field in the Wordpress Edit Post screen. The following code works well when I copy/paste it into the console (latest Chrome stable):
document.getElementById('metakeyselect').value = "foo";
document.getElementById('metavalue').value = "bar";
document.getElementById('meta-add-submit').click();
Works without a hitch; I jut paste this into the console, and a new custom var is added to the post (I have "foo" as a var name in WP already).
In bookmarklet form, this same code looks like this:
javascript:document.getElementById('metakeyselect').value = "foo";document.getElementById('metavalue').value = "bar";document.getElementById('meta-add-submit').click();
And it fails: When I click it, the Name and Value boxes are filled in, but nothing gets submitted. The console shows the following error:
Uncaught TypeError: Cannot call method 'click' of null
Any idea why? Same exact code, same browser, same page.
I had a similar problem and am quite sure that's what causes your code to break too.
My minimal example would be the following code on this website (should work afor the entire stackoverflow.com domain):
document.getElementsByName("q")[0].value="foo";
This should write "foo" to the search field (that has no id but is the only element with the name "q"). Both web console and bookmarklet will set the value as expected but the bookmarklet will also change the page to an empty header and a body containing only the word "foo" after a short delay. Assuming that this is not a random bug that only applies to me, the reason for the thrown exception in your example is that the bookmarklet sets the value "foo", then "bar" but changes the content of the web page to "foo", then "bar" before your last line terminates.
Unfortunately I don't know the reason for this behaviour (I found this question looking for that exact information) but that is what most likely causes the TypeError in your excample.
It is possible that the same code runs without any problems when used in a Greasemonkey script (e.g. as the onclick script of a button you added using Greasemonkey).
[Edit:] Apparently, if a bookmarklet evaluates to anything other than undefined, the inner html of the website is replaced by a string representation of that value. To make sure that the bookmarklet evaluates to undefined, you can just type undefined as the last line outside of any condition block. unfortunately that means it is less likely that my assumption toward OP's error is correct but at least future visitors still might find this information usefull.
It looks like the code you use in console works ok.
It seems like the method you turn console code into a bookmarklet is what might result into an error.
The basic IIFE-construction, i.e. Immediately Invoked Function Expression, looks like this:
javascript:(function () {
/*code here*/
})();
Therefore, the code that is supposed to work might be this.
javascript:(function () {
document.getElementById('metakeyselect').value = "foo";
document.getElementById('metavalue').value = "bar";
document.getElementById('meta-add-submit').click();
})();
Does it solve your problem?
I want to listing all input elements in console of firebug so in console window write the followings:
var inputs = $(":input");
console.log(inputs);
but when I press the Run in console appear null
also when I write just var inputs = $(":input"); the console show Undefined I sure the page have a lot of input elements, where is the problem?
There is nothing wrong with the provided snippet.
Though, without specifying what to write (using console.log) firebug will print whatever the last statement returned, when declaring a variable using var the result is always undefined.
var inputs = $(":input"); // firebug printing 'undefined' is valid
var abc = 123; // results in the same thing
Please make sure that the website in question actually uses jQuery (bound to global $), and that there really are input elements present in the DOM.
Also make sure that the jQuery version running is of a version later/equal to 1.0 (:input selector didn't exists until then).
If it has jQuery it probably is of a more recent version, how ever; without you providing us with additional information there is no way to guarantee it.
simply go to the firebug console and wrtie as #refp mentioned the page in question must have jquery included
$(":input")
press run
I recently have discovered a warning happening in Firefox that says
Warning: Unknown pseudo-class or pseudo-element 'hidden'
Here is page http://eleven23.net/eleven23/beta/work/web/lounge22.php
And the warning happens when it gets to the part of javascript that has img:hidden
$('img:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
i++;//add 1 to the count
So Im wondering if anyone has an idea on how to resolve this warning.
Thanks!
The first step is to really stop the repeated calling of doThis() via setInterval which at the moment doesn't happen. Thus the warning appears every 500ms.
Change
$(document).ready (function() {
var int = setInterval("doThis(i)",500);
});
to
$(document).ready (function() {
int = setInterval("doThis(i)",500);
});
Else your call to clearInterval(int) won't do anything as you declared var int twice and try to clear the "outer" int which isn't the interval.
After this fix only 4-5 of this warning should remain in your console.
Now to your error. There isn't much you can do to stop this error from appearing exactly that many times you call doThis().
jQuery uses Sizzle internally as selector engine. And in some cases Sizzle tries to use (on browsers supported) the querySelectorAll() function to find the elements matching your selector.
Now AFAIK is hidden not a valid CSS selector thus although Firefox supports the call to querySelectorAll() it correctly fails after encountering an unknown selector. jQuery catches the error and then does the selection of image:hidden itself.
If you don't want to see this error at all you can use a different jQuery syntax which in this case would stop Sizzle from trying to attempt to use querySelectorAll().
Change
$('img:hidden').eq(0).fadeIn(500);
to
$('img:hidden', $('div#content_wrapper')).eq(0).fadeIn(500);
But I don't advise you to do this as it doesn't really get you much only 4-5 warnings less in your console.
Unfortunately this is a bug within JQuery itself. See: http://docs.jquery.com/Selectors/hidden
Check firebug, even on their example page you get this same warnring. It referes to a non-existing CSS pseudo-class :hidden. Where you are using $('img:hidden')