When I click on a particular element on a webpage using multiple different variants of the .click() event e.g. document.querySelectorAll(selector)[pos].dispatchEvent(new MouseEvent('click', {{ bubbles: true, cancelable: true, view: window }})); or document.querySelectorAll(selector)[pos].click() the webpage doesn't load the corresponding page properly; in fact, some of these events used to work a few days ago but now don't work anymore and even if I send a reload request using javascript to the page, it doesn't show the expected dynamic elements and responsive code. Instead, it just shows a blank result where I expected information. It requires me sending a manual click event using my own mouse and clicking on the reload for the corresponding dynamic code to reappear.
Is there a way to properly and fully simulate a mouse click using javascript such that it is indistinguishable from a normal click? I've tried a few MouseEvents but perhaps I'm just configuring them wrong, or the webpage is responding differently to console executed commands.
I found a method of systematically clicking website elements largely untraceably. Basically use pyppeteer to locate the chosen element using document.querySelectorAll(*element class name*)[*position*].getBoundingClientRect()
Then click the element using pyautogui, I found using this method worked pretty well
def safeClick(baseX,baseY):
pyautogui.moveTo(baseX,baseY,1+random.random())
step=random.randrange(1,7)
for i in range(step):
baseX=baseX+random.random()
pyautogui.moveTo(baseX,baseY)
pyautogui.mouseDown(baseX,baseY)
time.sleep(random.random())
pyautogui.mouseUp(baseX,baseY)
Remember that in most browsers the getBoundingClientRect() coordinates are not exactly the same as the pyautogui coordinates, you'll need to use my answer here how to find offsets in any browser configuration.
EDIT: Note this answer works in python, if you're trying to use javascript I'm pretty sure it's largely impossible
Related
I have a WinForms app that uses a .NET webbrowser control. What I need to do, is wire up an event on the WinForms side to fire when a value is set (via javascript) in the loaded HTML page. I had success doing this with an onclick event of a button, but I can't seem to get it to work with a custom event. I don't know if this is a limitation in what the browser control can attach to event wise.
So essentially, I need that when a JS function is called in the HTML page and sets a value of a hidden input element (or it could be a regular input that I style to be hidden), I need to know that in WinForms. If it helps, I am using browser flags in this application to emulate IE11 instead of the default IE9 engine. The HTML page loaded is also mine so I can modify it any way needed to make this work properly. I would just use the onclick events of the buttons, but this is a gmaps integration where there can be upwards of 2000 buttons generated (one per marker placed) so it seems like a huge waste of resources to wire up 2000 onclick events when any of those button clicks only modify 4 input fields with the data I care about.
This project happens to be in VB.NET, but C# solutions would be fine as well. They can be transcoded or if the solution uses C# specific features, we can move this to a separate DLL and reference it.
After spending a lot of time on this today, I found a solution. It isn't a direct solution to the problem I posted, but it got me to where I needed to be. I am still interested in an answer to the original problem if anyone has one, but for now, what I found I could do was to create a class in .NET that I could assign to the ScriptingObject of the browser control and then call window.external.myFunctionName, where myFunctionName is a function within the .NET class. This works great for my specific problem, but would not work if I didn't also control the HTML page I was consuming with the browser. That is why I am still interested in alternate solutions if anyone has one. Thanks.
I am working on a HTML5 application framework, run by a SAP JEE application server, build for companies and their intranet and extranet sites. It is based on the grid framework "Semantic UI" and besides that contains a lot of (also third party) Javascript.
I am currently examining a bug, where clicking a specific icon in a menu, when the page is scrolled down, makes the page somehow scroll back again upwards.
Since there is this great amount of Javascript around, I am currently struggling to find the JS code snippet, which is causing this odd behaviour.
I've read this post here, and got to know event logging in Firebug and inspecting event handlers in Chrome, but that didn't really help me.
I found out that using:
$(<my Elem>).on('click', function(event){
event.preventDefault();
})
I can prevent the scrolling, but I still didn't discover the cause of it.
Has anybody some more advice on how to find the real cause of this?
This behaviour might be caused by several different reasons. One of them that is often overlooked is links like Some JavaScript Handler.
When the JavaScript handler does not properly handle the event (e.g. by calling event.preventDefault(), the HTML link will be followed in addition to the JavaScript handler. Most browsers handle a link to an empty anchor tag # by going to the top of the page. This can easily be avoided when using an empty href attribute like <a href>Some JavaScript Handler</a>.
Imagine that there's a button on one web page (not mine) and when it's clicked it performs some
Javascript. I want to have a button on my web page that performs exactly the same. So I need to
attach all necessary js files (but first I have to find them) to my html page and sometimes add some js to my html page.
What I usually do in this case? I inspect this button html element to see if there's onclick attribute for this button. If it is, I see the function called when button is clicked and then I try to search for this function in current html page and all js files attached to page. Also I need to find all dependencies (like jQuery, fancybox etc.).
If the button doesn't have onclick attribute I have to look for direct getElementById or jQuery selector pointing to this button with rest of code there. Sometimes there's no such a selector and I have to find a nested selector - really hard and annoying thing.
Is there any better, automated way for doing things above. Ideally after selecting the element in DOM (button in this case) and pressing some magic button I will be able to see all js files involved in processing this click and also js code in html page.
It's going to involve digging no matter what you do. But Chrome's Dev Tools can help with the attached event handlers, to an extent. When you right-click an element and inspect it, on the right-hand side there's a panel showing various tabs: [Styles] [Computed] [Event Listeners] [DOM Breakpoints] [Properties]. The [Event Listeners] one shows the listeners directly attached to that element. Of course, on a site using jQuery (which is more than half the sites using JavaScript at all), looking at the handler will dump you into the jQuery event handling code, but it's a start.
Just as a side point: While it's fine to look at the source of pages for inspiration, or to see how they solved a particular problem, or what plugins they're using to get an effect, etc., I assume you're not grabbing large sections of their actual code (as opposed to libraries and plugins with liberal licenses) without their permission, which is probably not cool.
Is there a tool (or something in firebug) that will tell me what events just fired and more importantly on what elements they were bound to?
I have a number of javascript "includes", some minified, some not. I am experiencing some odd behaviour that I want to turn off, but I cannot find what is causing it.
I have a form showing in a "popup" and when I try to click on one of the input boxes, the "popup" closes, so some event bind somewhere is causing this.
The problem is, I don't know what element has this spurious event bound to it. The problem also occurs if I click anywhere inside the popup (and on the background mask that is covering the rest of the page, but that's acceptable)
I am using firefox, so anything I can type in the console is also an option. The eventys in the multiple javascript files are done in various ways, some through jquery, some using inline attributes (eg. onclick="..."), some using just javascript.
I certainly don't want to go and add some line of code to every possible event in every javascript file.
I have spent over an hour trying to hunt down this dom element and have already eliminated the obvious ones like the divs containing the popup and the body tag.
DOM modifications can be tracked down using the Break On Mutate option within Firebug. It can be activated by clicking the related button ( ) within the HTML panel. Note that the Script panel has to be enabled for this to work.
There are also several other Break On ... features, which may help you finding the right position within the code for a specific event.
Furthermore Firebug 2.0 introduced an Events side panel, which displays all events bound to the element selected within the HTML panel. If libraries like jQuery are used, it will even allow you to investigate the user-defined function wrapped by the library function in case you enable the option Show Wrapped Listeners as described in the answer to a related question.
I've got a pretty big complicated HTML5 app I'm working on (backbone, marionette, jQuery, underscore, handlebars, bootstrap, etc) and deep within the app is a modal popup with a form in it.
When the modal pops open, the first time you click on any form field the form field de-selects itself. After that first click you can use the form as normal. When the app is ultimately loaded into an iFrame in production (don't ask) the first time you click on any form field or hover over any button, the whole page scrolls down until the top of the div element the form is within inside of the modal is at the top of the page, but after it does this once, it doesn't do it again (confused yet? Yeah, it's complex and layered).
I'm at a loss for how to even begin debugging this problem (thousands of lines of code, two handfuls of libraries).
I tried these:
console.log('bound events: ', $._data(this.$el.find('#RandomFieldID')[0], 'events'));
console.dir($('#elmId').data('events'));
console.log('bound events: ', $._data($('body')[0], 'events'));
But that yielded nothing.
Since this is library upon library upon framework upon framework I'm not even sure where to begin trying to find the thing that has obviously bound itself to these fields, or even if it is the fields that are being bound to or something else entirely...
So, any suggestions on good strategies for how to debug a mysteriously bound Javascript event (with multiple JS libraries and frameworks, which can't be just commented out until the problem resolves because they are relied upon to even get the HTML to appear on the page in the first place)?
And, unfortunately I can't do a jsfiddle or something because, as I said, this is deep deep within the app and I'd basically have to re-create the app inside of JSFiddle (impossible) to link to an example (and, it's not in an external facing site, so, I can't just link to it live in production).
I'm stumped.
Here's how I do it with Chrome.
Ctrl-Shift-J to open Javascript console.
Click the little magnifying glass in bottom left, it lets you select an element with your mouse.
Click an element on your page (it will highlight as you go to it.) It will highlight in the DOM at the bottom and show a bunch of properties on the bottom right.
At the bottom right go all the way past the CSS attributes and stuff down to event listeners:
Pick the event listener you're interested in. It will show you the bound function as well as the exact line of code in what script would be executed. That should tell you what library is doing your crazy stuff.
I find the Chrome debugger to be much more powerful and fast (doesn't lag) compared to FireBug and the IE developer tools. It's highly recommended :)