Macro: Pause Until Web Page Element Exists [Example]

Continuing the discussion from How can I check if a form field exists?:

Use Case

  • Sometimes you need to open a web page URL, but then pause until a certain HTML element is loaded, that you want to use.
  • The below macro does exactly that.
  • It uses the JavaScript querySelector method that uses CSS selectors to define the target Element
    • Using querySelector is much easier than using XPath, but this same approach could be used with XPath (requires modification to the JavaScript)
  • The best way to determine the HTML Element and the required CSS Selector is to open the web page, and right-click on the target UI element, and select "inspect".
    • You can use either Chrome or Safari to do this, but I recommend Chrome, even if ultimately you will be using Safari in your workflow.
    • If you need help with this, post a new topic with the URL and a screen shot of the UI element you want to target.

MACRO:   Pause Until Web Page Element Exists [Example]

~~~ VER: 1.0    2019-02-26 ~~~


Pause Until Web Page Element Exists [Example].kmmacros (10 KB)
Note: This Macro was uploaded in a DISABLED state. You must enable before it can be triggered.




  • Pause Macro Until Web Page Element Exists
    • Element defined by querySelector CSS


  1. KM 8.2+
  2. macOS 10.11.6 (El Capitan)
  • KM 8 Requires Yosemite or later, so this macro will probably run on Yosemite, but I make no guarantees. :wink:

NOTICE: This macro/script is just an Example

  • It has had very limited testing.
  • You need to test further before using in a production environment.
  • It does not have extensive error checking/handling.
  • It may not be complete. It is provided as an example to show you one approach to solving a problem.

How To Use

  1. Make changes to Macro as stated in the "Macro Setup" below
  2. Trigger this macro.
    • It will then open the web page and pause until the HTML element is found.
    • The Pause Until (While Action) will auto-cancel if not found within one minute.


  • Carefully review the Release Notes and the Macro Actions
    • Make sure you understand what the Macro will do.
    • You are responsible for running the Macro, not me. ??
  1. Assign a Trigger to this maro..
  2. Move this macro to a Macro Group that is only Active when you need this Macro.
  3. ENABLE this Macro.
    (all shown in the magenta color)
    • Open URL
    • Set CSS Selector
    • If desired, change the TimeOut of the "Pause Until" While Action

TAGS: @WebScrape @UI @Browser @JavaScript @PauseUntil


  • Any Action in magenta color is designed to be changed by end-user


  • To facilitate the reading, customizing, and maintenance of this macro,
    key Actions are colored as follows:
  • GREEN -- Key Comments designed to highlight main sections of macro
  • MAGENTA -- Actions designed to be customized by user
  • YELLOW -- Primary Actions (usually the main purpose of the macro)
  • ORANGE -- Actions that permanently destroy Variables or Clipboards,
    OR IF/THEN and PAUSE Actions


  • While I have given this limited testing, and to the best of my knowledge will do no harm, I cannot guarantee it.
  • If you have any doubts or questions:
    • Ask first
    • Turn on the KM Debugger from the KM Status Menu, and step through the macro, making sure you understand what it is doing with each Action.



Wow. This seems like something that might fit my needs.

I have a calendar that shows available dates on refresh (with the resend form data thing)

I want to be able to refresh page every second and then if element exists, want to click it, if not then keep refreshing page.

Do you think this is possible?

Thanks in anticipation

This doesn't seem to work though?

Works with Safari after enabling develop "Allow java from apple events" but not chrome?

Works for me:


Running Google Chrome 74.0.3729.169 (3729.169) on macOS 10.14.5.

What do you mean by "doesn't seem to work though"?
What happens?
Please provide details.

Do I need to enable anything to make it work with chrome? (Works with Safari)

Chrome: v75.0.377
Mac 10.13.6

Do you think something like this is possible? (I mean I can do it with Safari for now)

To provide you with more help, I need the answers to these:

Oh, Sorry about that.

The notification doesn't show up, and after some time the macro timeouts.

It can open the page using chrome but doesn't detect the element on chrome.
But works perfectly on Safari.

Is h1 a reliable CSS_Selector for the URL using Safari?

I have had inconsistent results using h1 as the Selector. The action "PAUSE Until HTML Element is Present in FrontMost Web Page" sometimes times out. The problem could be elsewhere, but my confidence in the Selector is my initial suspect.

Yes, although with such a common tag as h1 I would probably add to it with one of these:

div#mrt-node-Lead-3-QuoteHeader h1.D\\(ib\\)

I doubt that the CSS_Selector has anything to do with the timeout. Most likely due to something else, like slow Internet, slow web server, etc.
I would just increase the timeout to the max time you have observed it takes to load the page.

I'll try both, thanks.

This Macro is great. Worked ok most of time!
Recently I found that this macro doesn't work on my one of my page that I worked on. I found that page has iframe that may cause this macro stops working. Even though the element I am waiting for is NOT inside of that iframe. I posted here: Difficulty focus/click an input textbox in AWS cloudwatch log webpage
Anyone has experienced on such issue? Any alternative way to wait an element exists on webpage that has iframe?

iframes are NOT accessible via JavaScript in Browser.
AFAIK, iframe should not cause a problem if you are NOT trying to access it.
Have you tested your JavaScript in the Chrome JavaScript console?

Sometimes complicated web pages require a bit of trial-and-error when using JavaScript.
The best way way is to test in the Chrome JavaScript console.

tried in chrome console too, not able to find the element. even though the element is not inside the iframe. really not sure why :frowning:

That means the CSS for the querySelector is not correct.
Keep testing.

Sorry I took it back, after dump the whole html code and check, the element does inside another iframe.

1 Like

This macro works for the frontmost web page, is it possible to wait element on the specific tab of the browser instead of the front most page? This would be super helpful for some slow loading webpages so that we can do something else by switch to other apps and don't have to wait on the browser.

Since this macro uses the KM JavaScript in Front Browser, and KM does not support JavaScript in browser pages/windows that are NOT frontmost, it would require a script (AppleScript or JXA) to address non-front tabs.

This is doable, but complex, and beyond the scope of this macro.
So it would be a task that the user would need to do.

1 Like