@designcrowd/fe-shared-lib 1.6.10-voiceText-1 → 1.6.10

package/.claude/skills/playwright-cli/references/storage-state.md

@@ -1,275 +0,0 @@
-# Storage Management
-
-Manage cookies, localStorage, sessionStorage, and browser storage state.
-
-## Storage State
-
-Save and restore complete browser state including cookies and storage.
-
-### Save Storage State
-
-```bash
-# Save to auto-generated filename (storage-state-{timestamp}.json)
-playwright-cli state-save
-
-# Save to specific filename
-playwright-cli state-save my-auth-state.json
-```
-
-### Restore Storage State
-
-```bash
-# Load storage state from file
-playwright-cli state-load my-auth-state.json
-
-# Reload page to apply cookies
-playwright-cli open https://example.com
-```
-
-### Storage State File Format
-
-The saved file contains:
-
-```json
-{
-  "cookies": [
-    {
-      "name": "session_id",
-      "value": "abc123",
-      "domain": "example.com",
-      "path": "/",
-      "expires": 1735689600,
-      "httpOnly": true,
-      "secure": true,
-      "sameSite": "Lax"
-    }
-  ],
-  "origins": [
-    {
-      "origin": "https://example.com",
-      "localStorage": [
-        { "name": "theme", "value": "dark" },
-        { "name": "user_id", "value": "12345" }
-      ]
-    }
-  ]
-}
-```
-
-## Cookies
-
-### List All Cookies
-
-```bash
-playwright-cli cookie-list
-```
-
-### Filter Cookies by Domain
-
-```bash
-playwright-cli cookie-list --domain=example.com
-```
-
-### Filter Cookies by Path
-
-```bash
-playwright-cli cookie-list --path=/api
-```
-
-### Get Specific Cookie
-
-```bash
-playwright-cli cookie-get session_id
-```
-
-### Set a Cookie
-
-```bash
-# Basic cookie
-playwright-cli cookie-set session abc123
-
-# Cookie with options
-playwright-cli cookie-set session abc123 --domain=example.com --path=/ --httpOnly --secure --sameSite=Lax
-
-# Cookie with expiration (Unix timestamp)
-playwright-cli cookie-set remember_me token123 --expires=1735689600
-```
-
-### Delete a Cookie
-
-```bash
-playwright-cli cookie-delete session_id
-```
-
-### Clear All Cookies
-
-```bash
-playwright-cli cookie-clear
-```
-
-### Advanced: Multiple Cookies or Custom Options
-
-For complex scenarios like adding multiple cookies at once, use `run-code`:
-
-```bash
-playwright-cli run-code "async page => {
-  await page.context().addCookies([
-    { name: 'session_id', value: 'sess_abc123', domain: 'example.com', path: '/', httpOnly: true },
-    { name: 'preferences', value: JSON.stringify({ theme: 'dark' }), domain: 'example.com', path: '/' }
-  ]);
-}"
-```
-
-## Local Storage
-
-### List All localStorage Items
-
-```bash
-playwright-cli localstorage-list
-```
-
-### Get Single Value
-
-```bash
-playwright-cli localstorage-get token
-```
-
-### Set Value
-
-```bash
-playwright-cli localstorage-set theme dark
-```
-
-### Set JSON Value
-
-```bash
-playwright-cli localstorage-set user_settings '{"theme":"dark","language":"en"}'
-```
-
-### Delete Single Item
-
-```bash
-playwright-cli localstorage-delete token
-```
-
-### Clear All localStorage
-
-```bash
-playwright-cli localstorage-clear
-```
-
-### Advanced: Multiple Operations
-
-For complex scenarios like setting multiple values at once, use `run-code`:
-
-```bash
-playwright-cli run-code "async page => {
-  await page.evaluate(() => {
-    localStorage.setItem('token', 'jwt_abc123');
-    localStorage.setItem('user_id', '12345');
-    localStorage.setItem('expires_at', Date.now() + 3600000);
-  });
-}"
-```
-
-## Session Storage
-
-### List All sessionStorage Items
-
-```bash
-playwright-cli sessionstorage-list
-```
-
-### Get Single Value
-
-```bash
-playwright-cli sessionstorage-get form_data
-```
-
-### Set Value
-
-```bash
-playwright-cli sessionstorage-set step 3
-```
-
-### Delete Single Item
-
-```bash
-playwright-cli sessionstorage-delete step
-```
-
-### Clear sessionStorage
-
-```bash
-playwright-cli sessionstorage-clear
-```
-
-## IndexedDB
-
-### List Databases
-
-```bash
-playwright-cli run-code "async page => {
-  return await page.evaluate(async () => {
-    const databases = await indexedDB.databases();
-    return databases;
-  });
-}"
-```
-
-### Delete Database
-
-```bash
-playwright-cli run-code "async page => {
-  await page.evaluate(() => {
-    indexedDB.deleteDatabase('myDatabase');
-  });
-}"
-```
-
-## Common Patterns
-
-### Authentication State Reuse
-
-```bash
-# Step 1: Login and save state
-playwright-cli open https://app.example.com/login
-playwright-cli snapshot
-playwright-cli fill e1 "user@example.com"
-playwright-cli fill e2 "password123"
-playwright-cli click e3
-
-# Save the authenticated state
-playwright-cli state-save auth.json
-
-# Step 2: Later, restore state and skip login
-playwright-cli state-load auth.json
-playwright-cli open https://app.example.com/dashboard
-# Already logged in!
-```
-
-### Save and Restore Roundtrip
-
-```bash
-# Set up authentication state
-playwright-cli open https://example.com
-playwright-cli eval "() => { document.cookie = 'session=abc123'; localStorage.setItem('user', 'john'); }"
-
-# Save state to file
-playwright-cli state-save my-session.json
-
-# ... later, in a new session ...
-
-# Restore state
-playwright-cli state-load my-session.json
-playwright-cli open https://example.com
-# Cookies and localStorage are restored!
-```
-
-## Security Notes
-
-- Never commit storage state files containing auth tokens
-- Add `*.auth-state.json` to `.gitignore`
-- Delete state files after automation completes
-- Use environment variables for sensitive data
-- By default, sessions run in-memory mode which is safer for sensitive operations

