I'm working on one site,
when trying to access elements of developer console or js returns null.
from the elements panel, the element is exactly there.
but if I copied the js path from the elements panel to the console it works.
from elements panel:
to the console:
The site uses angular (I guess,) and I'm creating a script to do some changes on it.
first-time such a thing happens to me, what's the reason?
Related
I am trying to build an automated Puppeteer script to download my monthly bank transactions from my bank website.
However, I am encountering a strange error (see attached Imgur for pictures of this behavior)
https://imgur.com/a/rSwCAxj
Problem: querySelector returns null on DOM element that is clearly visible:
Screenshot: https://imgur.com/d540E6p
(1) Input box for username is clearly visible on site (https://internet.ocbc.com/internet-banking/),
(2) However, when I run document.querySelector('#access-code'), console returns null.
I'm wondering why this behavior is so, and what are the circumstances that a browser would return null on a querySelector(#id) query when the DOM node is clearly visible.
# EDIT: Weird workaround that works:
I was continuing to play around with the browser, and used DevTools to inspect the DOM element and use it to Copy the JS Path.
Weirdly, after using Chrome Devtools to copy the JS Path, document.querySelector('#access-code') returned the correct element.
Screenshot of it returning the correct element: https://imgur.com/a/rSwCAxj
In both cases, the exact same search string is used for document.querySelector.
I believe that you cannot get proper value using document.querySelector('#access-code') because a website use frameset.
In the website there is frame with src to load content
<frame src="/internet-banking/Login/Login">
DOMContentLoading is executed when main document is loaded and not wait for frame content to be loaded.
First of all you need to have listener for load event.
window.addEventListener("load",function() {
...
});
And later on you cannot simply use document.querySelector('#access-code')
because input yuo want to get is inside frame. You will need to find a way to access frame content and than inside of it use simple querySelector.
So something like:
window.addEventListener("load",function() {
console.log(window.frames[0].document.querySelector('#access-code'));
});
BTW please see in: view-source:https://internet.ocbc.com/internet-banking/ looks like website is mostly rendered client-side.
When you navigate to: blockchain.info
You will notice that if you click view-source on the page, it will show HTML context different than that when you inspect-element. My question is, how are they doing this?
I understand they are using .pug templates from AngularJS framework. But how does my browser know where to read them from if they are not loaded from the client-(browser)-side?
Also, if I was to insert jQuery onto the page, would the jQuery know when the events are triggered on('click', 'submit', 'whatever') etc ...?
When you click View Source, you see what the server sends back. Many pages do not send back a full HTML page, instead some skeleton HTML and add the rest of the functionality via JavaScript
When you Inspect Element, you're viewing the browser's representation of the DOM, which includes any manipulations done via JavaScript. For a visual explanation, see this article on css-tricks: https://css-tricks.com/dom/
Any framework that is rendering HTML client-side (React, Angular, Vue) will do that. The actual source code could literally just be some basic html boilerplate and a div that then gets loaded with an application through something like Javascript. Thus, when you view the source of the page, you're seeing this basic templating. But when inspecting an element, Chrome Dev tools (and others) are inspecting the element that is being rendered client side. Your browser has placed those elements on the DOM, they didn't exist in the source code till the code executed. Hope that helps clear things up.
I am integrating a live chat functionality and I am trying to use a JQuery statement to get the chat session ID from a div ID that is not created until a chat is started. (It is dynamically added to the page.) Of course logically, I am making sure that I don't try to select the element until after a chat has started and it exists. Here is the relevant HTML structure and the line of code that I am using:
HTML:
<!--These do not exist until a chat is started-->
<div class="customer_inner_widget">
<div id="chat-session-5748220" style="height:100%;">
JQuery:
$(".customer_inner_widget").children().first().attr("id").split("-")[2]
The strangest thing is that under normal circumstances either when I run it in my script upon closing the chat OR I run it in Google Chrome Developer Tools Console AFTER a chat has started, it does not work:
Output:
Uncaught TypeError: Cannot read property 'split' of undefined
at <anonymous>:1:58
...but If I simply right click on the chat window on my page and select "inspect", then run the same line of code in the console... it works:
Output:
"5748220"
How does just inspecting the HTML wilth Chrome suddenly cause it to work...? How can I perform this hidden magic in my script?
So the issue seems to have something to do with the fact that the child I am trying to access is located within an iFrame and apparently you cannot access external dynamically added content within an iFrame. I guess that JQuery just becomes aware of what is inside after inspecting since it is being forced to discover the elements.
I'm trying to click on a webpage item via AppleScript but with no success.
I tried the following code in chrome and safari:
execute "document.getElementById('t-strikethrough').click();"
and
do JavaScript "document.getElementById('t-strikethrough').click();"
In Safari, the first line of code does nothing and the result section of Script Editor says missing value. With Chrome, I get the following error:
Can’t make "document.getElementById('t-strikethrough').click();" into
type specifier
This is included inside tell statements to locate app, window and document.
Without seeing all of your AppleScript code, it's difficult to see exactly what the problem is. You may want to try setting a variable for the URL like this:
set URL of document 1 to "http://www.whatever.com"
do JavaScript "document.getElementById('t-strikethrough').click();" in document 1
Check this post to see the full example . Click Button on Webpage with Applescript/JavaScript
I'm very new to javascript, so this is confusing me. All of the settings charm tutorials only show how to put the controls into the settings charm, but none of them say how to find the information gotten in them.
I tried to do one of these (like I do in the main program):
var muteToggle = document.GetElementById("Mute");
where "Mute" is the id in the separate html file.
muteToggle just ends up being null all of the time. I tried putting it after
WinJS.UI.ProcessAll().then(function completed() {...
but that didn't work either. Everything else is the same as in this page: http://msdn.microsoft.com/en-us/library/windows/apps/hh780611.aspx
Make sure you're doing it in the ready function of the js file that is referenced from your settings HTML. Try opening the JavaScript console or QuickWatch while broken at that line and also look at the DOM Explorer to see if you can find your toggle control. You should be able to access it though. Also, try element.getElementById instead of document.getElementById. Either should work actually, but as long as you're troubleshooting. Good luck.
Your problem is that you are trying to get a reference to the HTML element from the code running during the app activation. Although that piece of code may define the HTML to be loaded for a settings pane, it does Not actually load the HTML into the DOM. You just simply can't get the instance from that location.
What you need to do is have the settings flyout have its own js file that implements IPageControlMembers. In particular, you need to implement the ready method. This method is called once all the HTML and controls are loaded for the page, including your toggle. The link has an example of how to do this.
Also see:
WinJS.UI.Pages.define
Using single page navigation