如何在Protractor中规范编写AngularJS测试的前置HTTP调用

我太懂这种感受了——用flow.execute()串起一堆异步HTTP请求，写出来的代码不仅绕，后期维护时要加新步骤或者调整顺序都得扒半天。其实Protractor现在完全支持更简洁的异步处理方式，给你几个实用的方案：

1. 用Async/Await实现线性化代码 #

这是目前最直观易读的方式，直接把beforeAll改成异步函数，用await逐个执行HTTP请求，天然保证顺序：

// 先封装好每个返回Promise的HTTP请求函数
async function createUser(userPayload) {
  const response = await axios.post(`${BACKEND_URL}/users`, userPayload);
  return response.data; // 返回创建好的用户数据，方便后续使用
}

async function createPost(postPayload) {
  const response = await axios.post(`${BACKEND_URL}/posts`, postPayload);
  return response.data;
}

// 在beforeAll里按顺序调用
beforeAll(async () => {
  try {
    // 第一步：创建用户
    const testUser = await createUser({ name: "测试用户", email: "test@example.com" });
    // 第二步：基于用户ID创建帖子（依赖第一步的结果）
    const testPost = await createPost({ userId: testUser.id, title: "测试帖子" });
    // 第三步：基于帖子ID创建评论（依赖第二步的结果）
    await createComment({ postId: testPost.id, content: "测试评论" });
  } catch (err) {
    console.error("测试数据创建失败:", err);
    throw err; // 抛出错误让测试终止，避免后续测试在无数据环境下执行
  }
});

这种写法完全是线性的，谁先谁后一目了然，后期加步骤或者调整顺序直接改代码顺序就行，维护成本低很多。

2. 封装独立的测试数据生成模块 #

如果你的前置操作逻辑复杂、步骤多，建议把这些数据创建逻辑抽成单独的模块，比如test-data-factory.js，让测试文件更清爽：

// test-data-factory.js
export async function setupFullTestSuiteData() {
  const user = await createUser({ name: "测试用户" });
  const post = await createPost({ userId: user.id });
  const comment = await createComment({ postId: post.id });
  
  // 返回所有创建好的数据，供测试用例使用
  return { user, post, comment };
}

// 你的测试文件
import { setupFullTestSuiteData } from './test-data-factory';

let testData;

beforeAll(async () => {
  testData = await setupFullTestSuiteData();
});

it("应该显示用户的帖子", () => {
  // 直接用testData里的内容，比如testData.post.title
  expect(element(by.css('.post-title')).getText()).toBe(testData.post.title);
});

这样测试文件只需要关心测试逻辑，数据生成的细节都在单独模块里，后期修改数据结构或者新增步骤，只需要动这个工厂模块就行。

3. 别忘了清理测试数据 #

额外提个小建议：在afterAll里加上对应的删除请求，避免测试环境里堆积大量测试数据，影响后续测试：

afterAll(async () => {
  await deleteComment(testData.comment.id);
  await deletePost(testData.post.id);
  await deleteUser(testData.user.id);
});

比起flow.execute()，这些方式不仅代码更简洁，可读性和可维护性都提升一大截，而且完全符合现代异步代码的写法习惯。

内容的提问来源于stack exchange，提问作者Tomato