package/.claude/skills/playwright-cli/references/test-generation.md

@@ -1,88 +0,0 @@
-# Test Generation
-
-Generate Playwright test code automatically as you interact with the browser.
-
-## How It Works
-
-Every action you perform with `playwright-cli` generates corresponding Playwright TypeScript code.
-This code appears in the output and can be copied directly into your test files.
-
-## Example Workflow
-
-```bash
-# Start a session
-playwright-cli open https://example.com/login
-
-# Take a snapshot to see elements
-playwright-cli snapshot
-# Output shows: e1 [textbox "Email"], e2 [textbox "Password"], e3 [button "Sign In"]
-
-# Fill form fields - generates code automatically
-playwright-cli fill e1 "user@example.com"
-# Ran Playwright code:
-# await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com');
-
-playwright-cli fill e2 "password123"
-# Ran Playwright code:
-# await page.getByRole('textbox', { name: 'Password' }).fill('password123');
-
-playwright-cli click e3
-# Ran Playwright code:
-# await page.getByRole('button', { name: 'Sign In' }).click();
-```
-
-## Building a Test File
-
-Collect the generated code into a Playwright test:
-
-```typescript
-import { test, expect } from '@playwright/test';
-
-test('login flow', async ({ page }) => {
-  // Generated code from playwright-cli session:
-  await page.goto('https://example.com/login');
-  await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com');
-  await page.getByRole('textbox', { name: 'Password' }).fill('password123');
-  await page.getByRole('button', { name: 'Sign In' }).click();
-
-  // Add assertions
-  await expect(page).toHaveURL(/.*dashboard/);
-});
-```
-
-## Best Practices
-
-### 1. Use Semantic Locators
-
-The generated code uses role-based locators when possible, which are more resilient:
-
-```typescript
-// Generated (good - semantic)
-await page.getByRole('button', { name: 'Submit' }).click();
-
-// Avoid (fragile - CSS selectors)
-await page.locator('#submit-btn').click();
-```
-
-### 2. Explore Before Recording
-
-Take snapshots to understand the page structure before recording actions:
-
-```bash
-playwright-cli open https://example.com
-playwright-cli snapshot
-# Review the element structure
-playwright-cli click e5
-```
-
-### 3. Add Assertions Manually
-
-Generated code captures actions but not assertions. Add expectations in your test:
-
-```typescript
-// Generated action
-await page.getByRole('button', { name: 'Submit' }).click();
-
-// Manual assertion
-await expect(page.getByText('Success')).toBeVisible();
-```

