如何使用Cypress向GraphQL接口发起登录请求并解决运行报错

问题原因 #

你代码中的form: true配置和指定的Content-Type: application/json请求头冲突，是报错的核心诱因：
Cypress 中开启form: true时，会强制将请求体序列化为表单格式，同时自动修改请求头为application/x-www-form-urlencoded，覆盖你自定义的JSON类型头。而GraphQL接口默认要求接收JSON结构的请求参数，格式不匹配就会导致服务端解析失败报错。

修复方案 #

直接删除form: true配置即可，也可以用ES6模板字符串优化query的写法，避免手动写换行符，可读性更高，修正后的代码如下：

it('Test POST Request', () => {
    cy.request({
        method: 'POST',
        url: 'https://some.com/graphql',
        retryOnStatusCodeFailure: true,
        headers: {
            "Content-Type": "application/json"
        },
        body: {
            query: `mutation signIn($email: String!, $password: String!) {
  signIn(email: $email, password: $password) {
    ... on AuthInfo {
      token
    }
    ... on SignInFailure {
      errorCode
    }
  }
}`,
            variables: {"email":"max","password":"Pass"}
        },
    }).then(res => {
        cy.log(res);
    })
})

如果调整后依然有问题，可以打开测试运行的浏览器开发者工具的网络面板，查看实际发出的请求头、请求体内容，确认参数格式是否和接口要求完全匹配。

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