Cypress 如何等待页面加载完成？

在使用Cypress进行端到端测试时，等待页面加载是一个关键环节。通常，Cypress 自动等待页面加载并执行命令，但在特定情况下，你可能需要显式的等待页面或资源加载完成。以下是几种方法：

1. 自动等待DOM元素

Cypress 通常会自动等待元素可见并且可以交互。例如，使用 cy.visit() 访问一个页面后，Cypress 会等待页面加载完成。当使用 cy.get() 获取DOM元素时，Cypress 会等待该元素出现在DOM中。

javascript
cy.visit('https://example.com');
cy.get('.important-element').should('be.visible');

在上述代码中，Cypress 会在访问 example.com 后等待 .important-element 元素出现并且可见。

2. 显式等待

如果你需要等待一个特定的时间，可以使用 cy.wait()。

javascript
cy.visit('https://example.com');
cy.wait(5000); // 等待5000毫秒
cy.get('.important-element').should('be.visible');

3. 等待AJAX请求

如果页面加载涉及到异步的AJAX请求，你可以使用 cy.wait() 等待这些请求完成。

javascript
cy.server();
cy.route('GET', '/api/data').as('getData');
cy.visit('https://example.com');
cy.wait('@getData');

在上述代码中，Cypress 会等待与别名 getData 匹配的AJAX请求完成。

4. 判断页面加载状态

有时候，你可能需要判断页面是否已经完全加载。可以通过检查 document.readyState 属性来了解页面加载状态，例如：

javascript
cy.window().then((win) => {
  cy.wrap(win.document.readyState).should('eq', 'complete');
});

例子

假设我正在测试一个复杂的单页面应用（SPA），页面需要从多个API加载数据。我可能会使用以下方式来确保相关的数据和元素加载完成：

javascript
cy.visit('/dashboard');

// 假设有一个概览框架会在数据加载后显示
cy.get('.overview-panel').should('be.visible');

// 假设页面会进行多个API请求来填充数据表格
cy.server();
cy.route('GET', '/api/users').as('loadUsers');
cy.route('GET', '/api/products').as('loadProducts');
// 然后等待这些请求成功
cy.wait('@loadUsers');
cy.wait('@loadProducts');

// 最后检查表格是否填充数据
cy.get('.user-table').find('tr').should('have.length.greaterThan', 1);
cy.get('.product-table').find('tr').should('have.length.greaterThan', 1);

在实际的Cypress测试中，通常不需要添加过多的显式等待，因为Cypress的默认命令队列会自动处理大部分的等待。然而，在遇到复杂的异步操作时，以上提供的方法可以帮助确保你的测试脚本稳定执行，并且能够正确地等待必要的页面加载过程。

可以在测试案例代码里面添加一些断言：

shell
cy.click('#someButtonToNavigateOnNewPage');

cy.location('pathname', {timeout: 60000})
  .should('include', '/newPage');

cy.click('#YouAreOnNewPage');

可以更改默认超时 - 默认情况下为 4000 毫秒（4 秒）,以确保用户的页面加载完成。