Goal: Automate data backup from a third party site.
Scenario:
The data is available on a web page as a series of elements. ex:
[Data A]
[Data B]
[Data ...]
- Click on a
Dataelement.
- After a short delay, elements will be populated under the data element and a [Save] button will appear. ex:
+ [Data A]
[ ] item 1
[ ] item 2
...
[ ] item N
[Save]
- Select all
items
- Click [Save] to download.
Repeat steps 1-4 to save each Data element for a complete backup.
In synchronous psuedo code this would be:
alerts [array]
for i in alerts
click alerts[i].load
check if data ready; ready when save button appears
click select_all
click save
How can this be done in Javascript?
Got it done with a macro and Firefox console.
Solution that works:
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function backup() {
var alerts = $('.alerts');
var imax = alerts.length;
for (let i = 0; i < imax; i++) {
alerts[i].click();
await sleep(2000);
$('.ui-select-all').click();
await sleep(200);
$('#save');
await sleep(500);
}
}
backup();
Solution that may work:
JavaScript pausing execution of function to wait for user input
A recursive, callback version
If there's a succinct event based approach I'd prefer and accept that as the answer
Update: optimal solution: Event delegation allows an event listener to be attached to a dynamically created element, even if that element does not yet exist. The event listener can call an anonymous function after the sub element is created.
https://davidwalsh.name/event-delegate
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events