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-formdata

Usage

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 serve

In terminal 2:

pnpm cy:run

OR

pnpm cy:open

Testing while developing

In terminal 3:

pnpm watch