Getting started with Allure Fetch

Capture fetch HTTP requests and responses as attachments in your Allure Report test reports.

Allure Fetch is compatible with any Allure JS framework integration, including Allure Vitest, Allure Jest, Allure Playwright, Allure Mocha, and others.

To enable the integration in your project:

1. Make sure you have an Allure integration set up for the test framework you use.

   See the instructions in the integration's documentation in Frameworks.

2. Install allure-fetch.

   npm

   npm install --save-dev allure-fetch

   yarn

   yarn add --dev allure-fetch

   pnpm

   pnpm add -D allure-fetch

3. Wrap your fetch implementation with withAllure() to start capturing requests.

   The example below shows usage in a Vitest test suite.

   import { withAllure } from "allure-fetch";
   import { describe, expect, it } from "vitest";
   
   const client = withAllure(fetch);
   
   describe("Orders API", () => {
     it("creates an order", async () => {
       const response = await client("https://api.example.com/orders", {
         method: "POST",
         headers: { "content-type": "application/json" },
         body: JSON.stringify({ item: "book", qty: 1 }),
       });
       expect(response.status).toBe(201);
     });
   });

   Every HTTP request made through client will be added to the test result as an HTTP exchange attachment, wrapped in a step of the same name. The attachment captures the full exchange in one place: the request method, URL, headers, query parameters, cookies, and body; the response status, headers, cookies (including attributes such as Path, Domain, Expires, Secure, HttpOnly, and SameSite), and body; the exchange start and stop timestamps; and, when the request fails, the error name and message. See the attachment schema reference for the exact field list.

   If your tests call the global fetch directly, use instrumentGlobalFetch() instead. It replaces globalThis.fetch with an instrumented version and returns a restore function. Call the restore function when you no longer want requests captured — typically in afterEach or afterAll:

   import { instrumentGlobalFetch } from "allure-fetch";
   import { afterEach, beforeEach, describe, expect, it } from "vitest";
   
   describe("Orders API", () => {
     let restore: () => void;
   
     beforeEach(() => {
       restore = instrumentGlobalFetch();
     });
   
     afterEach(() => {
       restore();
     });
   
     it("creates an order", async () => {
       const response = await fetch("https://api.example.com/orders", {
         method: "POST",
         headers: { "content-type": "application/json" },
         body: JSON.stringify({ item: "book", qty: 1 }),
       });
       expect(response.status).toBe(201);
     });
   });

   INFO

   To prevent secrets from leaking into reports, certain values are redacted by default — all cookies, any header or query parameter whose name suggests it contains a credential, and any URL-encoded form field whose name does the same. See Allure Fetch configuration for the full list of defaults and how to customize the redaction rules.

4. Run your tests and generate a test report the same way as you would normally.