如何从raw.github URL提取JSON数据并存入Cypress测试变量

错误原因 #

• Cypress.Response是响应的封装对象，实际响应内容存放在body属性中，你直接将整个response传入JSON.parse会报错
• cy.request默认会自动解析JSON格式的响应内容，不需要手动调用JSON.parse
• Cypress所有命令都是异步排队执行，直接在cy.request外层同步访问赋值后的变量会拿到undefined

实现代码 #

单测试用例内使用 #

const dataUrl = "https://raw.githubusercontent.com/data.json";

// 声明响应数据的TS类型
interface User {
  id: number;
  name: string;
}
interface ResponseData {
  users_1: User[]
}

cy.request<ResponseData>(dataUrl).then((response) => {
  const users = response.body.users_1;
  // 所有需要使用users的逻辑都写在此回调内即可
  console.log(users);
})

跨测试用例复用 #

可以用Cypress别名机制共享数据：

interface User {
  id: number;
  name: string;
}

before(() => {
  const dataUrl = "https://raw.githubusercontent.com/data.json";
  // 请求后直接提取body下的users_1字段并设置别名
  cy.request<{users_1: User[]}>(dataUrl).its('body.users_1').as('users');
})

// 注意测试用例要用普通函数声明，不要用箭头函数才能正确访问this
it('测试读取共享用户数据', function() {
  console.log(this.users); // 直接获取用户数组
})

赋值到外部变量的注意事项 #

如果确实需要将数据存到外部声明的变量，必须保证变量访问逻辑在请求完成后执行，可以包裹在cy.then中：

let users: User[];
const dataUrl = "https://raw.githubusercontent.com/data.json";

cy.request<{users_1: User[]}>(dataUrl).then((response) => {
  users = response.body.users_1;
})

cy.then(() => {
  // 此处访问users才能拿到正确值
  console.log(users);
})

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