Web page radio button choices not keyboard-focusable: how to "click" one?

(New to KBM a few macro-creating-intense days ago)

Task: automate downloading recent transactions for import into a personal finance application.

Web page has four radio buttons vertically stacked -- see screenshot below. The first one is the default, having a filled-in circle to the left of its label. I want to "click" the second one. I can find no way to focus any of them with the keyboard, and indeed Google Chrome's element inspector says they are not keyboard-focusable.

I hate to "click" based on window-relative mouse coordinates that change when the window is resized.

So far in my work with KBM I haven't gotten into Javascript/DOM/XPATH at all, but I'm willing to despite being pretty green in that area. Using Chrome's element inspector, I surmised that each radio button is a row in a table. For the one that I want to "click", I copied the info shown below.

I'd appreciate any tips to get me started, or even a solution! Thanks...

element:
<input id="ctlDownloadTypeList_1" type="radio" name="ctlDownloadTypeList" value="qfx" style="position: absolute; opacity: 0;" class="">
selector:
#ctlDownloadTypeList_1
JS path:
document.querySelector("#ctlDownloadTypeList_1")
XPath:
//*[@id="ctlDownloadTypeList_1"]
full XPath:
/html/body/form/div[3]/div[1]/div/div/div/div[2]/div/div/div/div/div[2]/div[1]/div[4]/div[2]/div/table/tbody/tr[2]/td/div/input

I'm pretty hopeless messing with JS etc so I would just do a simple click relative to the corner of a found image.

The image I've asked KM to look for is this:

2023-04-17_15-09-37

And the result of running my macro is this:

2023-04-17_15-10-40

You can see that the mouse pointer is positioned directly over the second radio button - and it will always end up there because I've used relative positioning.

Anyway, here's the macro I used to achieve this:

Download Macro(s): Test Click Radio Button.kmmacros (58 KB)

Macro-Image

Keyboard Maestro Export

Macro-Notes
  • Macros are always disabled when imported into the Keyboard Maestro Editor.
    • The user must ensure the macro is enabled.
    • The user must also ensure the macro's parent macro-group is enabled.
System Information
  • macOS 10.14.6
  • Keyboard Maestro v10.2

Because it's unlikely that the image I've used from your post will match the one you actually see on your screen in the browser, you'll need to recapture the image yourself and possibly fine-tune the relative mouse positions.

2 Likes

click relative to the corner of a found image

Great idea! Pending any tidier solutions it'll be what I use. Thanks--

1 Like

If you've got your JS Path right then something like this in an Execute a JavaScript in Front Browser action:

document.querySelector("#ctlDownloadTypeList_1").click()

1 Like

I guess I don't have the JS Path right, because the action had no visible effect. :frowning:

The element on which it's based is embedded in an HTML td (table data) element within a tr (table row) element. The "input" tag is suggestive, but no joy.

You're in Google Chrome?

Did you turn on Allow JavaScript via Apple Events?

View > Developer > Allow JavaScript via Apple Events

Yes, I have had Allow JavaScript from Apple Events turned on since I encountered that advice here a few days ago.

I'm out of ideas then...

Any ideas on how to go about discovering what the applicable JS Path is for this radio button -- or whatever it is?