Cypress 是一个流行的前端 End-To-End 测试框架，它可以用于自动化测试 Web 应用程序。在测试过程中，我们经常需要检查页面是否已经加载完成。Cypress 提供了多种方法来检查页面加载状态，本文将详细介绍这些方法。
1. 使用 cy.wait() 方法
cy.wait() 方法可以等待一段时间，等待期间不进行任何操作。可以使用该方法等待页面加载完成，然后再进行后续操作。例如：
cy.visit('https://www.example.com')
cy.wait(5000) // 等待 5 秒钟
// 在页面加载完成后执行其他操作这种方法虽然简单，但是不够精确，因为我们不能确切知道页面何时加载完成。如果页面加载时间较短，则等待时间会浪费，如果页面加载时间较长，则可能会导致测试失败。
2. 使用 cy.intercept() 方法
cy.intercept() 方法可以拦截浏览器发出的网络请求，并在请求完成后执行回调函数。我们可以使用该方法拦截页面的网络请求，然后在请求完成后判断页面是否加载完成。例如：
cy.intercept('GET', 'https://www.example.com/**').as('pageLoaded')
cy.visit('https://www.example.com')
cy.wait('@pageLoaded')
// 在页面加载完成后执行其他操作这种方法比较精确，但是需要知道页面的网络请求地址。如果页面有多个网络请求，我们需要拦截所有请求，并判断所有请求是否都已完成，这会使得代码变得复杂。
3. 使用 cy.document() 方法
cy.document() 方法可以获取当前页面的文档对象，我们可以使用该方法判断页面是否加载完成。例如：
cy.visit('https://www.example.com')
cy.document().then((doc) => {
expect(doc.readyState).to.eq('complete')
})
// 在页面加载完成后执行其他操作这种方法比较简单，但是需要等待文档对象加载完成后才能进行判断。文档对象的加载速度取决于网络速度和页面复杂度，因此无法确保该方法的精确性。
4. 使用 cy.window() 方法
cy.window() 方法可以获取当前页面的窗口对象，我们可以使用该方法判断页面是否加载完成。例如：
cy.visit('https://www.example.com')
cy.window().then((win) => {
expect(win.document.readyState).to.eq('complete')
})
// 在页面加载完成后执行其他操作这种方法与 cy.document() 方法类似，但是获取的是窗口对象的文档对象。如果页面有多个窗口对象，我们需要分别获取每个窗口对象，并判断它们的文档对象是否都已加载完成，这会使得代码变得复杂。
5. 使用 Cypress.Promise 库
Cypress 提供了 Promise 库，我们可以使用该库等待页面加载完成。例如：
// javascriptcn.com 代码示例
cy.visit('https://www.example.com')
cy.window().then((win) => {
return new Cypress.Promise((resolve, reject) => {
win.addEventListener('load', () => {
resolve()
})
})
})
// 在页面加载完成后执行其他操作这种方法比较精确，但是需要自行编写 Promise 对象。如果页面有多个窗口对象，我们需要分别获取每个窗口对象，并编写多个 Promise 对象，这会使得代码变得复杂。
总结
Cypress End-To-End 测试框架提供了多种方法来检查页面加载状态，每种方法都有其优缺点。我们可以根据实际情况选择不同的方法。如果页面加载速度较快且不复杂，可以使用 cy.wait() 方法；如果页面有明确的网络请求地址，可以使用 cy.intercept() 方法；如果页面不太复杂，可以使用 cy.document() 方法；如果页面比较复杂，可以使用 cy.window() 方法；如果需要精确判断页面加载完成时间，可以使用 Cypress.Promise 库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650bf84595b1f8cacd60a67a