Supercheck LogoSupercheck

Recorder

Record browser interactions and save Playwright tests directly to SupercheckEdit

The Supercheck Recorder is a Chrome and Edge extension that turns browser interactions into Playwright code. You can review and edit the generated test before saving it to a Supercheck project.

Install

The extension requires Chrome or Edge with Manifest V3 side-panel support.

Connect to Supercheck

Supercheck Cloud

  1. Install the extension in the browser profile you use for Supercheck.
  2. Open https://app.supercheck.io, sign in, and visit any authenticated dashboard page.
  3. The dashboard detects the extension and creates a recorder-scoped credential automatically. No approval dialog or copied API key is required.

Self-hosted Supercheck

  1. Open the extension's Options page.
  2. Enter the HTTPS origin of your self-hosted deployment and select Save URL and open Supercheck.
  3. Sign in to that Supercheck instance in the same browser profile. An authenticated dashboard page connects the extension automatically.

The options page retains an advanced API-key field for an existing recorder-scoped credential. Ordinary CLI tokens and job trigger keys are not recorder credentials.

For local development only, the extension also accepts http://localhost. Other non-HTTPS instance URLs are rejected.

Record a test

  1. Open the page you want to test.
  2. Select the Supercheck Recorder extension, or press Shift+Alt+R.
  3. Interact with the page. The side panel displays the generated Playwright code.
  4. Review or edit the code.
  5. Select Save to send it to the originating Supercheck Playground.

Use Shift+Alt+C to inspect elements without recording actions. Closing the recorder detaches controlled tabs and removes injected recorder scripts.

Permissions and data

The extension requests debugger, tabs, storage, side-panel, scripting, and HTTP/HTTPS host access. These permissions are required to attach Playwright to a tab, observe browser actions, show the recorder, and communicate with Supercheck.

The configured instance URL and extension API key are stored in Chrome sync storage. Treat the browser profile as sensitive: disconnect the extension before sharing the profile, and revoke the key from Supercheck if the profile or device is lost. Recorded page interactions can include text entered into forms; review generated code before saving and avoid recording real secrets.

The extension requires HTTPS for cloud and self-hosted instances. Only localhost development may use HTTP.

Self-hosted deployments

Configure the externally reachable HTTPS URL of your Supercheck app in the extension options. The recorder must be able to call the app's extension authentication, project, and recording endpoints. If connection fails, verify the URL, certificate trust, API key, and browser access to the deployment.

Build from source

git clone https://github.com/supercheck-io/supercheck.git
cd supercheck/recorder
npm ci
npm run build

Then open chrome://extensions, enable Developer mode, choose Load unpacked, and select recorder/examples/recorder-crx/dist.

Run validation before contributing:

npm run lint
npm run build
npm run test:install
npm test

Troubleshooting

ProblemCheck
Extension is not detectedReload the extension and the Supercheck tab, using the same browser profile
Connection failsConfirm the instance URL uses HTTPS, then sign in and open an authenticated dashboard page in the same browser profile
Self-hosted instance is unreachableOpen the instance directly and verify its certificate and network access
Recording does not startConfirm the tab uses HTTP or HTTPS and no other debugger is attached
Save is unavailableStart the recording from Supercheck so the originating Playground context is available

License

The Supercheck Recorder is distributed under Apache-2.0. Its Playwright-derived copyright notices and license terms remain available in the source repository.

On this page