如何避免“框架分离”错误异步验证或使用 Puppeteer 重定向？

Question

以前的答案为我指明了方向，即如何捕获异步验证错误或重定向。 但在我的场景中，一个iframe开始发挥作用，它让我整天忙碌。 一些指向正确方向的指针会非常有帮助，因为我无法正确理解，即使错误清楚地说明出了什么问题。

场景的：

1. 输入为空。 在 iframe 内单击按钮，并从异步请求返回验证错误
2. 输入具有值。 在 iframe 内单击一个按钮，用户将被重定向到一个显示“yaay”的页面。

在第二种情况下抛出的错误状态waitForFunction failed: frame got detached 。 这是有道理的，因为框架不再存在......我找到了frame.isDetached()但它仍然不断抛出相同的错误。 我缺少什么或如何使用此方法使其工作？

let frame = (await page.frames())[0];
...
for (let action of actions) {
    if (action.type === '...') {
        // ...
    }

    if (action.type === 'click') {
        frame.click("#btn");        

        // works for scenario 1 
        await Promise.race([
            page.waitForNavigation({ waitUntil: "networkidle2" }),
            // ERROR THROWN HERE FOR SCENARIO 2
            // `waitForFunction failed: frame got detached`

            // the line below doesn't seem to work as well...
            // frame.isDetached() ? Promise.resolve() : frame.waitForSelector(".error")
            frame.waitForSelector(".error"),
        ]);

        if (await frame.$(".error")) {
            // there was an error
        } else {
            // the page changed
           if (await page.waitForFunction('document.querySelector("body").innerText === "finished"')) {
            // yeeey 
           }
        }
    }

}

Answer 1

我遇到了同样的问题，并通过将 Promise.race 包装在 try 块中然后检查框架是否分离来解决：

try {
    await Promise.race([
        page.waitForNavigation({ waitUntil: "networkidle2" }),
        frame.waitForSelector(".error"),
    ]);
} catch (e) {
    //
}

if (frame.isDetached()) {
    // Navigation was successful
} else {
    // There was an error
}