What Do I Need to Learn to "Push a "Button" on a Safari Page

I must start this question by stating clearly that I know NOTHING about Web pages or JavaScript or HTML or any of that stuff so please bear with me if I don't ask the question well.

Screenshot

Referring to the screenshot above, I need to click on the "Copy to clipboard" button that is green and then (after pausing for clipboard to change) click on the "Copy to clipboard" button that is white (if it is present which it may or may not be). I can do this quite well using found images and move/click mouse on found image (I store the images in files *.png). However, when I move to a larger monitor this sometimes stops working and I need to fiddle with fuzziness etc... which seems to do the trick sometimes but not always.

Having to fiddle with the macro settings each time I change monitor is a pain and so I would like to have KM look for and push "the green copy button" and then the "white copy button" without resorting to finding images.

I've tried all the Action options that I can see that seem possibly relevant (e.g., Set Safari checkbox, Set Safari radio button etc) but the "safari dropdown list" is empty and so I don't have any choices to do actions on. I have tried looking at the source data for the web page but it is gibberish to me...

So I'm channeling Donald Rumsfeld's unknown unkowns... "What do I need to learn... HTML? JavaScript? Hieroglyphics? in order to be able to accomplish the selection and pushing of buttons on a Safari page?

Thanks for any help and suggestions

Dave

3 Likes

For clicking things on web pages my go to is to use JavaScript. You’ll need to learn how to use JavaScripts querySelector. Once you have the correct element selected you can run a JS click function on it.

It might look something like this:

document.querySelector('#copy-button').click()

You’ll want to learn how to use the browser developer tools to look at and determine how to select the correct element.

Here is an example from a macro that I use:

image

2 Likes

Hey Dave,

The first thing you do is scope out the Click Safari Link action:

Go to the page you're working with in Safari, insert one of these actions in your working macro, and click the 'Safari v' pop-up menu of links.

Try to find the xPath for your link.

The "buttons" on the page you show appear to be links rather than radio buttons (for which there is a different action in KM).

Set Safari Radio Button action

Keyboard Maestro cannot always find the links you want for you, because the coding styles of web pages are many and varied – but that's the place to start.

If you can't get that to work then Mikes JavaScript approach is usually the way to go.

-Chris

2 Likes

Thanks much. This taught me a lot... including "enable Allow JavaScript for Apple Events. " (which comes with some pretty scary warnings from OS) and I've had success with "Click Safari Link" on a wikipedia page. However, as you suspected Chris, the page I want to work on shows "no links found" for any of the Safari actions. So I'm off to querySeletor/Java school :slightly_smiling_face: as Mike suggested.

1 Like

I'm not too surprised by that. Most pages don't use links for clicking actions. When I'm headed down the click an HTML element road, I use a quick trick in Firefox to confirm that it will even work as I hope it will.

  1. Right click on element
  2. "Inspect"
  3. Right click on element in inspector console
  4. "Use in Console"
  5. type ".click()" to the temp variable added to the javascript console and hit return to execute the javascript you just typed.

If you selected the correct element that does the action then it should do the thing.

:movie_camera: :desktop_computer:

Example video of above steps using this wiki page

In this example I'm using JavaScript to click the reply button which opens the forum reply interface.

example-video-use-element-in-console2

Firefox also calls out which elements have an event listener tied to them so it makes it easier to figure out which element needs to have .click() called on it.

Once you confirm that you can call click on the element and have it do the thing, then you can figure out how to select it using the querySelector to get the element programatically.

2 Likes

Pretty silly warnings...

As Peter says – if someone has enough control over your system to exploit a web browser's JavaScript from Apple Events capability – you have much more serious things to worry about, because they already own you.

2 Likes

Slick. I don't think either Safari or Google Chrome will do that.

You have to grab the references manually.

I thought it might be useful to let you know the outcome, so that anyone who wants to copy information from a findmypast.com page can do so using this macro.

Most importantly I want to say a HUGE THANK YOU to @MikeTheClicker for all his help and encouragement behind the scenes helping me to get to a working macro.

This will only be of use to subscribers of findmypast, but will copy the transcript data to a clipboard for subsequent use in citations.


Capture data from FindMyPast.kmmacros (19 KB)

Macro-Image

2 Likes

Very cool! So glad you were able to get it all working. It's so exciting to get macros like this put together. I'm glad I was able to help. Look forward to seeing you around the forum in the future.

1 Like