Puppeteer中的wait

错误起因错误一Execution context was destroyed, most likely because of a navigation错误通常发生在使用 Puppeteer 或类似工具时尝试在页面导航后继续操作页面元素或执行其他操作时。这个错误的主要原因是页面导航导致当前页面的执行环境被销毁而后续的操作仍然在尝试使用已经销毁的页面上下文从而导致错误。错误二”TimeoutError: Navigation timeout of 120000 ms exceeded“这个错误通常是由页面导航超时引起的。它意味着 Puppeteer 在规定的时间内无法完成页面加载。在你的情况下超时时间设置为 120000 毫秒即 2 分钟但页面加载时间超过了这个阈值。处理方法Puppeteer 提供了多种超时相关的操作用于控制在执行自动化测试或网页操作时的超时行为。以下是 Puppeteer 中常用的超时相关操作page.setDefaultTimeout(timeout)设置页面操作的默认超时时间单位为毫秒。如果操作未在超时时间内完成将会抛出错误。默认超时时间为 30 秒。page.setDefaultNavigationTimeout(timeout)设置页面导航的默认超时时间单位为毫秒。如果页面导航未在超时时间内完成将会抛出错误。默认超时时间为 30 秒。page.waitForTimeout(timeout)在页面上等待指定的时间单位为毫秒。这不是一个超时操作而是一个简单的等待操作。page.waitForNavigation(options)等待页面导航完成可以设置超时时间和其他选项。如果页面导航未在超时时间内完成将会抛出错误。page.waitForSelector(selector[, options])等待指定的 CSS 选择器匹配到一个元素可以设置超时时间和其他选项。如果选择器未在超时时间内匹配到元素将会抛出错误。page.waitForXPath(xpath[, options])等待匹配指定 XPath 表达式的元素出现可以设置超时时间和其他选项。如果 XPath 表达式未在超时时间内匹配到元素将会抛出错误。page.waitForFunction(pageFunction, options[, ...args])等待页面上的 JavaScript 函数返回 true可以设置超时时间和其他选项。如果函数未在超时时间内返回 true将会抛出错误。page.waitForRequest(urlOrPredicate[, options])和page.waitForResponse(urlOrPredicate[, options])等待特定的网络请求或响应可以设置超时时间和其他选项。如果请求或响应未在超时时间内完成将会抛出错误。实例列表函数waitForNavigation(options)解释等待框架完成导航。当你运行的代码间接导致框架导航时这个函数非常有用。使用 History API 改变 URL 被视为一次导航。示例const[response]awaitPromise.all([// 导航完成后这个 promise 解析frame.waitForNavigation(),// 点击链接间接导致了一次导航frame.click(a.my-link),]);在这个示例中使用了waitForNavigation函数等待框架导航完成。Promise.all包裹了两个异步操作其中之一是点击链接以确保等待正确地同步。函数waitForSelector(selector, options)解释等待当前页面中匹配指定选择器的元素出现。与Frame.waitForSelector不同此方法不会跨页面导航也不会在元素从 DOM 中移除后继续等待。示例importpuppeteerfrompuppeteer;(async(){constbrowserawaitpuppeteer.launch();constpageawaitbrowser.newPage();letcurrentURL;page.mainFrame().waitForSelector(img).then(()console.log(第一个带有图片的 URL: currentURL));for(currentURLof[https://example.com,https://google.com,https://bbc.com,]){awaitpage.goto(currentURL);}awaitbrowser.close();})();函数waitForXPath(xpath, options)解释等待当前页面中匹配给定 XPath 表达式的元素出现。此方法可以跨页面导航并且如果在调用该方法时 XPath 已经存在则立即返回。示例importpuppeteerfrompuppeteer;(async(){constbrowserawaitpuppeteer.launch();constpageawaitbrowser.newPage();letcurrentURL;page.waitForXPath(//img).then(()console.log(第一个带有图片的 URL: currentURL));for(currentURLof[https://example.com,https://google.com,https://bbc.com,]){awaitpage.goto(currentURL);}awaitbrowser.close();})();这两个示例展示了如何使用 waitForSelector 和 waitForXPath 等待页面上特定元素的出现。在每次页面加载完成后代码都会等待页面上的图片元素出现然后输出第一个带有图片的 URL。函数waitForFunction(pageFunction, options)解释等待页面上下文中的函数执行完成。示例importpuppeteerfrompuppeteer;// 观察视口大小变化(async(){constbrowserawaitpuppeteer.launch();constpageawaitbrowser.newPage();constwatchDogpage.waitForFunction(window.innerWidth 100);awaitpage.setViewport({width:50,height:50});awaitwatchDog;awaitbrowser.close();})();// 从 Node.js 传递参数到 waitForFunction 函数的断言constselector.foo;awaitpage.waitForFunction(selector!!document.querySelector(selector),{},selector);// waitForFunction 的断言也可以是异步的constusernamegithub-username;awaitpage.waitForFunction(asyncusername{constgithubResponseawaitfetch(https://api.github.com/users/${username});constgithubUserawaitgithubResponse.json();// 展示头像constimgdocument.createElement(img);img.srcgithubUser.avatar_url;// 等待 3 秒awaitnewPromise((resolve,reject)setTimeout(resolve,3000));img.remove();},{},username);在这个示例中waitForFunction函数被用来等待页面上下文中的函数执行完成。第一个示例观察了视口大小的变化第二个示例传递了参数给断言函数第三个示例展示了断言函数可以是异步的情况。函数waitForRequest(urlOrPredicate, options)解释等待匹配给定 URL 或断言的请求。示例constfirstRequestawaitpage.waitForRequest(https://example.com/resource);constfinalRequestawaitpage.waitForRequest(requestrequest.url()https://example.com);returnfinalRequest.response()?.ok();在这个示例中waitForRequest函数用于等待与给定 URL 匹配的请求。第一个示例等待第一个请求完成第二个示例使用断言等待特定的请求。函数waitForResponse(urlOrPredicate, options)解释等待匹配给定 URL 或断言的响应。示例constfirstResponseawaitpage.waitForResponse(https://example.com/resource);constfinalResponseawaitpage.waitForResponse(responseresponse.url()https://example.comresponse.status()200);constfinalResponseawaitpage.waitForResponse(asyncresponse{return(awaitresponse.text()).includes(html);});returnfinalResponse.ok();在这个示例中waitForResponse函数用于等待与给定 URL 匹配的响应。第一个示例等待第一个响应完成第二个示例使用断言等待特定的响应第三个示例使用异步断言等待满足条件的响应。函数waitForFrame(urlOrPredicate, options)解释等待满足给定条件的框架出现。示例constframeawaitpage.waitForFrame(asyncframe{returnframe.name()Test;});在这个示例中waitForFrame函数用于等待满足条件的框架出现。它可以接受一个异步断言函数作为参数用于判断框架是否满足条件。函数waitForNetworkIdle(options)解释等待网络空闲状态。示例awaitpage.waitForNetworkIdle();在这个示例中waitForNetworkIdle函数用于等待网络处于空闲状态。函数waitForDevicePrompt(options)解释此方法通常与触发来自 WebBluetooth 等 API 的设备请求的操作耦合。示例const[devicePrompt]Promise.all([page.waitForDevicePrompt(),page.click(#connect-bluetooth),]);awaitdevicePrompt.select(awaitdevicePrompt.waitForDevice(({name})name.includes(My Device)));这个示例中waitForDevicePrompt函数用于等待设备提示。在点击连接蓝牙按钮后它选择了一个设备并等待设备的出现。