Recorder Workspace
The Workspace (/dashboard/workspace) is the heart of Test Garden. It combines a simulated browser viewport iframe with a step-by-step recording sidebar to let you build comprehensive end-to-end tests visually.
Visual Recording Controls
When you launch a recording session, a Floating Toolbar Overlay appears over the iframe:
- Record Button: Starts capturing clicks, typing, and navigations.
- Assert Button: Enters Inspect Mode, allowing you to select elements to perform text, style, or attribute assertions.
- Pause Button: Temporarily suspends recording so you can bypass non-test flows.
Keyboard Shortcuts
You can control the recording state using global keyboard shortcuts. These shortcuts are active both in the main dashboard and inside the child iframe:
| Action | Shortcut (Mac) | Shortcut (Windows/Linux) |
|---|---|---|
| Toggle Record | ⌥ + R | Alt + R |
| Inspect Assertion | ⌥ + A | Alt + A |
| Pause Recording | ⌥ + P | Alt + P |
Note: Keyboard shortcuts are automatically ignored when you are actively typing inside text inputs, textareas, or content-editable elements.
Capture Mechanics
To keep test suites clean and robust, the injected script captures interactions using advanced heuristic methods:
1. Robust CSS Selector Generation
Instead of capturing fragile coordinate-only clicks, Test Garden calculates clean CSS paths. It automatically escapes special characters using CSS.escape() and filters out generic Tailwind CSS utility classes (e.g. bg-white, px-4, flex) in favor of stable semantic elements, IDs, or distinct custom identifiers.
2. Typing Input Debounce (800ms)
To prevent creating a separate step for every single keystroke, the tracker groups keyboard inputs. It accumulates your typing state locally and sends a single consolidated input step to the database once you pause typing for 800ms.
3. Hover Detection (>600ms)
If you hover your cursor over an interactive element (buttons, dropdown options, menus) for longer than 600ms, the script records a hover step to ensure hover-dependent layouts are visible during playback.
Device Viewport Emulation
At the top of the workspace, you can switch viewports to test how your web app behaves across various form factors:
- Desktop: Renders full-width screen size.
- Tablet: Emulates standard tablet sizes (with Portrait/Landscape rotation).
- Mobile: Emulates mobile dimensions.
Touch & Drag-to-Scroll Simulation
When switching to Mobile or Tablet viewports:
- The native mouse pointer is hidden and replaced by a green touch circle pointer (
#tg-touch-cursor) tracking your cursor with press feedback. - Dragging with the mouse triggers standard touch-screen kinetic and inertial scrolling.
- Click and Assertion listeners are paused during drags to prevent accidental clicks while scrolling.