Macro: Pause Until Web Page Element Exists [Example]

Macro Library
, ,
1

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

6 Likes
2

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

3

This doesn't seem to work though?

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

image
image.png726×1046 86.2 KB

4

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.

5

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

Chrome: v75.0.377
Mac 10.13.6

6

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

7

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

8

Oh, Sorry about that.

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

It can open the page using Google Chrome but doesn't detect the element in Chrome – it works perfectly with Safari.

9

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.

10

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.

11

I'll try both, thanks.

12

This Macro is great. Works ok most of time!

Recently I found that this macro doesn't work on my one of the pages I worked on. I found that page has an 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?

Thanks!

13

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.

14

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:

15

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

16

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

1 Like
17

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.

18

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.

2 Likes
19

Is this macro working for anyone else?

For me it just gets caught looping through the pause for 0.1 sec -> check for selector step, even after the page and selector have clearly loaded.

I've tested with several different elements on several different pages, and in both Chrome and Safari.

20

Example page and the selector you're looking for?