Case study, Chrome extension

Screen Recorder (QA mode)

A Chrome extension that records a bug together with what a developer needs to reproduce it. I built it for my own bug reports, and anyone can install it in about 30 seconds.

Type
Chrome extension, published on GitHub
Tech
JavaScript, Manifest V3 and chrome.desktopCapture
Tested with
Cypress, Playwright and GitHub Actions
Runtime dependencies
None

Why I built it

I used a tool called Nimbus to record bugs for my reports. When it changed, I rebuilt the features I relied on in my own extension, and then added the ones I wanted.

None of the tools I used recorded console logs and network requests along with the video, and I didn't want to repeat a test just to write its steps down.

How I test it

I didn't want to check the recorder against whatever a real website happened to do that day. So I built a bug bench for it, a page that breaks on demand. It can return a 500 on a write, throw an uncaught exception, or send a response that says OK and means the opposite. Each failure is known in advance, so I can check the recording against it. When the recording and the bench disagree, one of them has a bug. That's how I found several of the recorder's own bugs.

Automated tests

The extension also has automated tests that run on GitHub Actions. Cypress tests the capture scripts on local test pages. Playwright loads the real extension in Chromium, and one test builds the release zip, unpacks it and loads that, so what ships is what gets tested. Starting a capture needs a real click from a person, which no test framework can fake, so that step has a manual checklist.

What you get from one recording

  • A recording of your screen, a window or a single tab, with no time limit, no watermark and no account. The logs, requests, steps and annotations below come with tab recordings.
  • Console logs synced to the video, including uncaught exceptions.
  • The page's fetch and XHR requests, with status, timing and headers, exported as a HAR file you can open in Chrome DevTools.
  • Numbered steps, recorded automatically from clicks, forms and page changes, including navigation inside single-page apps. Typed values are never logged.
  • A *.steps.md export in which each step has a paste-ready Cypress or Playwright selector, so the list can become the skeleton of a regression test.
  • Annotations drawn on the video while you record, and markers added with a keyboard shortcut.
  • A written report of the recording, which it can file as a new issue in Jira Cloud or Linear when you stop. The video and the log files are saved to your Downloads folder.
  • An audio-only export, for example of a meeting.

Install it

  1. Download the zip from the latest release and unzip it.
  2. Open chrome://extensions and turn on Developer mode.
  3. Choose Load unpacked and select the unzipped folder.

You don't need an account or a build step.

Contact

I'm Pedro Morago, a Senior QA Engineer working fully remote from Santander, Spain. If you'd like to talk about bug reporting or test tooling, email me at pedro@pedromorago.com.