1 Introduction
FlowMint Recorder is a browser extension that lets you record clicks, typing, navigation, and more, add assertions (text, visibility, URL, etc.), and export tests to JavaScript (Playwright), Python, Java, C#, or Ruby. You can run tests with data-driven CSV/JSON and organize them in Test Suites.
All data is stored locally in your browser; no external servers or analytics.
2 Installation
Install FlowMint Recorder from the browser store — no build or command line required.
- Open the Chrome Web Store (or Edge Add-ons if you use Microsoft Edge).
- Search for FlowMint Recorder or use the direct link from the FlowMint website.
- Click Add to Chrome (or Get in Edge) and confirm.
- Pin the extension to the toolbar: click the puzzle-piece icon in the browser bar, then pin FlowMint Recorder for quick access.
To use it: click the FlowMint icon. The side panel opens with the Actions tab. From there you can start recording, switch to other tabs (Variables & Data, Export, Suites, Settings), and run or export tests.
npm run build, then in chrome://extensions/ turn on Developer mode and use Load unpacked to select the dist folder. End users don’t need this — they install from the store.
3 Quick start (5 steps)
https://google.com) in the same browser.4 Side panel tabs
Use the sidebar on the left of the panel to switch between:
| Tab | Purpose |
|---|---|
| Actions | Test name, Start/Pause/Stop, Run test (Pro), list of steps. Add assertions, extract values, reorder/duplicate (Pro). |
| Variables & Data | Declare variables, CSV/JSON data source, run test once per row (Pro). |
| Export | Language (JS, Python, Java, C#, Ruby), conditional logic, copy/download. Import test (Pro). |
| Suites | Save tests, create suites (setup → tests → teardown), run suite, search tests, download report (Pro). |
| Settings | Recording, selectors, export defaults, theme (light/dark/system), advanced. |
5 Recording
Test name
Set a Test name in the Actions tab (before or after starting). It’s used when you save, export, or download the playback report.
Start / Pause / Stop
- Start Recording — Begins capturing. The floating toolbar appears on the page (draggable, bottom-right).
- Pause / Resume — Temporarily stop or continue capturing.
- Stop — End the session. Reopen the panel to see the full action list.
Floating toolbar
While recording: Rec / Paused status, Pause, Stop, Wait 1s / 2s / 5s Pro, Assert URL Pro. Drag the toolbar by its background to move it.
What gets recorded
Clicks, typing, selects, navigation, hover (if enabled), scroll (Pro), form submit. Selectors prefer id, data-testid, ARIA, then XPath/CSS — configurable in Settings.
6 Action list & step options
After recording, each step appears in the Actions tab. You can:
- Expand / collapse — See selector and details. Use Collapse all / Expand all at the top.
- Add assertion Pro — Add text, visibility, attribute, count, URL, or value assertion after a step.
- Extract value to variable — Capture text, attribute, or input value for data-driven runs.
- Move up / down, Duplicate Pro
- Run from step, Run single step, Edit selector Pro
- Delete — Remove the step (with confirmation).
Export steps as JSON (top of list) Pro — Download the test as JSON; re-import from the Export tab.
7 Assertions
Add assertions from the Actions tab (next to a step) or from the floating toolbar (Assert URL only).
| Type | Description |
|---|---|
| Text | Element text equals, contains, or matches a value. |
| Visibility | Element is visible or hidden. |
| Attribute | Attribute (e.g. href, disabled) equals or contains a value. |
| Count | Number of elements matching the selector. |
| URL | Current page URL equals or contains a value (toolbar or panel). |
| Value | Input value equals or contains a value. |
8 Data-driven tests
The Variables & Data tab (Pro) lets you run the same test with different data (e.g. multiple logins).
Variables
Declare names (e.g. username, password). Use Extract value to variable to capture from the page, or {{variableName}} in type/navigate steps.
Data source
Paste CSV (first row = headers) or JSON (array of objects). Example:
username,password,role
alice,secret123,admin
bob,pass456,user
Run with data
Click Run with data. The test runs once per row; variables are replaced. You can import a CSV/JSON file via the file picker.
9 Export
The Export tab generates code from your actions, assertions, and conditional blocks.
- Languages: JavaScript (Playwright), Python, Java, C#, Ruby (Selenium). Some may be Pro.
- Copy code / Download — Default language and indent in Settings.
- Conditional logic — Wrap step ranges in if/for/while/switch (export-only; doesn’t change playback).
- Import test Pro — Load a JSON test (same format as Export steps as JSON).
- AI Export (Pro, optional) — If configured, Generate with AI sends actions to your endpoint and shows returned code.
10 Test Suites
The Suites tab (Pro) is where you save tests and run them in groups.
Saved tests
Search by name/description, Load, Run, Rename, Export as JSON, Delete. After a run: pass/fail counts, expand step details, Download report (HTML with screenshots).
Suites
Create suite — Name it, add tests in order, optionally set Setup (run once before) and Teardown (run once after). Run suite runs setup → tests → teardown.
11 Playback & reports
Run test Pro runs the current (or selected) test in a new tab. Progress shows in the panel. Run from step / Run single step Pro start at a specific step or run only one step.
Download report creates a self-contained HTML file: test name, date, summary (total/passed/failed), and each step with status, description, error (if any), and screenshot. Open or share the file in any browser.
12 Settings
Recording — Auto-save, notifications, hovers, keystrokes, smart waits, pause on blur.
Selectors — Prefer data-testid/ARIA, XPath, short selectors, locator order (id → xpath → css).
Export — Default language, indent size, comments, async.
Appearance — Theme: Light, Dark, or System.
Advanced — Developer mode, debug logs. Pro dev override unlocks Pro features for local testing (don’t use in production).
Export / Import / Reset — Save or load settings as JSON; reset to defaults. Settings can be overridden via extension-config.json for deployers.
13 Pro features
Typically gated as Pro: Run test, Run from step, Run single step; Reorder/Duplicate steps; Test Suites (save, load, suite, setup/teardown); Record assertions, Insert wait, Record scroll; Edit selector; Variables & Data; Import test, Export as JSON; some export languages; AI Export when configured.
Enable Pro dev override in Settings → Advanced to unlock Pro locally for development or testing.
14 Tips & troubleshooting
- “No valid webpage” — Open a normal web page (https) in the tab you want to record. Chrome/extension pages can’t be recorded.
- “Receiving end does not exist” — Refresh the page and try again so the content script loads.
- Selectors break — Prefer
data-testidor stable IDs. Use Edit selector (Pro) to fix a step. - Run test fails immediately — Ensure the tab is on the correct start URL. Try Run from step from the first action.
- Data-driven: variables not replaced — Declare variable names and use
{{name}}in steps; names must match data columns/keys. - Export empty or errors — Ensure at least one action; check conditional block step ranges.
data-testid or id on important elements. Enable “Prefer data-testid” and “Prefer ARIA labels” in Settings → Selectors.