lib-e2e-cypress-for-dummys-ts 0.6.0 → 0.8.0

package/README.md

@@ -123,13 +123,38 @@ The recorder automatically captures:
 | Interaction | Generated Cypress command |
 |---|---|
 | Click on a button or element | `cy.get('[data-cy="submit"]').click()` |
+| Double-click | `cy.get('[data-cy="row"]').dblclick()` |
+| Right-click | `cy.get('[data-cy="ctx"]').rightclick()` |
+| Check / uncheck a checkbox | `cy.get('[data-cy="agree"]').check()` / `.uncheck()` |
+| Pick a radio | `cy.get('[data-cy="plan"]').check()` |
 | Type into a text field | `cy.get('[data-cy="email"]').clear().type('user@example.com')` |
+| Press Enter / Escape in a field | `cy.get('[data-cy="q"]').type('{enter}')` / `type('{esc}')` |
 | Select a `<select>` value | `cy.get('[data-cy="country"]').select('ES')` |
 | SPA route change (push/replace/popstate) | `cy.url().should('include', '/dashboard')` |
 | Page load | `cy.visit('/current-path')` |
 
 Input events are **debounced by 1 second** so only the final value is captured, not every keystroke.
 
+#### Capturing assertions while recording — Alt+click
+
+A test that only clicks around but never checks anything is weak. While recording,
+hold **Alt** and click any element to record a **Cypress assertion** for it instead
+of a click — and the element's real action is **suppressed** (no navigation, no form
+submit), so asserting never changes your flow.
+
+The assertion is chosen automatically from the element:
+
+| Element | Generated assertion |
+|---|---|
+| Checkbox / radio | `.should('be.checked')` / `.should('not.be.checked')` |
+| Input / textarea / select with a value | `.should('have.value', '<value>')` |
+| Element with visible text | `.should('contain.text', '<text>')` |
+| Anything else | `.should('be.visible')` |
+
+The captured assertion appears in the **⌨️ Commands** previewer like any other
+command, so you can reorder or delete it. (You can still build assertions manually
+with the assertion builder — see below.)
+
 ---
 
 ### HTTP monitoring
