08: Automating Chrome with AutoHotkey: How to handle EventListeners & custom edit fields

Automating Chrome with AutoHotkeyAutomating Chrome with AutoHotkey: handle EventListeners & custom edit fields


donate to GeekDudeIf you’re loving this, please consider donating to GeekDude!

Automating Chrome with AutoHotkey Script to Handle EventListeners & custom edit fields

Notes on handle EventListeners & custom edit fields

00:09     When web scraping, often there will be buttons I can’t press, text that doesn’t get “acknowledged” that it has been entered, etc.

The site we’re working with is gethifi.com/tools/regex .  You don’t need to know RegEx however you can learn about Regular Expressions here.

01:32     The way this page is updating when you type is through an EventListener.

01:35     If you look in the Chrome developer tool, and click on any element you can go to the Event Listeners tab on the right near the top and see what listeners the Java Script has for that Element.

01:57     For this input box you can see it has listeners for change, keyup, load, message, mouseup, and unload.

02:06     Change shows the content has somehow changed, keyup registers after you press a key, it’s the last event a page gets.  Mouseup after you’ve clicked an element. Any of these events on this page, cause it to do that dynamic change.

02:35     When you’re tying normally, you press a key and the action will trigger an event.  Those kind of events don’t fire when you change an input box value when you change it through: Chrome.ahk, JavaScript, IE via COM, etc.

03:02     We’re going to look how to trigger those events with Chrome.ahk code.  Let’s start by connecting to that page instance, then run an Alert box to make sure we have the right page.  We had the wrong one because GeekDude has spelled Evaluate wrong…

03:51     What we want to do first is set the contents of the text box.  You’ve seen how to set text in Chrome in previous videos, but let’s do it again.  Once you’ve inspected that element go to copy, JS path and this will put a little JavaScript code in your clipboard that can be used to target that element

04:19     The double quotes will conflict with AutoHotkey, so put the JavaScript code into a variable definition.  Also remember the percent signs will want to reference a variable.

