本文介绍了如何在 Cypress 的 cypress.config.ts 文件中的 before:run 钩子内执行同步请求。通过将 before:run 回调函数声明为 async，并使用 await 关键字，可以确保请求在测试会话开始前完成，从而实现同步执行的效果。
在 Cypress 测试中，有时需要在测试会话开始之前执行一些操作，例如获取配置信息、初始化数据等。Cypress 提供了 cypress.config.ts 文件，允许我们在 before:run 钩子中执行这些操作。然而，由于 Cypress 内部机制的限制，直接在 before:run 中执行同步请求可能会遇到问题。本文将介绍一种使用 async/await 的方法，实现在 cypress.config.ts 中执行同步请求。
使用 async/await 实现同步请求
Cypress 的 before:run 钩子默认是同步执行的，这意味着它会阻塞后续的测试执行，直到钩子中的代码执行完成。为了在 before:run 中执行异步操作，我们需要将钩子函数声明为 async，并使用 await 关键字等待异步操作完成。
以下是一个示例，展示了如何在 cypress.config.ts 中使用 async/await 执行 http 请求：
import { defineConfig } from 'cypress'; import axios from 'axios'; // 确保已安装 axios: npm install axios const apiUrl = 'https://example.com/api/data'; // 替换为你的 API 地址 function performRequest() { return axios .get(apiUrl) .then((response) => { return response.data; }) .catch((error) => { console.error('Error:', error.message); throw error; // 重新抛出错误，避免 Cypress 继续执行 }); } export default defineConfig({ e2e: { setupnodeEvents(on) { on('before:run', async () => { try { const data = await performRequest(); console.log('Data from API:', data); // 在这里可以使用获取到的数据进行后续操作 } catch (error) { console.error('Failed to fetch data before run:', error); // 处理错误，例如退出 Cypress 进程 process.exit(1); } }); }, }, });
代码解释：
- 引入 axios： 首先，我们需要引入 axios 库来发送 HTTP 请求。 确保已经通过 npm install axios 安装了它。
- 定义 performRequest 函数： 这个函数使用 axios.get 发送 GET 请求，并返回一个 promise。注意，函数返回的是 axios.get 返回的 Promise，这样才能在 await 中正确等待。
- 声明 before:run 为 async： on(‘before:run’, async () => { … }); 将 before:run 钩子函数声明为 async，允许我们在其中使用 await 关键字。
- 使用 await 等待请求完成： const data = await performRequest(); 使用 await 关键字等待 performRequest 函数返回的 Promise 完成。这意味着 Cypress 会暂停执行，直到请求完成并返回数据。
- 错误处理： 使用 try…catch 块来捕获请求过程中可能发生的错误。如果请求失败，我们将错误信息打印到控制台，并可以根据需要采取适当的措施，例如退出 Cypress 进程。
注意事项：
- 错误处理： 在 before:run 钩子中处理错误非常重要。如果请求失败且未正确处理，Cypress 可能会继续执行测试，导致不可预测的结果。建议在发生错误时记录错误信息并退出 Cypress 进程。
- 同步阻塞： 虽然使用了 async/await，但 before:run 仍然是同步阻塞的。这意味着在 before:run 中的代码执行完成之前，Cypress 不会开始执行任何测试。因此，请确保 before:run 中的代码执行时间尽可能短，避免影响测试速度。
- 第三方库： 可以使用其他 HTTP 请求库，例如 node-fetch，代替 axios。但请确保选择一个支持 Promise 的库，以便可以使用 async/await。
总结：
通过将 before:run 钩子函数声明为 async，并使用 await 关键字，我们可以在 Cypress 的 cypress.config.ts 文件中执行同步请求。这种方法可以确保请求在测试会话开始前完成，从而实现同步执行的效果。然而，请注意错误处理和同步阻塞问题，以确保测试的稳定性和速度。