@@ -169,6 +194,23 @@ cy.wait('@post-api-users').then((interception) => {
 
 Fields named `id` or `uid` are always skipped (they change between environments). Array responses fall back to the default empty `.then()` block.
 
+#### Fixture mode (deterministic stubs)
+
+Enable **🧪 Fixtures HTTP** in the settings panel to turn GET responses into
+**Cypress fixtures + stubs** instead of spies. While recording, each GET with a
+JSON body is saved as `cypress/fixtures/<alias>.json` and its interceptor becomes:
+
+```javascript
+cy.intercept('GET', '**/api/users', { fixture: 'get-api-users.json' }).as('get-api-users')
+cy.wait('@get-api-users').then((interception) => { })
+```
+
+so the test replays deterministic data with **no backend**. When you save the
+test, the fixture files are written into your `cypress/fixtures/` folder
+automatically (requires the Cypress folder configured — see the advanced editor
+setup). POST/PUT keep the spy + body-validation behaviour; non-JSON GETs fall back
+to a spy.
+
 ---
 
 ### Selector strategy
@@ -219,11 +261,13 @@ When recording stops, a dialog prompts you to:
 
 - Give the test a **description** (becomes the `it('…')` label)
 - Optionally add **tags** for filtering later (e.g. `smoke`, `login`, `regression`)
+- Optionally add a **ticket** reference (see [Issue tracker links](#issue-tracker-links))
 - Choose **Save** (keeps it in IndexedDB) or **Save and edit** (opens the advanced editor immediately)
 
 The **📋 Tests** panel lets you:
 
 - Browse all saved tests filtered by tag
+- **Group by ticket** — a toggle that clusters tests under their ticket (composes with the tag filter)
 - Expand a test to see its commands and interceptors
 - Copy the full `describe()` block to the clipboard with a custom suite name
 - Copy just the commands or just the interceptors separately
@@ -232,6 +276,36 @@ The **📋 Tests** panel lets you:
 
 ---
 
+### Issue tracker links
+
+Tie a recorded test to a work item in your tracker — **link only, no integration**: the
+library never connects to, authenticates against, or syncs with any platform. It simply
+turns a ticket id into a deep link.
+
+Pick your tracker in the settings panel (**🎫 Issue tracker**) and fill the fields it needs:
+
+| Tracker | Fields | Link built |
+|---|---|---|
+| Jira | Base URL | `{baseUrl}/browse/{id}` |
+| Azure DevOps | Organization, Project | `…/{org}/{project}/_workitems/edit/{id}` |
+| GitHub | Owner, Repository | `github.com/{owner}/{repo}/issues/{id}` |
+| Trello | — | `trello.com/c/{id}` |
+| Custom | URL template (must contain `{id}`) | your template |
+
+Then, when saving a recording, type the ticket id (e.g. `PROJ-123`). The id is stored with
+the test and:
+
+- rendered as a **clickable link** on the test row and its group header;
+- emitted as a **comment above the `it()` block** when the test is inserted into a `.cy.ts`
+  file — e.g. `// PROJ-123 — https://your-org.atlassian.net/browse/PROJ-123`.
+
+The `it()` **title is never modified**, so Cypress `--spec`/grep and snapshot names stay
+stable. Only `http(s)` links are ever produced; anything else falls back to plain text.
+Provider selection and field values are stored per provider, so switching trackers keeps
+your previous entries. See `docs/specs/014-ticket-reference-and-grouping.md`.
+
+---
+
 ### Command previewer
 
 The **⌨️ Commands** panel shows the commands captured in the current (unsaved) recording in real time. While the panel is open you can:
@@ -278,6 +352,7 @@ cypress/          ← select this folder
 4. Interceptors are automatically wrapped in a `beforeEach()`
 5. Alternatively, click **✏️ Editar manualmente** to open a full diff editor with save support
    - Inside the manual editor, click **🪄 Insertar bloques** to auto-merge the `it()` and `beforeEach()` blocks into the editor content (same placement as the automatic insert), then review the diff before saving — no copy/paste needed. The 📋 copy buttons remain available if you prefer to paste manually.
+   - The editor is a **CodeMirror** editor with **TS/JS syntax highlighting** and **Cypress autocomplete** (`cy.get`, `.click()`, `.should`, …). CodeMirror is a normal dependency — it installs automatically with the package and is loaded lazily (its own chunk) only when the editor opens; if it can't load, the editor falls back to a plain textarea.
 
 **Sidebar toolbar:**
 
@@ -378,6 +453,15 @@ recorder.resetWidgetPosition();
 
 ---
 
+### In-app help panel
+
+Not sure what the widget can do? Click the **?** button in the widget (or press
+**Ctrl+Shift+H**) to open a categorised cheat-sheet — shortcuts, what gets
+recorded, assertions, the panels, selectors, HTTP, data, and the advanced
+features — in your language (es/en/fr/it/de).
+
+---
+
 ### Keyboard shortcuts
 
 | Shortcut | Action |
@@ -388,6 +472,8 @@ recorder.resetWidgetPosition();
 | `Ctrl + 1` | Open saved tests panel |
 | `Ctrl + 2` | Open command previewer |
 | `Ctrl + 3` | Open settings |
+| `Ctrl + Shift + H` | Open the in-app **help panel** |
+| `Alt + click` | Capture an assertion for the clicked element |
 
 > `Ctrl + R` / `Ctrl + P` and the panel shortcuts only fire when the widget is **visible**. `Ctrl + Shift + E` always works regardless of visibility state.
 
@@ -603,7 +689,7 @@ class RecordingService {
 
 ```typescript
 class PersistenceService {
-  insertTest(name: string, commands?: string[], interceptors?: string[], tags?: string[]): Promise<number>;
+  insertTest(name: string, commands?: string[], interceptors?: string[], tags?: string[], notes?: string, ticketId?: string): Promise<number>;
   getAllTests(): Promise<TestWithDetails[]>;
   getTestById(testId: number): Promise<TestDetail | null>;
   deleteTest(id: number): Promise<void>;