cypress-intercept-formdata (CIFD)
This package is intended to be used with Cypress.io intercept command.
As of version 6.2 or 6.3 the request.body accessed from the intercept is an ArrayBuffer for multipart/form-data requests.
This makes it difficult to work with the body of the request and make assertions on it.
CIFD makes it easy to use the multipart body in your specs.
Installation
#pnpm:
$ pnpm add cypress-intercept-formdata
#NPM:
$ npm i cypress-intercept-formdataUsage
Add to your commands file:
//cypress/support/commands.js
import "cypress-intercept-formdata";
//...Then in your spec:
cy.intercept("POST", "http://localhost:8888/api/test", {
statusCode: 200,
body: { success: true },
}).as("uploadRequest");
//...
cy.wait("@uploadRequest")
.interceptFormData((formData) => {
expect(formData["foo"]).to.eq("bar");
});Uploading Files
If you have file(s) uploaded as part of the request they will be available in the formData object as well: The value is the file name
cy.wait("@uploadRequest")
.interceptFormData((formData) => {
expect(formData["file"]).to.eq("fileName.txt");
});Multiple files are also supported:
cy.wait("@uploadRequest")
.interceptFormData((formData) => {
expect(formData["file"][0]).to.eq("fileName1.txt");
expect(formData["file"][1]).to.eq("fileName2.txt");
});File Content
By default, CIFD simply adds the file name being uploaded to the formData object. If you'd like to assert more deeply on the file(s) being uploaded, you can set options.loadFileContent to true:
cy.wait("@submitForm")
.interceptFormData((formData) => {
expect(formData["file"]).to.be.instanceof(File);
expect(formData["file"]).to.have.property("type", "image/jpeg");
expect(formData["file"].size).to.be.eq(2551829);
}, { loadFileContent: true });Multiple files are supported as well.
Use inside intercept routeHandler
Cypress intercept command accepts a routeHandler
If you want to inspect/assert on the body from the handler, you can import the interceptFormData directly and call it like this:
import { interceptFormData } from "cypress-intercept-formdata";
//...
cy.intercept("POST", "http://localhost:8888/api/test", (req) => {
const formData = interceptFormData(req);
expect(formData["first_name"]).to.eq("James");
});Testing this Library
In terminal 1:
pnpm serveIn terminal 2:
pnpm cy:runOR
pnpm cy:openTesting while developing
In terminal 3:
pnpm watch