Safari pause until there is change in html div class

[mikeytt]

I am trying to automate the uploading of files to a web page. The way the page is designed means that when an file is has finished uploading, the only indication that it has finished is with the appearance/change of a div-class in the html.

In the html before the upload

After the upload completes it adds "HAS IMAGE" and changes to:

What I want to be able to do is to run a PAUSE UNTIL the new div class appears so I know I can continue with the rest of the macro.

I did see this solution but couldn't work out out to convert it to work in this situtation:

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 de…

Any help greatly appreciated

[hello]

while someone more knowledgeable appears, you can use a Pause Until: condition Found Image:

[mikeytt]

Thank you for the suggestion, however there is no unique image element on the page that appears after each upload so unfortunately that method would not work in this scenario.

What I have managed to do as a workaround for the time being is via an applescript (which i understand!!), but I would prefer the javascript option as it is a much cleaner method by the looks of it.

The script looks for the element using a javascript command. If the element is not on the page then nothing is returned, the script waits 3 seconds, then tries again, giving up after 20 loops. If the element appears on the page then the script returns true and finishes.

[JMichaelTX]

@mikeytt

What I want to be able to do is to run a PAUSE UNTIL the new div class appears so I know I can continue with the rest of the macro.

I did see this solution but couldn't work out out to convert it to work in this situtation:

What is the issue?
If you will post the HTML code (in a Code Block) around the section where the new <civ> appears, I will take a look at it.
Be sure to identify the the new <civ>.

[mikeytt]

Actually in the end I realized I could tweak the applescript version (removing the repeat part) and use it in a Pause Until statement

tell application "Safari"
tell its front document
set thereturn to (do JavaScript "document.getElementsByClassName('single-upload with-uploader has-image')[0].innerHTML;")
try
if thereturn ≠ "" then return true
on error
delay 3
end try
end tell
end tell