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
- Install from the Chrome Web Store
- Install from Microsoft Edge Add-ons
- View the source and build instructions
The extension requires Chrome or Edge with Manifest V3 side-panel support.
Connect to Supercheck
Supercheck Cloud
- Install the extension in the browser profile you use for Supercheck.
- Open
https://app.supercheck.io, sign in, and visit any authenticated dashboard page. - The dashboard detects the extension and creates a recorder-scoped credential automatically. No approval dialog or copied API key is required.
Self-hosted Supercheck
- Open the extension's Options page.
- Enter the HTTPS origin of your self-hosted deployment and select Save URL and open Supercheck.
- 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
- Open the page you want to test.
- Select the Supercheck Recorder extension, or press
Shift+Alt+R. - Interact with the page. The side panel displays the generated Playwright code.
- Review or edit the code.
- 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 buildThen 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 testTroubleshooting
| Problem | Check |
|---|---|
| Extension is not detected | Reload the extension and the Supercheck tab, using the same browser profile |
| Connection fails | Confirm the instance URL uses HTTPS, then sign in and open an authenticated dashboard page in the same browser profile |
| Self-hosted instance is unreachable | Open the instance directly and verify its certificate and network access |
| Recording does not start | Confirm the tab uses HTTP or HTTPS and no other debugger is attached |
| Save is unavailable | Start 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.