本文介绍了如何在 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 后再继续执行。这样就可以确保请求完成后再执行后续操作。
以下是一个示例代码：
一个可以提供给用户做为网络游戏物品装备交易的平台，可以由用户向网站发出物品交易委托申请，由网站做为中间人保证交易顺利完成，同时又可以做为游戏周边产品及其他商品销售的网上商城，该系统把2大功能紧密结合在一起，让使用该程序的用户能更方便快捷安全的管理一个属于自己的网站用户名：admin密码：8741137
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 文件中发起同步请求。这种方法可以确保请求完成后再继续执行后续测试，避免异步带来的问题。同时，需要注意错误处理和避免长时间阻塞，以确保测试的稳定性和效率。
