Record and replay network traffic using HAR files with CodeceptJS and Playwright
HAR files are useful to store networking information recorded during the interaction between a browser and a particular set of web resources. However, it is not commonly known that the data from HAR file can later be replayed within an end to end test automation scenario in modern test automation frameworks, such as CodeceptJS and Playwright. Within an end to end scenario HAR data can help to further analyse and reveal existing and potential networking issues.
Playwright
Playwright is a powerful testing framework that provides reliable end-to-end and cross-browser testing for web applications. It supports all major web browsers, including Chromium, Firefox, and WebKit. Playwright offers a unified API for interacting with web browsers and tests can be written once and run across multiple browsers, without needing separate code for each browser.
CodeceptJS
CodeceptJS is a modern test automation framework that integrates with Playwright as well as other popular testing frameworks to enable end-to-end testing of web, mobile and desktop (read Electron.js) applications. It provides a user-friendly syntax and a powerful set of features for writing and executing automated tests.
What is a HAR file?
HTTP Archive (HAR) is a JSON-formatted archive file that tracks information exchanged between web browsers and websites. Its primary purpose is to identify performance issues, such as slow load times and page rendering problems. The HAR file records each resource loaded by the browser, including networking data, such as the time spent on initial connection, DNS lookup, proxy negotiation, SSL, Time To First Byte, content download, and more.
Generate a HAR file
HAR files can be generated on most browsers commonly used today, such as Google Chrome, Firefox, Safari or Edge.
Analyse a HAR file
Once a HAR file is created, it can be analysed using various tools: ranging from online HAR viewers to local network debugging applications:
- Google HAR Analyzer
- HTTP Toolkit
- Multiple Chrome extensions, such as HTTP Archive Viewer
- Multiple Visual Studio Code extensions, such as HAR Viewer
Record and replay HAR with Playwright
To configure a new BrowserContext for recording HAR files, you need to provide a recordHar object with a minimum configuration of a path property that specifies the location of the HAR file.
const browserContext = await browser.newContext({
recordHar: { path: 'path/to/requests.har' }
})
const page = await browserContext.newPage()
await page.goto('https://www.bear.plus')
await browserContext.close()Remember to close the BrowserContext at the end of your testing scenario to generate the HAR file.
HAR is not the same as Trace
Playwright also provides tracing that is often confused with HAR. Though they are both tools used for debugging in the context of an end to end testing scenario, they serve a different purposes and provide different types of information.
While Playwright traces provide a comprehensive view of a test execution, including actions, network requests, and console logs, HAR files focus solely on network activity and provide more advanced information for diagnosing network issues.
Configure CodeceptJS to record HAR
It is often overlooked, but it is possible to pass additional configuration options in emulate property from the CodeceptJS config file to the Playwright helper.
// codecept.conf.ts
{
// ...
helpers: {
Playwright: {
emulate: {
recordHar: {
path: './output/har/requests.har',
mode: 'full',
}
}
}
}
// ...
}This configuration is enough to start recording network data in a CodeceptJS test scenario. Note that setting the mode to "full" will generate the most detailed results regarding the networking interaction. Please refer to the Playwright documentation for more information on recordHar settings.
Replaying network traffic from HAR
CodeceptJS provides the ability to call the underlying helper API, which is Playwright in this case. This can be done by calling usePlaywrightTo method.
This is extremely useful as we can leverage routeFromHAR method to replay HAR networking data in our test scenario. This can be done at both Page and BrowserContext levels.
I.usePlaywrightTo('Replay requests from HAR', async ({ page }) => {
await page.routeFromHAR('./output/har/requests.har')
})One step further
As CodeceptJS provides the ability to abstract commonly used actions under an actor object, we could integrate a replayFromHAR function receiving the path to a HAR file.
export = function() {
return actor({
replayFromHAR: function (harPath: string) {
this.usePlaywrightTo('Route from HAR', async ({ page }) => {
await page.routeFromHAR(harPath, { notFound: 'abort' })
})
},
})
}The method replayFromHAR can be called in the beginning of any test scenario.
I.replayFromHAR('./output/har/requests.har')
I.amOnPage('https://www.bear.plus')
I.click('Projects.')The network traffic is now sources from the HAR file.
Summary
HAR files are valuable resources for recording and analysing network traffic between a browser and web resources. With the integration of CodeceptJS and Playwright, HAR files can be leveraged in end-to-end test automation scenarios to identify and address networking issues effectively. By generating and analysing HAR files, developers and testers can gain insights into performance problems and optimise their web applications accordingly.
Source code
The approach described in this article is implemented in CodeceptJS Playwright Typescript Boilerplate and available in Bear Plus GitHub space.
