javascript - JSHandles 只能在创建它们的上下文中进行评估/找不到具有指定 ID 的上下文

Question

我正在从 select -> option 中选择选项，每次重新加载页面时，首先单击下拉菜单时，我会收集所有要选择的元素句柄。我想经历所有这些。我只能选择第一个，然后出现此错误:

JSHandles can be evaluated only in the context they were created

因此，每次重新加载页面时，我都会尝试重新创建 ElementHandles。我有这段代码:

函数一:

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;

然后函数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
......

我再次选择选项 2 次 ，然后出现此错误:

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

谁能帮我解决这个问题？

Answer 1

根据Official Documentation对于 JSHandle:

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

因此，每次页面重新加载时，您都需要重新获取JSHandle。