I'm writing a script to scrape data. The page has a list where each item can only be expanded one at a time, where "expanding" means rendering a div under the selected row with some data that is fetched on click. The script looks something like this:
function findData(arr, matches_regex) {
return Array.prototype.slice
.call(arr)
.find((x) => matches_regex(x.textContent))?.textContent;
}
rows = document.getElementsByClassName("selectable-row")
data = []
for (var i = 0; i < rows.length; i++) {
rows[i].click()
row_data = document.getElementsByClassName("row-data")
data1 = findData(row_data, matches_regex_1)
data2 = findData(row_data, matches_regex_2)
data.push([data1, data2])
}
The problem is, after rows[i].click() the rest of the script runs before the DOM loads the fetched data, and so data1 and data2 are "undefined" where there should be data. Is there a way to wait for the DOM to fully load after the click before getting the data?