js=document.querySelector(“#regex”).value = ‘.’

page.Evaluate(js)

05:20     Set the value just to a dot.  When done manually it would make all the text highlighted in yellow however that doesn’t happen when we set it programmatically.  You see the dot there, but no matches are found.  The second you click in it, then it activates and turns green / yellow.

05:38     So we’re going to send a click event to see if that will trigger it

05:50     We’re moving the JavaScript script code into a continuation section .  This is a feature which allows you to put multiple lines of text into a variable.  This let’s us run code as if we run multiple lines in the console by hitting shift+enter to get another line.

06:21     Alternatively you could call page.Evaluate multiple times, however that will execute slower.  It’s better to group the JavaScript code together when you can.

06:42     Now we’re going to try adding .click()

js=

(

document.querySelector(“#regex”).value = ‘.’

document.querySelector(“#regex”).click()

)

page.Evaluate(js)

 

07:00     this should invoke the button’s action.  Here we’re trying to invoke the “click” action.  But you’ll see when we run this, it doesn’t actually trigger the action.

07:33     So, instead of clicking the element, you have to create and send a “click event”.  That’s done using the .dispatchEvent() function.

08:00     The dispatchEvent() function takes a parameter of new MouseEvent(“mouseup“).  Make sure you match event “mouseup” exactly with what you see in the EventListener view from Chrome Dev tools.  It is exactly what the page is “listening” for.  You could send MouseEvent with lots of different text as a parameter however, unless the page is listening for that exact text, it won’t matter!

08:34     Now when we run it, you get the highlighting.

08:53     On this page, the MouseEvent isn’t the only event that will do that.  We have keyboard events like “keyup”

09:06     Instead of sending a MouseEvent, let’s send a KeyboardEvent() and send “keyup”.  Make sure the quoted part matches exactly.

09:44     Neither MouseEvent nor KeyboardEvent is listed anywhere in the Dev tools or on that page.  You need to be aware of it.  Mozilla docs are a good source as W3 schools.

js=

(

document.querySelector(“#regex”).value = ‘.’

document.querySelector(“#regex”).dispatchEvent(new KeyboardEvent(“keyup”))

)

page.Evaluate(js)

10:35     There are mouse events, keyboard events, and then some are just “events”.  Some pages, you can just specify Event() and then put keyboardEvent() or mouseEvent() names in there and it might work.  Possibly other types of events.

11:38     What about changing the focus?  The change event, fires when you focus on a page and then defocus it.

11:46     There was also a “change” event on the page.  Try out change event and see if it works!

js=

(

document.querySelector(“#regex”).value = ‘.’

document.querySelector(“#regex”).dispatchEvent(new Event(“change”))

)

page.Evaluate(js)

12:35     Sending the change focus seemed to work.

13:01     There are a lot of events that can happen and every page is different!  keypress, mousepress,etc.

13:35     Not all input boxes respond to events.

13:37     We’ve got another RegEx testing site:  https://regex101.com

14:03     When you inspect element on the field, there’s not even an “input” element there to target.  So what do you do?  From previous experience, CodeMirror is a “plugin” that  a lot of developers use for make text editors in JavaScript that have text / syntax highlighting.

14:59     So when you’re working with something like CodeMirror or Ace.  You need to learn to speak the same “language” as that plugin.  “how do I set text of an Ace box” or “how do I set the text of codemirror text box?”

15:26     lets browse through their commands manual.  You want to change the text in the box.  Search for text.  Marktext, setText, doc.setValue.  So many different terms, you’ll have to just try a few.

16:21     setValue is the CodeMirror way but what is “doc”?  From prior experience, (like Ace), doc is an object that conceptually presents the text box.  So it isn’t something you’ll see on your page (no elements) its more abstract.  You can get it  “Get CodeMirror from element on page“.  Stackoverflow is really helpful.  In this case “editor” is same as “.doc” from CodeMirror.  Editor

Try document.querySelector(‘.CodeMirror’).CodeMirror in the console and you’ll see it does return something (but what?).

Let’s drop the .CodeMirror

document.querySelector(‘.CodeMirror’)

you can see it is giving what looks like HTML from CodeMirror.

18:09     So let’s try the setValue (notice Chrome dev tool auto-completes it).

document.querySelector(‘.CodeMirror’).CodeMirror.setValue(“hello”)

18:24     If you notice, you’ll see the text did get put into the edit field on the page and in the top it switched to “processing” for a match.  But that’s just because “hello” isn’t in our text.   When we change it to “.”, we see it updates

18:44     So let’s take that code we’ve prototyped in Chrome and put it into AutoHotkey, we can see it manipulate the RegEx101 site.

19:27     If you want to set the value to be a variable, that will work sometimes, however if there are quotes, or other special characters, it will cause an error.  In Chrome.ahk & JavaScript.

20:47     The way to avoid this is to run it through the Chrome.Jxon_Dump() function

21:36     Run the somevar throught he function

somevar = he”l’lo

escaped:=Chrome.Jxon_Dump(somevar)

MsgBox % escaped

21:50     You’ll see the Jxon_Dump function is escaping special characters.

Now let’s add it to our AutoHotkey code.  You’ll want to remove the quotes around the new variable because they are now within our variable.

document.querySelector(‘.CodeMirror’).CodeMirror.setValue(%escaped%)

22:43     CodeMirror is just one of those plugins.

23:20     One way to tell you’ll need a different approach is that when you go to inspect the element, if you don’t see an “input” tag or “text area” that’s a good hint they’re using a custom library.

23:57     On HiFi it shows <input type=”text” …  There are other types like email, number, but it is the input tag that is the standard tag for that kind of box.   If you don’t find one of those, you might be needing this second approach.

24:29     You might need to look “further up the elbow” on the code (so not right where you’re inspecting).    Another clue is you can see “CodeMirror” littered throughout the code.

24:47     You can also see by clicking the source tab in Chrome Dev Tools, you might see it listed there as a script.

25:21     On p.ahk.script.org you’ll see divs everywhere.  When you inspect the source, you ‘ll see ace.css, ace.js, etc.

25:45     By looking at classes, and sometimes sources, you’ll be able to track down what is being used.  It’s not always obvious what’s being used.

26:22     On Wikipedia you can see a lot more options for JavaScript-based source code editors.  There are a lot more…

Ace, CodeMirror, CodeAnywhere, CodeJar, Monaco Editor, and these are just the ones for displaying highlighting for programming code.   Some websites will have custom drop-down boxes, custom everything…  And so trying to find the libraries they’re using and look at the documentation for those libraries can sometimes be more effective than trying to interact with the page directly.

27:27     When I first started learning Object Oriented Programming, I started with web scraping.  Later I learned Excel, Outlook, etc.  I didn’t realize how much easier it would be for excel because, when you learn it once in Excel, it is the same across most versions of Excel.  Whereas everybody develops web pages differently.  The possibilities are endless!

Comments are closed.