JSHandles can be evaluated only in the context they were created / Cannot find context with specified id

Question

I am selecting options from select -> option, and each time page reloads, first when I click the dropdown, I collect all elementHandles that I want to select. I want to go through all of them. I can only select the first one and then I get this error:

JSHandles can be evaluated only in the context they were created

So I am trying to recreate ElementHandles each time page reloads. I have this code:

Function 1:

case:click
try {
   await page.evaluate((el) => {
   return el.click()
   }, 'select');
   await page.waitFor(1500);
} catch (e) {
   console.log(e);
}
break;

case: getNavigation
let navigation = await page.$$('select > option');
break;

case: doActions
let i = 0;
for (elements in navigation) {
  let result = await function2(commands, i, page)
  i++;
}
break;

Then Function 2:

async function function2(commands, i, inPage){
let page = inPage;
if (!page) {
const browser = await puppeteerLambda.getBrowser({ headless: true, slowMo: 100,  args: ['--no-sandbox', '--disable-setuid-sandbox', '--single-process', '--start-fullscreen', '--window-size=1413,749']}); //TODO: setup Proxy
        console.log('opening new page');
        page = await browser.newPage();
....
}
let navigation;
case: click
try {
await page.evaluate((el) => {
return el.click()
}, 'select');
await page.waitFor(1500);
} catch (e) {
console.log(e);
}
case: getNavigation
navigation = await page.$$('select > option'); //recreating elementHandle array

case: selectOption
const optionValue = await page.evaluate(value => value.value, navigation[i]);
await page.select('select', optionValue);
case: extract
......

Again I get to select options 2 times and then I get this error:

Error: Protocol error (Runtime.callFunctionOn): Cannot find context with specified id

Can anyone help me how to handle this?

Answer 1

According to the Official Documentation for JSHandle:

JSHandles are auto-disposed when their origin frame gets navigated or the parent context gets destroyed.

Therefore, every time the page reloads, you will need to reobtain the JSHandle.