package/.claude/skills/playwright-cli/references/tracing.md

@@ -1,139 +0,0 @@
-# Tracing
-
-Capture detailed execution traces for debugging and analysis. Traces include DOM snapshots, screenshots, network activity, and console logs.
-
-## Basic Usage
-
-```bash
-# Start trace recording
-playwright-cli tracing-start
-
-# Perform actions
-playwright-cli open https://example.com
-playwright-cli click e1
-playwright-cli fill e2 "test"
-
-# Stop trace recording
-playwright-cli tracing-stop
-```
-
-## Trace Output Files
-
-When you start tracing, Playwright creates a `traces/` directory with several files:
-
-### `trace-{timestamp}.trace`
-
-**Action log** - The main trace file containing:
-- Every action performed (clicks, fills, navigations)
-- DOM snapshots before and after each action
-- Screenshots at each step
-- Timing information
-- Console messages
-- Source locations
-
-### `trace-{timestamp}.network`
-
-**Network log** - Complete network activity:
-- All HTTP requests and responses
-- Request headers and bodies
-- Response headers and bodies
-- Timing (DNS, connect, TLS, TTFB, download)
-- Resource sizes
-- Failed requests and errors
-
-### `resources/`
-
-**Resources directory** - Cached resources:
-- Images, fonts, stylesheets, scripts
-- Response bodies for replay
-- Assets needed to reconstruct page state
-
-## What Traces Capture
-
-| Category | Details |
-|----------|---------|
-| **Actions** | Clicks, fills, hovers, keyboard input, navigations |
-| **DOM** | Full DOM snapshot before/after each action |
-| **Screenshots** | Visual state at each step |
-| **Network** | All requests, responses, headers, bodies, timing |
-| **Console** | All console.log, warn, error messages |
-| **Timing** | Precise timing for each operation |
-
-## Use Cases
-
-### Debugging Failed Actions
-
-```bash
-playwright-cli tracing-start
-playwright-cli open https://app.example.com
-
-# This click fails - why?
-playwright-cli click e5
-
-playwright-cli tracing-stop
-# Open trace to see DOM state when click was attempted
-```
-
-### Analyzing Performance
-
-```bash
-playwright-cli tracing-start
-playwright-cli open https://slow-site.com
-playwright-cli tracing-stop
-
-# View network waterfall to identify slow resources
-```
-
-### Capturing Evidence
-
-```bash
-# Record a complete user flow for documentation
-playwright-cli tracing-start
-
-playwright-cli open https://app.example.com/checkout
-playwright-cli fill e1 "4111111111111111"
-playwright-cli fill e2 "12/25"
-playwright-cli fill e3 "123"
-playwright-cli click e4
-
-playwright-cli tracing-stop
-# Trace shows exact sequence of events
-```
-
-## Trace vs Video vs Screenshot
-
-| Feature | Trace | Video | Screenshot |
-|---------|-------|-------|------------|
-| **Format** | .trace file | .webm video | .png/.jpeg image |
-| **DOM inspection** | Yes | No | No |
-| **Network details** | Yes | No | No |
-| **Step-by-step replay** | Yes | Continuous | Single frame |
-| **File size** | Medium | Large | Small |
-| **Best for** | Debugging | Demos | Quick capture |
-
-## Best Practices
-
-### 1. Start Tracing Before the Problem
-
-```bash
-# Trace the entire flow, not just the failing step
-playwright-cli tracing-start
-playwright-cli open https://example.com
-# ... all steps leading to the issue ...
-playwright-cli tracing-stop
-```
-
-### 2. Clean Up Old Traces
-
-Traces can consume significant disk space:
-
-```bash
-# Remove traces older than 7 days
-find .playwright-cli/traces -mtime +7 -delete
-```
-
-## Limitations
-
-- Traces add overhead to automation
-- Large traces can consume significant disk space
-- Some dynamic content may not replay perfectly

package/.claude/skills/playwright-cli/references/video-recording.md

