本文介绍了如何在 Cypress 的 cypress.config.ts 文件中，利用 before:run hook 在测试会话开始前发起同步请求。通过将 hook 函数声明为 async 并使用 await 关键字，可以确保请求完成后再继续执行后续操作，避免异步带来的问题。
在 Cypress 测试中，经常需要在测试会话开始前执行一些初始化操作，例如获取配置信息、清理测试数据等。Cypress 提供了 before:run hook，允许我们在 cypress.config.ts 文件中定义在测试运行前执行的函数。然而，由于 JavaScript 的异步特性，直接在 before:run 中发起请求可能会导致请求未完成就继续执行后续测试，从而引发问题。本文将介绍如何利用 async/await 语法，在 before:run 中发起同步请求，确保请求完成后再开始测试。
使用 async/await 实现同步请求
核心思路是将 before:run hook 函数声明为 async，并在发起请求时使用 await 关键字。await 关键字会暂停函数的执行，直到 Promise 对象 resolve 后再继续执行。这样就可以确保请求完成后再执行后续操作。
以下是一个示例代码：
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) // 返回 Promise 对象
.then((response) => {
return response.data;
})
.catch((error) => {
console.error('Error:', error.message);
throw error; // 抛出错误，阻止测试继续执行
});
}
export default defineConfig({
e2e: {
setupNodeEvents(on) {
on('before:run', async () => {
try {
const data = await performRequest();
console.log('Data from API:', data);
// 在这里可以对获取到的数据进行处理，例如存储到环境变量中
process.env.API_DATA = JSON.stringify(data);
} catch (error) {
console.error('Failed to fetch data before run:', error);
// 如果请求失败，可以选择终止测试运行
throw error;
}
});
},
},
});代码解释：
- 导入必要的模块： 导入 defineConfig 用于配置 Cypress，以及 axios 用于发起 HTTP 请求。
- 定义 performRequest 函数： 该函数使用 axios.get 发起 GET 请求，并返回一个 Promise 对象。关键在于需要明确返回 axios.get() 返回的 Promise，以便 await 能够正确地等待其完成。
- 声明 before:run 为 async 函数： on('before:run', async () => { ... }); 将 before:run 回调函数声明为异步函数，允许使用 await 关键字。
- 使用 await 等待请求完成： const data = await performRequest(); 使用 await 关键字等待 performRequest() 函数返回的 Promise 对象 resolve。只有在请求成功并返回数据后，才会将数据赋值给 data 变量，并继续执行后续代码。
- 错误处理： 使用 try...catch 块捕获请求过程中可能发生的错误。如果请求失败，可以记录错误信息，并选择终止测试运行，避免因数据缺失导致测试结果不准确。
- 数据处理： 在请求成功后，可以对获取到的数据进行处理。例如，可以将数据存储到环境变量中，供后续测试使用。 process.env.API_DATA = JSON.stringify(data); 这会将API返回的数据存储到环境变量API_DATA中，以便在测试用例中使用。
注意事项：
- 确保安装 axios： 在使用 axios 之前，需要先安装它。可以使用以下命令安装：npm install axios 或 yarn add axios。
- 错误处理： 在 catch 块中，需要对请求失败的情况进行处理。可以选择记录错误信息、终止测试运行或采取其他适当的措施。
- 避免长时间阻塞： before:run hook 的执行时间会影响测试启动的速度。因此，应尽量避免在其中执行耗时操作。如果需要执行大量初始化操作，可以考虑将其拆分成多个步骤，并使用其他 hook 进行处理。
- 环境变量的存储与使用： 使用 process.env 存储环境变量，在测试文件中，可以使用 Cypress.env('API_DATA') 获取环境变量的值。 注意：存储复杂对象时，需要使用 JSON.stringify 将其转换为字符串。
总结：
通过将 before:run hook 函数声明为 async 并使用 await 关键字，可以在 Cypress 的 cypress.config.ts 文件中发起同步请求。这种方法可以确保请求完成后再继续执行后续测试，避免异步带来的问题。同时，需要注意错误处理和避免长时间阻塞，以确保测试的稳定性和效率。
