Record and Replay Network Traffic Using HAR Files with CodeceptJS and Playwright

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.