CODEWITHSUNDEEP
javascriptcefsharp
kpg
kpg

Reputation: 661

how to simulate a true click on input element in javascript

Using the CefSharp browser in a .NET project to do a website automation project, but this is a general javascript question I suspect.

To automate the website I need to locate an input element and simulate the user clicking on and then filling a field, then clicking and filling another. The click - focus - blur - sequence is important because this particular site listens to the blur event to perform some AJAX action.

My problem is I can't get the input field's blur event to fire when I programmatically 'click' on the next field.

Essentially I loop trough the input fields and do this to each:

el.click(); //click it   
el.focus(); //just trying to force focus
el.value = 'sometext'; //change it
...and loop to next field

My goal is that on the second pass the blur event of the first field will fire, but it does not.

But I can make it happen with this:

var ev=document.createEvent('HTMLEvents');
ev.initEvent('blur', false, true);
el.dispatchEvent(ev);

The problem with that is I happen to have special knowledge about this site and know the blur needs to happen, but I want a general solution that will fire all the normal events - focus, blur, change, whatever, I thought el.click(); would do it, but apparently not.

EDIT:

This looked promising, but it also does not fire the events. 

browser.GetBrowser().GetHost().SendMouseClickEvent(x, y,   MouseButtonType.Left, false, 1, CefEventFlags.None);
System.Threading.Thread.Sleep(100);
browser.GetBrowser().GetHost().SendMouseClickEvent(x, y, MouseButtonType.Left, true, 1, CefEventFlags.None);

I looked at puppeteer, it seems the .NET wrapper requires > framework 4.0, my requirement is 4.0, and selenium seems to be headless, I need a visible browser. More research is indicated but I am generally happy with CefSharp and what it can do.

I know I can 'force' the events, so focus, change, blur would likely cover everything, mouseup/down/click, keyup,press,down are also possible I suppose.

Upvotes: 2

Views: 1971

Answers (2)

Takashi Harano
Takashi Harano

Reputation: 294

Here is a library for debugging and auto testing. https://debugjs.net/

This library has original script interpreter and you can execute auto testing scenario.

Here is a sample script. You can try this on the above demo site. The console window on lower right is the library's window. Click TOOL -> BAT and input the following script, and click [ RUN ].

point move #text1
wait 300
point click
wait 250
point text "abcdefg"
wait 500
point move #text2
wait 300
point click
wait 250
point text "1234567890"
wait 500
point init

This "point click" command simulates the real click behavior. So this command will fire not only click event, but also mousedown, mouseup, focus, blur, etc.

Upvotes: 3

kpg
kpg

Reputation: 661

I very much enjoyed #Takashi's code; the mousedown and mouseup events fired in response to the 'point click' command worked when debug.js was added to the site, but it still did not work when ported to my CefSharp project.

As it turn out the stupidly correct answer is the CefSharp browser needs to have focus before any element can get focus. That's it. With the browser focused, el.focus(); actually sets focus to the HTML element and the blur event is raised in response. No need to invoke click or mouse events at all.

Upvotes: 2

Related Questions