使用Cypress测试含图片上传的API时出现错误,寻求解决方法
解决Cypress测试图片上传API的错误问题
我来帮你排查这个问题,看了你的代码后,发现几个关键问题导致了错误:
核心问题:请求头设置错误
你手动设置了content-type: application/x-www-form-urlencoded,但当请求体是FormData时,正确的内容类型应该是multipart/form-data。而且Cypress会自动为FormData请求添加正确的Content-Type头(包括必要的boundary参数),手动设置错误的头会导致服务器无法正确解析你的请求体。
修正后的代码
这里是调整后的测试代码,我标注了关键修改点:
it("should register a new litigant/customer", () => { cy.fixture('testImg1.png', "base64").then(base64 => { const blob = Cypress.Blob.base64StringToBlob(base64, 'image/png') const formData = new FormData() // 直接添加字段,比循环更清晰(循环也没问题,但这样更直观) formData.append('email', "customer@customer.com") formData.append('password', "123456789") formData.append('profilePicture', blob, 'testImg1.png') // 这里可以加上文件名,部分API需要 cy.request({ method: "POST", url: endpoints.signup.litigant, // 移除错误的content-type头,Cypress会自动处理 body: formData, }).then(res => { expect(res.status).to.eq(200) // 示例断言,替换成你的实际断言 // 其他断言逻辑 }) }) })
额外需要检查的点
- 确认
testImg1.png文件确实放在cypress/fixtures目录下,路径没有错误 - 验证你的API端点
endpoints.signup.litigant是正确的,能正常访问 - 确保后端服务器已经配置了处理
multipart/form-data类型请求的能力,比如解析FormData中的文件和字段
内容的提问来源于stack exchange,提问作者Samarth Mittal




