Waiting till click loads div before continuing

Question

So in the UK, amazon doesnt allow you to get a list of all the things you have brought and you need to go to orders and down load individual invoices. I have written the proof of concept, which when on the orders page, you can paste into chromes console and it will go through and download each invoice on the page.

Main problem I have found is, the invoice div and pdf href is hidden (i have no idea where) on initial load.

The div will appear and remain once clicked, but the pdf href will only remain when the pop up box is visible. it takes a little time to load the popup box and the with the pdf href.

I have got it working for a single page of orders (I having started working on, going to the next page yet) they all download fine besides the first order in the list it seems.

I have a real hard time getting my head around promises but found a helpful suggestion from this: Wait until flag=true

Still don't full understand how it works.

Anyway here is the code:

const boxgroup = Array.from(document.querySelectorAll("div.a-box-group.order.js-order-card"))//each oders main container
const reg = new RegExp (".pdf","gi")
const hiddengroup = Array.from(document.querySelectorAll(".a-popover.a-popover-no-header.a-declarative.a-arrow-bottom"))//main div of the hidden items in the pop up box. this only exsists onces the button has been clicked
const close = Array.from(document.querySelectorAll(".a-button-close.a-declarative"))
const interval = 2000; // how much time should the delay between two iterations be (in milliseconds)?
let finalGroup = addToEnd(boxgroup)//I thought that if the first item doesnt download and the next did, add the first to the end would do the trick?

//activate(boxgroup);


var promise = Promise.resolve();
promise.then(function (){
    activate(boxgroup);//clicks all the invoice buttons to reveal the hidden divs
    return new Promise(function(resolve){
        setTimeout(resolve,interval);
    })
})
promise.then(function (){
    finalGroup.forEach(function (box,index){
        promise = promise.then(function () {
            console.log(index)//order number (0 is the first order on the page)
          press(box)//clicks each box
          console.log(itemName(index))//logs item name
          return new Promise(function (resolve) {
            setTimeout(resolve, interval);
          });
        });
        promise = promise.then(function () {
            try{
          console.log(hiddengroup[boxgroup,index].getAttribute("id"))//logs hidden div number (should be one more than the order number )
            }catch(err){console.log(err)}
          download(hiddengroup[boxgroup,index]);//opens all hrefs with a pdf in the name.
          return new Promise(function (resolve) {
            setTimeout(resolve, interval);
          });
        });
      });
})


promise.then(function () {
  console.log('complete.');//just so I know it has gotten to the end
});



function press (box){//the particular div that is the invoice "button" although its not a button
    let item = box.children[0].children[0].children[0].children[0].children[1].children[1].children[0].children[2].children[0]
item.click()
}


function download (hiddengroup){
    let pop = hiddengroup.querySelectorAll(".a-link-normal")//div that has hrefs
    var promise = Promise.resolve();
pop.forEach(function (p) {
  promise = promise.then(function () {
    let href = p.getAttribute("href");
    if(href.match(reg)!=null){//finds pdfs
    window.open(href)//opens
    }
    })
    return new Promise(function (resolve) {
      setTimeout(resolve, interval);
    });
  });
}


function activate (boxgroup){//wrote this in hopes it would slow down the inital click through enough to get the first order downloaded... it did not
    var promise = Promise.resolve();
boxgroup.forEach(function (b,index) {
  promise = promise.then(function () {
    press(b)
    })
    return new Promise(function (resolve) {
      setTimeout(resolve, interval);
    });
  });

}

function itemName (num){//location of the order item name
    let granparent = boxgroup[num];
  let parent = granparent.querySelectorAll(".a-fixed-left-grid-col.a-col-right")[0];
  let item = parent.querySelectorAll(".a-link-normal")[0]
  let itemName = item.innerHTML
return itemName
}

function addToEnd(array){//copies first item in array to the end
    array.push(array[0])
    return array
}


function makeLastFirst (array,index){//because the first item is also at the end but needs to match with the first hidden item the index has to be 0
    if(index==array.length-1){
        
        return 0
    }
    else {return index}
}

Im sure I have way to0 many promises and setTimeouts that arn't doing anything. Ideally Id like to figure out how to check if the href exists before continuing

It seems very hard to do: click - invoice to activate popover, wait - does href exist? if not wait till it does, open, wait - unsure if this is needed, repeat - on all orders