@designcrowd/fe-shared-lib 1.8.4-edge-fallback-0 → 1.8.4-edge-fallback-2

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-27T23-43-18-200Z.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]