Skip to main content

interaction-highlighter

The @eventpop-oss/interaction-highlighter package visualizes clicks and focus events on the page. This is useful when recording a video of E2E tests.

Example usage with Playwright​

You can use this with Playwright in 2 ways.

Option A - Add in your web app​

By putting the following code in your application, it will automatically activate the highlighter when the app being tested with Playwright:

import { enableInteractionHighlighter } from '@eventpop-oss/interaction-highlighter'

if (navigator.userAgent.includes('Playwright/')) {
  enableInteractionHighlighter()
}

For the above code to work, we need to adjust the Playwright Test configuration to add a user-agent.

import { version } from '@playwright/test/package.json'
const uaSuffix = ` Playwright/${version}`

const config: PlaywrightTestConfig = {
  // ...
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        userAgent: devices['Desktop Chrome'].userAgent + uaSuffix,
      },
    },
  ],
}

Option B - Add in Playwright​

You can override the context fixture so that the interaction highlighter is automatically installed on every page.

import { BrowserContext, test as base } from '@playwright/test'
import { readFileSync } from 'fs'

async function installInteractionHighlighter(context: BrowserContext) {
  const highlighter = readFileSync(
    require.resolve(
      '@eventpop-oss/interaction-highlighter/dist/interaction-highlighter.umd.cjs',
    ),
  )
  await context.addInitScript({
    content: `void (() => {
      const exports = {}
      const module = { exports };
      ${highlighter};
      exports.enableInteractionHighlighter();
    })()`,
  })
}

export const test = base.extend({
  context: async ({ context }, use) => {
    await installInteractionHighlighter(context)
    await use(context)
  },
})