Recorder Lab

Isolierte Teststrecke fuer Recorder, Assertions und globale Fixes

Diese Seite ist absichtlich getrennt vom restlichen Produkt. Hier kannst du Flows aufbauen, Error-Zustaende provozieren und alle typischen UI-Muster gegen die Extension testen.

Route
/test
einzeln loeschbar

Clicks

CTA-Buttons, Icon-Buttons, Tabs, Dropdown-Triggers

Inputs

Checkboxes, Radios, Textarea, Native Select, Submit

Debug

Event-Log, Source-Snippets, simulierte Error-Zustaende

Nur fuer Tests

Kein Produkt-Flow, keine API-Abhaengigkeit noetig.

Wenn spaeter nicht mehr benoetigt, reicht es, die Route und diese eine Page-Datei zu entfernen.

Die Controls sind absichtlich gemischt: native Elemente, klickbare Listen, modale Zustande und Fehlerboxen.

Dadurch kannst du reproduzierbare Flows aufnehmen und ich kann dieselben Probleme spaeter global im Recorder beheben.

Form Playground

Inputs, submits und sichtbare Success/Error-Zustaende.

Plan Type

Interaction Zoo

Dropdowns, checklisten, accordions, modal und Buttons.

Checklist

Custom Dropdown

Recorder hint: hier steht absichtlich ein laengerer Textblock fuer Assertions wie contains, visible oder expected value.

Event Log

Direkt sichtbar fuer schnelle Reproduktion.

SaaS State Simulator

Deployments, Env Vars, Billing, Toasts, Loading und Fehler so nah wie moeglich an echten SaaS-Oberflaechen.

API Scenario

Surface

tracepilots-web
Production-like control surface for recorder tests
live sandbox

Table + Inline Actions

Noch mehr Targets fuer Click- und Text-Assertions.

FlowStatusActions
Checkout flow Healthy
Login recovery Warning
Pricing CTA Failed

Source Snippets

Kurze Referenzbloecke fuer reproduzierbare Fehleranalyse.

Auth Form 
<form data-test="auth-form">
  <input name="email" />
  <input name="password" type="password" />
  <button type="submit">Submit</button>
</form>
Checklist 
<fieldset data-test="checklist">
  <label><input type="checkbox" /> Cookie banner</label>
  <label><input type="checkbox" /> Search autocomplete</label>
  <label><input type="checkbox" /> Checkout stepper</label>
</fieldset>
Custom Dropdown 
<button aria-haspopup="listbox">Choose environment</button>
<ul role="listbox">
  <li role="option">Production</li>
  <li role="option">Staging</li>
  <li role="option">Preview</li>
</ul>
Error State 
<div data-test="error-card">
  <p>Status: request failed</p>
  <pre>POST /api/demo 500</pre>
</div>