Inconsistent results from document.querySelectorAll

Question

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>"

Ok. Are you sure the elements had loaded by the time you evaluated the expression? — Rojo, Dec 16 '20 at 22:40
@Rojo I was looking at the elements in question on the screen when I evaluated the expression. They must have been loaded. — BlueMonkMN, Dec 16 '20 at 22:41
If the HTML is too complex, create a simpler version that displays the problem and post that. See [mcve] — , Dec 16 '20 at 22:43
Could be that some timered events or focus events are modifying the DOM between your evaluations — Richard, Dec 16 '20 at 22:44
Could you share a video of the process you mentioned? (Maybe a gif so that it loads fast?) — Rojo, Dec 16 '20 at 22:45
I suspect it's related to the fact that this element is embedded in an iframe. I think I'm looking for some confirmation that document content in embedded iframes is not evaluated until some condition is met and how to force that condition to be met. — BlueMonkMN, Dec 16 '20 at 22:46
I can't edit the HTML document. I'm writing automated tests to test web site content. — BlueMonkMN, Dec 16 '20 at 22:58
Can you find the elements through inspect element before using any tools? — Rojo, Dec 16 '20 at 23:04
@Rojo Inspect element *is* the tool I used in that demo to cause it to become visible isn't it? — BlueMonkMN, Dec 16 '20 at 23:07
Ok. So that means you are 100% sure that whatever you're selecting has that class and is a `
`? — Rojo, Dec 16 '20 at 23:08
@Rojo I didn't hit my target with the mouse in that demo. I suspect all that really needs to happen is that I select any element within the IFrame (which necompasses most of the page) and then everything in the document suddenly becomes available to document.querySelectorAll. — BlueMonkMN, Dec 16 '20 at 23:11
Ohhhh it's in an iFrame. [How about try it like this the first time?](https://stackoverflow.com/questions/26630519/queryselector-for-web-elements-inside-iframe/28778893) — Rojo, Dec 16 '20 at 23:13
@Rojo Interestingly enough I am also using Selenium! I'll give it a try; thanks. If it works what should I do with this question? Answer it with my specific solution, or close it like a duplicate? — BlueMonkMN, Dec 17 '20 at 13:17
Use your specific solution if it isn’t exactly the same as the other question. You should reference the question though. — Rojo, Dec 17 '20 at 13:18

score 0 · Answer 1 · answered Dec 18 '20 at 18:52

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)

Inconsistent results from document.querySelectorAll

1 Answers1