Дождаться загрузки данных после клика по ссылке
 

Добрый день.

Есть код (запускается в консоле браузера)

var itemСount = 5

var i=0
f=function(){
    document.getElementsByClassName('b-link js-show-item')[i].click()            
    var trackId = document.getElementsByClassName('b-form__text b-form__text_state_item-value b-tracking')[0].outerText
    console.log(trackId)
//и ещё много кода
    
    i=i+1
    
    if (i<itemСount) { 
        setTimeout(f, "1000")
    }
}
f();

Он перебирает нужные элементы и кликает по ним. При клике на сайте открывается попап, из которого забирается нужная информация. И так, пока не будет выполнено условие.

Суть проблемы в том, что при первом запуске в консоле ошибка:
Подозреваю это из-за того, что попап с данными ещё не успел появится. Так как при повторном запуске кода ошибка исчезает.

Но не пойму как сделать так, чтобы после клика дождаться появления попапа с данными.

Попробовал добавить setInterval, но либо не так сделал, либо он не помогает:

var itemСount = 5

var i=0
f=function(){
    console.log(i)
    document.getElementsByClassName('b-link js-show-item')[i].click()
    console.log('click')
    let k = setInterval(function() {
        console.log(i + '<---in setInterval')
        if (document.getElementsByClassName('b-form__text b-form__text_state_item-value b-tracking')[0]){
            var trackId = document.getElementsByClassName('b-form__text b-form__text_state_item-value b-tracking')[0].outerText
            console.log(trackId)
            clearInterval(k);
            console.log("element found")
        } else {
            console.log('another try')
        }
    }, 1000);
    
    i=i+1
    
    if (i<itemСount) { 
        console.log(i)
        setTimeout(f, "1000")
    }
}
f();

При первом запуске получаю следующее:
И снова, если запустить второй раз, то всё ок работает до момента перезагрузки страницы.

В общем, что-то никак у меня не выходит решить проблему. Прошу помощи.

Вопрос, можно ли кликать по следующей ссылке, пока есть попап окно от предыдущей?
Может надо запускать повторно f() не просто через 1 сек, а только тогда, когда уже обработано предыдущее окно.
Что то типа такого

var itemСount = 5
 
var i=0
f=function(){
    console.log(i)
    document.getElementsByClassName('b-link js-show-item')[i].click()
    console.log('click')
    let k = setInterval(function() {
        console.log(i + '<---in setInterval')
        if (document.getElementsByClassName('b-form__text b-form__text_state_item-value b-tracking')[0]){
            var trackId = document.getElementsByClassName('b-form__text b-form__text_state_item-value b-tracking')[0].outerText
            console.log(trackId)
            clearInterval(k);
            console.log("element found");
            
			i=i+1			 
			if (i<itemСount) {
				console.log(i)
				setTimeout(f, 100)
			}
        } else {
            console.log('another try')
        }
    }, 1000);
     
}
f();

Да, кликать по следующей ссылке можно. Это отрабатывается корректно и визуально (меняются попапы) и при повторном запуске кода (данные корректно считываются).

Попробовал ваш вариант. Ошибка исчезла, но почему-то код перестаёт работать после первого обработанного элемента:

Ещё всё никак не пойму пару моментов:
1) откуда берётся undefined (отображается даже при отсутствии вывода чего-либо в консоль)
2) почему переменная i при повторном выводе в консоль отображается как "content"

У меня нет вашей задачи и я не вижу, что у вас на экране в консоле.
undefined может отображаться, как возвращаемое значение при вызове функции f();У меня нет привычки запускать код в консоле, но могу предположить только, что ваша переменная i как то конфликтует с существующей на странице переменной i
Попробуйте инкапсулировать весь ваш код поместив его в блок {}, а все переменные задать через let.

Спасибо! Поменял название переменной и теперь код отрабатывает с первого раза без ошибок.
Благодарю!