Awesome

🎭 playwright-advanced-har

Playwright-advanced-har is a library that allows various use-cases for network record-and-playback, including:

• ignoring post data and get arguments
• ignoring the base-url when serving HAR files (good when you record network in test environment and play on staging/production)
• ignoring aborted requests and requests that had errors

install

npm install playwright-advanced-har

usage

The playwright-advanced-har provides a playwright fixture called advancedRouteFromHAR. Here is an example of using a custom matcher to ignore 500 status code errors:

import { test, defaultMatcher, customMatcher } from "playwright-advanced-har";

test("don't route responses that have errors", async ({ page, advancedRouteFromHAR }) => {
	await advancedRouteFromHAR("tests/har/first-has-error.har", {
		matcher: (request, entry) => {
			if (entry.response.status >= 500 && entry.response.status < 600) {
				return -1;
			}
			return defaultMatcher(request, entry);
		},
	});

	await page.goto("https://noam-gaash.co.il");
	await page.getByText("Hello World").waitFor();
});

The matcher arguments is a callback function that receives the request and the HAR entry and returns a number. The number indicates how "good" the response is. Negative numbers (such as -1) tells the router to ignore the entry, while positive numbers indicates the entry is a qualified candidate to be routed from.

examples

ignoring port numbers:

test("ignore port number", async ({ page, advancedRouteFromHAR }) => {
	await advancedRouteFromHAR("tests/har/different-port.har", {
		matcher: customMatcher({
			urlComparator(a, b) {
				a = a.replace(/:\d+/, "");
				b = b.replace(/:\d+/, "");
				return a === b;
			},
		}),
	});
	await page.goto("https://noam-gaash.co.il");
	await page.getByText("from different port").waitFor();
});

choosing arbitrary responses:

test("pick arbirtrary response", async ({ page, advancedRouteFromHAR }) => {
	// good when you're testing a long polling requests
	await advancedRouteFromHAR("tests/har/differentNumbers.har", {
		matcher: customMatcher({
			scoring() {
				return Math.random();
			},
		}),
	});
	await page.goto("https://noam-gaash.co.il");
	await page.getByText("1234").waitFor();
});

apply post-proccessing on the chosen HAR entry:

test("get the largest number... squared!", async ({ page, advancedRouteFromHAR }) => {
	// the file contains 3 responses - 42, 1234, 5
	await advancedRouteFromHAR("tests/har/differentNumbers.har", {
		matcher: {
			postProcess(entry) {
				entry.response.content.text = (parseInt(entry.response.content.text || "0") ** 2).toString();
				return entry;
			},
			matchFunction: customMatcher({
				scoring: (request, entry) => parseInt(entry.response.content.text || "0"),
			}),
		}
	});
	await page.goto("https://noam-gaash.co.il");
	await page.getByText((1234**2).toString()).waitFor();
});

for more examples, please see our tests directory

Contribution

Contributions are welcome! Please open an issue with a use-case before opening a PR, so we can discuss it. Make sure you add tests and run npm run test before commiting.

Install dependencies

npm install

Run tests

npm test