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 ~~~

DOWNLOAD:

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.


ReleaseNotes

Author.@JMichaelTX

PURPOSE:

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

REQUIRES:

  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.

MACRO SETUP

  • 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.
    .
  • REVIEW/CHANGE THE FOLLOWING MACRO ACTIONS:
    (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

USER SETTINGS:

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

ACTION COLOR CODES

  • 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

USE AT YOUR OWN RISK

  • 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.

image

2 Likes

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:

image

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 https://finance.yahoo.com/quote/BASFY 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:
h1.D\\(ib\\)

OR
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.