What could be blocking my javascript click() function? - javascript

I am attempting to write a script to automate some tasks on a third party site. The very first step is simply clicking a div on the nav, but document.getElementById('myId').click() does nothing.
In my searching I found this answer that fully simulates a mouse click: Simulating a mousedown, click, mouseup sequence in Tampermonkey?
However, that also does not work. I did notice that there's a class added when hovering, and the script successfully simulates that. And obviously physically clicking works fine. I'm not sure what else I could be missing
Edit: It turns out that the clicking was just fine, but the site is actually checking pieces of the event such as the coordinates, which is why it appeared to not be functioning properly

If I understand correctly, what you want is this:
document.getElementById('myId').addEventListener('click', myFunction);
This will run the function myFunction() when the element with the ID of "#myId" is clicked.
Hope this helps!
P.S. If this doesn't work, I suggest using Shashank Bhatt's suggestion of checking pointer-events.

Related

directly spot what line of code is being executed in certain event

Is there any way to directly spot what line of code is being executed (javascript) when clicking a button in a webpage or scrolling down .. etc?
For example: Not onMouseClick function when clicking a button and doing debug via browser in the same time but some function like $('#xx').click() instead.
If so, How?
Thanks in advance.
I've always battled to find this feature in Chrome, I'm sure it's in there, somewhere but no one seems to be able to find it. In Firefox is quite easy: Inspecting an element will show if it has an event attached, and will even show the code. Clicking the arrow next to the file and line number will jump to that location inside the debugger.

Trying to execute a event with javascript on an <a> element

The reason i need to execute the event behind a a element is because i'm working on some kind of autologin, however one of the sites it has to work with is https://create.kahoot.it/#login?a=1&next= the problem is, their login uses an a element for the sign in button, however when i select that element and execute a .click on it it simply doesn't do the same thing as to what happens when a user clicks on it.
I hope someone could answer this question since i couldn't find anything close to this issue anywhere.
Also for the convenience of whoever helps, to select the element from the console you could use:
document.getElementById('sign-in').getElementsByTagName('a')[1];
The way to solve this issue has to be either javascript or JQuery, preferably just plain javascript.
Try this:
document.getElementsByClassName('btn register')[0].click();
This basically is selecting the anchor by its class name and fire click event manually.
UPDATE:
Alright I did some more research and it seems there is another way of triggering that click handler and it is to set href on the window:
var a = document.getElementsByClassName('btn register')[1];
window.location.href = a.href;
I've tried it and seems it is doing the job.

Selenium click event does not trigger angularjs event

I have this page where an angularjs modal-content popup, in there i fill up some fields and click save. After save is initiated, popup should dissapear an event should happen and so on.
My selenium test does all that perfectly except that when it clicks on the save button, popup dissapears but no event is triggered or saved so when i open up the window again everything is empty. I've tried stuff that i know with selenium and it still doesn't work. Can anyone help me out here?
This is the save button:
<button class="save-button" data-ng-click="onSettingsSave()" ng-hide="readOnlyMode || !canSave()">Save</button>
Stuff i've tried:
var saveButton = driver.FindElement(By.CssSelector("button.save-button"));
saveButton.Click();
var saveButton = driver.FindElement(By.XPath(saveXpath));
saveButton.SendKeys(Keys.Enter);
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].focus();",saveButton);
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].click();",saveButton );
Try force clicking the element using pure JS:
driver.execute_script("arguments[0].click();", yourElement)
You can't use $ as a shortcut for document.querySelector in a script like that.
driver.ExecuteScript("document.querySelector('#base_element_id div input').click()");
Also this probably won't trigger an onClick in react / angular
Like the OP I have tried everything I can think of to get Selenium to trigger client side javascript events. I've seen some posts across the web of people having partial success where it randomly works; in my case it never works.
Selenium does successfully trigger the browsers primary click action, be it checking a checkbox or pressing a button, but it does not trigger any attached client side javascript events.
Both the native element.Click() method in selenium, and the abstracted ExecuteScript with arguments method of clicking as suggested by #csaladenes have the same result.
The only solution I have found so far is to use pure JS through that same ExecuteScript method; basically avoid the overload with params selenium can embed.
driver.ExecuteScript("$('#base_element_id div input').click()");
In my case I am using the JQuery that is already on my page to make locating the element easier, but any form of truly pure JS should do the same thing.
EDIT:
After some additional testing, it turns out that my "fix" really did nothing. However, performing the same click more than once did cause the client side events to fire.
In my case I am checking a checkbox, so I needed to perform the click 3 times to leave it in the correct state and still have the client side events run.
This is very odd, and definitely needs some more work to figure out where the issue is at that makes this necessary.
Edit 2:
I think I have finally found a solution, and at least partial answer, that does not make me cringe.
It seems as though Selenium has an issue where sometimes it "loses" the focus of the browser. Considering how consistent and repeatable my issue is I don't think focus is the only problem in my case, however the solution works pretty well.
I was able to get the immediate parent of my checkbox, which was a div element, click that first to return focus to the page, then click the checkbox. After that sequence of events the client side events worked correctly.

Clicking on Links and Buttons shows focus outline

I am trying to fix a problem in an existing application that uses jQuery. The issue is that whenever I click on any link or button on the page, I see that element take a focus outline (e.g. blue glow in case of Chrome/Safari), as if that element has focus. I have to get rid of that outline after click. I do not think this is a default behavior since I am not able to replicate it on any other site. For that matter, I am not able to replicate it on a simple HTML page that has just one link.
I can not use outline:none
since I have to show the outline in case of focus using tab keys. I have tried using document.activeElement.blur() and $(element).blur() to no luck since some of the event handlers are using event.stopPropagation() and I can not go and change the code for every event handler.
Can anyone please help me with this? What could be the reason a link is retaining focus after clicking? There is nowhere in the code this is being done programmatically since its happening on every single link and button and also some li elements.
Appreciate your help in this regard.
I think that's the default behavior of Chrome and safari.
If you visit this page https://www.linkedin.com/ and click on the Email address and password field then you will see the same thing which is happening with you. I hope I am not wrong..
you can give outline:none;
for the focus/blur on the element: you just add the class .outlineborder
.outline{
outline:inherit !important;
}
$('.button').on('blur').... $(this).addClass('outline');

How to register jQuery click handler inline?

The CMS I'm using (Invision Power Board) has nifty Sign In links that when clicked open a dialog instead of changing the page. I found an example of how to create such a link:
...
The problem is, every time the mouse is moved over the link, the click handler is added. So if I move my mouse over the link ten times and then click it, the Sign In dialog comes up ten times.
I tried changing it to:
...
But that doesn't work. There aren't any errors in the console, but nothing happens when the link is clicked.
I was able to get this working, but it required some non-inline code:
<script type="text/javascript">jQuery("a.signIn").on("click", ipb.global.inlineSignin);</script>
But that's a problem, because I may have sign in links on different sections of pages (that are generated independently) and if I have the above snippet more than once, then I'm back to the same problem.
Is there any way to make this click handler work using only inline code?
You need to invoke the method
...

Categories