@@ -1,43 +0,0 @@
-# Video Recording
-
-Capture browser automation sessions as video for debugging, documentation, or verification. Produces WebM (VP8/VP9 codec).
-
-## Basic Recording
-
-```bash
-# Start recording
-playwright-cli video-start
-
-# Perform actions
-playwright-cli open https://example.com
-playwright-cli snapshot
-playwright-cli click e1
-playwright-cli fill e2 "test input"
-
-# Stop and save
-playwright-cli video-stop demo.webm
-```
-
-## Best Practices
-
-### 1. Use Descriptive Filenames
-
-```bash
-# Include context in filename
-playwright-cli video-stop recordings/login-flow-2024-01-15.webm
-playwright-cli video-stop recordings/checkout-test-run-42.webm
-```
-
-## Tracing vs Video
-
-| Feature | Video | Tracing |
-|---------|-------|---------|
-| Output | WebM file | Trace file (viewable in Trace Viewer) |
-| Shows | Visual recording | DOM snapshots, network, console, actions |
-| Use case | Demos, documentation | Debugging, analysis |
-| Size | Larger | Smaller |
-
-## Limitations
-
-- Recording adds slight overhead to automation
-- Large recordings can consume significant disk space

package/.playwright-cli/page-2026-04-13T02-23-08-374Z.yml

@@ -1,68 +0,0 @@
-- generic [ref=e3]:
-  - navigation "Global" [ref=e6]:
-    - generic [ref=e10]:
-      - generic [ref=e11]:
-        - link "Skip to canvas" [ref=e12] [cursor=pointer]:
-          - /url: "#storybook-preview-wrapper"
-        - link "Storybook" [ref=e14] [cursor=pointer]:
-          - /url: ./
-          - img "Storybook" [ref=e15]
-        - button "Shortcuts" [ref=e21] [cursor=pointer]:
-          - img [ref=e22]
-      - generic [ref=e25]: Search for components
-      - combobox "Search for components" [ref=e27]:
-        - generic:
-          - img
-        - searchbox "Search for components" [ref=e28]
-        - code: ⌃ K
-  - main [ref=e52]:
-    - generic [ref=e54]:
-      - generic [ref=e55]:
-        - button "Remount component" [ref=e56] [cursor=pointer]:
-          - img [ref=e57]
-        - button "Zoom in" [ref=e59] [cursor=pointer]:
-          - img [ref=e60]
-        - button "Zoom out" [ref=e63] [cursor=pointer]:
-          - img [ref=e64]
-        - button "Reset zoom" [ref=e67] [cursor=pointer]:
-          - img [ref=e68]
-        - button "Enable measure" [ref=e71] [cursor=pointer]:
-          - img [ref=e72]
-        - button "Apply outlines to the preview" [ref=e75] [cursor=pointer]:
-          - img [ref=e76]
-        - button "Change the size of the preview" [ref=e79] [cursor=pointer]:
-          - img [ref=e80]
-        - button "Vision simulator" [ref=e85] [cursor=pointer]:
-          - img [ref=e86]
-        - generic:
-          - img
-      - generic [ref=e90]:
-        - button "Go full screen" [ref=e91] [cursor=pointer]:
-          - img [ref=e92]
-        - link "Open canvas in new tab" [ref=e94] [cursor=pointer]:
-          - /url: iframe.html?id=components-voicetotextbutton--prompt-input-demo
-          - img [ref=e95]
-        - button "Copy canvas link" [ref=e98] [cursor=pointer]:
-          - img [ref=e99]
-    - generic [ref=e103]:
-      - progressbar "Content is loading..." [ref=e105]
-      - generic [ref=e106]:
-        - link "Skip to sidebar" [ref=e107] [cursor=pointer]:
-          - /url: "#components-voicetotextbutton--prompt-input-demo"
-        - iframe [ref=e108]:
-          
-  - generic [ref=e113]:
-    - tablist [ref=e115]:
-      - tab "Controls" [ref=e116] [cursor=pointer]:
-        - generic [ref=e118]: Controls
-      - tab "Actions" [ref=e119] [cursor=pointer]:
-        - generic [ref=e121]: Actions
-      - tab "Interactions" [ref=e122] [cursor=pointer]:
-        - generic [ref=e124]: Interactions
-      - tab "Accessibility" [ref=e125] [cursor=pointer]:
-        - generic [ref=e127]: Accessibility
-    - generic [ref=e130]:
-      - button "Change addon orientation [alt D]" [ref=e131] [cursor=pointer]:
-        - img [ref=e132]
-      - button "Hide addons [alt A]" [ref=e135] [cursor=pointer]:
-        - img [ref=e136]