@assertrx/dino 1.0.10 → 1.0.11

package/skills/generating-browser-tests/reference/browser-api.md

@@ -0,0 +1,251 @@
+# k6 Browser API Reference
+
+## Page API
+
+### Navigation
+
+```javascript
+await page.goto(url, {
+  waitUntil: 'networkidle',  // 'domcontentloaded' | 'load' | 'networkidle'
+  timeout: 30000,
+  referer: 'https://referrer.example.com',
+});
+
+await page.waitForNavigation({
+  waitUntil: 'networkidle',
+  timeout: 30000,
+});
+
+await page.waitForLoadState('networkidle');  // 'domcontentloaded' | 'load' | 'networkidle'
+
+await page.goBack();
+await page.goForward();
+await page.reload();
+```
+
+### Page Information
+
+```javascript
+page.url();                    // Current URL (sync)
+await page.title();            // Page title
+await page.content();          // Full HTML content
+```
+
+### Screenshots
+
+```javascript
+await page.screenshot({
+  path: 'screenshot.png',
+  fullPage: true,              // false = viewport only
+  type: 'png',                 // 'png' | 'jpeg'
+  quality: 80,                 // JPEG quality (0-100)
+  omitBackground: false,       // Transparent background
+  clip: { x: 0, y: 0, width: 800, height: 600 },  // Clipping region
+});
+```
+
+### Element Selection
+
+```javascript
+// CSS selector
+page.locator('div.container > button.primary')
+
+// Semantic selectors (recommended)
+page.getByRole('button', { name: 'Submit' })
+page.getByLabel('Email address')
+page.getByPlaceholder('Search...')
+page.getByText('Welcome back')
+page.getByTestId('login-form')
+page.getByAltText('Company logo')
+page.getByTitle('Settings')
+```
+
+### Executing JavaScript
+
+```javascript
+const result = await page.evaluate(() => {
+  return {
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight,
+    userAgent: navigator.userAgent,
+  };
+});
+
+// Pass arguments
+const text = await page.evaluate((selector) => {
+  return document.querySelector(selector).textContent;
+}, '.header');
+```
+
+### Event Handlers
+
+```javascript
+page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
+page.on('request', (req) => console.log('REQUEST:', req.url()));
+page.on('response', (res) => console.log('RESPONSE:', res.url(), res.status()));
+page.on('requestfailed', (req) => console.log('FAILED:', req.url()));
+```
+
+### Timeouts
+
+```javascript
+page.setDefaultTimeout(10000);              // All operations (ms)
+page.setDefaultNavigationTimeout(30000);    // Navigation only (ms)
+```
+
+---
+
+## Locator API
+
+### Interaction Methods
+
+| Method | Description | Returns |
+|--------|-------------|---------|
+| `click([options])` | Click element | `Promise<void>` |
+| `dblclick([options])` | Double-click | `Promise<void>` |
+| `fill(value, [options])` | Fill input/textarea | `Promise<void>` |
+| `type(text, [options])` | Type with key events | `Promise<void>` |
+| `press(key, [options])` | Press key combo | `Promise<void>` |
+| `selectOption(values, [options])` | Select dropdown | `Promise<string[]>` |
+| `check([options])` | Check checkbox | `Promise<void>` |
+| `uncheck([options])` | Uncheck checkbox | `Promise<void>` |
+| `hover([options])` | Hover over element | `Promise<void>` |
+| `tap([options])` | Touch tap | `Promise<void>` |
+
+Click options: `button` ('left'|'middle'|'right'), `clickCount`, `delay`, `force`, `modifiers` (['Alt','Control','Meta','Shift']), `timeout`
+
+### State Queries
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `isVisible()` | `Promise<bool>` | Element is visible |
+| `isHidden()` | `Promise<bool>` | Element is hidden |
+| `isEnabled([options])` | `Promise<bool>` | Element is enabled |
+| `isDisabled([options])` | `Promise<bool>` | Element is disabled |
+| `isEditable([options])` | `Promise<bool>` | Element is editable |
+| `isChecked([options])` | `Promise<bool>` | Checkbox/radio is checked |
+
+### Content Queries
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `textContent([options])` | `Promise<string\|null>` | element.textContent |
+| `innerText([options])` | `Promise<string>` | element.innerText |
+| `innerHTML([options])` | `Promise<string>` | element.innerHTML |
+| `inputValue([options])` | `Promise<string>` | Input value |
+| `getAttribute(name, [options])` | `Promise<string\|null>` | Attribute value |
+
+### Collection Methods
+
+```javascript
+await locator.count();        // Number of matching elements
+locator.first();              // First element (Locator)
+locator.last();               // Last element (Locator)
+locator.nth(2);               // 3rd element, zero-indexed (Locator)
+await locator.all();          // All elements (Locator[])
+```
+
+### Filtering
+
+```javascript
+locator.filter({ hasText: 'Active' });         // Filter by text
+locator.filter({ hasNotText: 'Disabled' });    // Exclude by text
+```
+
+### Waiting
+
+```javascript
+await locator.waitFor({
+  state: 'visible',            // 'attached' | 'visible' | 'hidden' | 'stable'
+  timeout: 5000,
+});
+```
+
+---
+
+## BrowserContext API
+
+### Creating Contexts
+
+```javascript
+const context = await browser.newContext();
+const page = await context.newPage();
+
+// Or directly
+const page = await browser.newPage();  // Uses default context
+```
+
+### Cookie Management
+
+```javascript
+// Add cookies
+await context.addCookies([{
+  name: 'session',
+  value: 'abc123',
+  domain: '.example.com',
+  path: '/',
+  secure: true,
+  httpOnly: true,
+  sameSite: 'Lax',
+  expires: Date.now() / 1000 + 3600,
+}]);
+
+// Get cookies
+const cookies = await context.cookies();
+const siteCookies = await context.cookies(['https://example.com']);
+
+// Clear cookies
+await context.clearCookies();
+```
+
+### Permissions and Geolocation
+
+```javascript
+await context.grantPermissions(['geolocation']);
+await context.setGeolocation({ latitude: 37.7749, longitude: -122.4194 });
+await context.clearPermissions();
+```
+
+### Offline Mode
+
+```javascript
+await context.setOffline(true);   // Simulate offline
+await context.setOffline(false);  // Back online
+```
+
+### Init Scripts
+
+```javascript
+await context.addInitScript('window.__TEST_MODE__ = true;');
+```
+
+---
+
+## Keyboard API
+
+```javascript
+await page.keyboard.type('Hello World', { delay: 100 });
+await page.keyboard.press('Enter');
+await page.keyboard.press('Control+a');
+await page.keyboard.down('Shift');
+await page.keyboard.press('ArrowDown');
+await page.keyboard.up('Shift');
+await page.keyboard.insertText('Pasted text');
+```
+
+## Mouse API
+
+```javascript
+await page.mouse.click(100, 200);
+await page.mouse.dblclick(100, 200);
+await page.mouse.move(100, 200, { steps: 10 });  // Smooth move
+await page.mouse.down();
+await page.mouse.move(300, 400);
+await page.mouse.up();  // Drag effect
+```
+
+## Touchscreen API
+
+```javascript
+await page.touchscreen.tap(100, 200);
+```

package/skills/generating-browser-tests/reference/web-vitals.md

@@ -0,0 +1,148 @@
+# k6 Browser Web Vitals Reference
+
+## Core Web Vitals
+
+| Metric | Full Name | What It Measures | Good | Needs Improvement | Poor |
+|--------|-----------|------------------|------|-------------------|------|
+| LCP | Largest Contentful Paint | Largest visible content render time | < 2.5s | 2.5s - 4s | > 4s |
+| FCP | First Contentful Paint | First content render time | < 1.8s | 1.8s - 3s | > 3s |
+| CLS | Cumulative Layout Shift | Visual stability score | < 0.1 | 0.1 - 0.25 | > 0.25 |
+| INP | Interaction to Next Paint | Input responsiveness | < 200ms | 200ms - 500ms | > 500ms |
+| TTFB | Time to First Byte | Server response time | < 600ms | 600ms - 1.5s | > 1.5s |
+
+## k6 Metric Names
+
+| k6 Metric | Type | Description |
+|-----------|------|-------------|
+| `browser_web_vital_lcp` | Trend | Largest Contentful Paint timing |
+| `browser_web_vital_fcp` | Trend | First Contentful Paint timing |
+| `browser_web_vital_cls` | Trend | Cumulative Layout Shift score |
+| `browser_web_vital_inp` | Trend | Interaction to Next Paint timing |
+| `browser_web_vital_ttfb` | Trend | Time to First Byte timing |
+| `browser_web_vital_fid` | Trend | First Input Delay (deprecated, use INP) |
+
+## Additional Browser Metrics
+
+| k6 Metric | Type | Description |
+|-----------|------|-------------|
+| `browser_data_received` | Counter | Data downloaded (bytes) |
+| `browser_data_sent` | Counter | Data uploaded (bytes) |
+| `browser_http_req_duration` | Trend | Browser HTTP request duration |
+| `browser_http_req_failed` | Rate | Browser failed request rate |
+
+## Threshold Configuration
+
+### Recommended Thresholds
+
+```javascript
+export const options = {
+  thresholds: {
+    // Core Web Vitals (Good targets)
+    'browser_web_vital_lcp': ['p(90)<2500'],   // 90% of pages LCP < 2.5s
+    'browser_web_vital_fcp': ['p(90)<1800'],   // 90% of pages FCP < 1.8s
+    'browser_web_vital_cls': ['p(95)<0.1'],    // 95% of pages CLS < 0.1
+    'browser_web_vital_inp': ['p(90)<200'],    // 90% of interactions INP < 200ms
+    'browser_web_vital_ttfb': ['p(90)<600'],   // 90% of pages TTFB < 600ms
+
+    // Browser network metrics
+    'browser_http_req_failed': ['rate<0.01'],  // Browser request error rate < 1%
+  },
+};
+```
+
+### Strict Thresholds (High-Performance)
+
+```javascript
+thresholds: {
+  'browser_web_vital_lcp': ['p(90)<1500', 'p(99)<2500'],
+  'browser_web_vital_fcp': ['p(90)<1000', 'p(99)<1800'],
+  'browser_web_vital_cls': ['p(99)<0.05'],
+  'browser_web_vital_inp': ['p(90)<100', 'p(99)<200'],
+  'browser_web_vital_ttfb': ['p(90)<300', 'p(99)<600'],
+}
+```
+
+## Custom Performance Measurement
+
+### Using Performance API
+
+```javascript
+export default async function () {
+  const page = await browser.newPage();
+  try {
+    await page.goto('https://app.example.com');
+
+    // Mark start of user action
+    await page.evaluate(() => window.performance.mark('action-start'));
+
+    // Perform action
+    await page.getByRole('button', { name: 'Load Data' }).click();
+    await page.waitForLoadState('networkidle');
+
+    // Mark end and measure
+    await page.evaluate(() => {
+      window.performance.mark('action-end');
+      window.performance.measure('action-time', 'action-start', 'action-end');
+    });
+
+    const duration = await page.evaluate(() =>
+      window.performance.getEntriesByName('action-time')[0].duration
+    );
+
+    console.log(`Action took ${duration}ms`);
+  } finally {
+    await page.close();
+  }
+}
+```
+
+### Using k6 Custom Metrics
+
+```javascript
+import { browser } from 'k6/browser';
+import { Trend } from 'k6/metrics';
+
+const pageLoadTime = new Trend('page_load_time');
+const loginDuration = new Trend('login_duration');
+
+export default async function () {
+  const page = await browser.newPage();
+  try {
+    const start = Date.now();
+    await page.goto('https://app.example.com');
+    await page.waitForLoadState('networkidle');
+    pageLoadTime.add(Date.now() - start);
+
+    const loginStart = Date.now();
+    await page.getByLabel('Email').fill('user@test.com');
+    await page.getByLabel('Password').fill('pass123');
+    await page.getByRole('button', { name: 'Login' }).click();
+    await page.waitForNavigation();
+    loginDuration.add(Date.now() - loginStart);
+  } finally {
+    await page.close();
+  }
+}
+```
+
+## Interpreting Results
+
+### LCP (Largest Contentful Paint)
+- **What affects it:** Large images, web fonts, CSS background images, block-level text
+- **Optimization:** Optimize images, preload critical resources, use CDN, server-side render
+
+### FCP (First Contentful Paint)
+- **What affects it:** Server response time, render-blocking resources, CSS complexity
+- **Optimization:** Reduce server response time, eliminate render-blocking resources, inline critical CSS
+
+### CLS (Cumulative Layout Shift)
+- **What affects it:** Images without dimensions, dynamic content injection, web font loading
+- **Optimization:** Set image dimensions, reserve space for dynamic content, use font-display
+
+### INP (Interaction to Next Paint)
+- **What affects it:** Long JavaScript tasks, heavy DOM manipulation, main thread blocking
+- **Optimization:** Break long tasks, use web workers, optimize event handlers
+
+### TTFB (Time to First Byte)
+- **What affects it:** Server processing time, network latency, TLS negotiation
+- **Optimization:** Server caching, CDN, optimize database queries, HTTP/2

package/skills/generating-tests-from-code/SKILL.md

@@ -0,0 +1,142 @@
+---
+name: generating-tests-from-code
+description: Use when analyzing an existing API codebase to auto-generate k6 load test scripts. Use when the user wants to create k6 tests from source code, route definitions, controllers, or middleware in frameworks like Express, NestJS, Spring Boot, FastAPI, or Django.
+context: fork
+agent: Explore
+---
+
+# Generating k6 Tests from Code
+
+Analyze an existing API codebase to automatically generate k6 load test scripts. Detects endpoints, authentication patterns, request/response shapes, and generates comprehensive test suites.
+
+## Workflow
+
+Follow this workflow strictly in order:
+
+### Step 1: Security & Authentication Analysis (Prerequisite)
+
+**Before analyzing routes, always detect the authentication mechanism first.**
+
+1. **Scan for auth middleware/decorators:**
+   - Look for authentication middleware, guards, decorators, or filters
+   - Identify the auth type: JWT, session, OAuth2, API Key, Basic Auth
+   - Determine which endpoints are protected vs public
+
+2. **Extract the authentication flow:**
+   - Find login/token endpoints
+   - Identify how tokens are obtained, refreshed, and passed
+   - Check for CSRF protection patterns
+
+3. **Generate k6 auth setup:**
+   - Create `setup()` function for authentication
+   - Configure token/session handling for `default()` function
+   - Handle token refresh if needed
+
+See [reference/auth-analysis.md](reference/auth-analysis.md) for auth detection patterns per framework.
+
+### Step 2: Route & Controller Analysis
+
+1. **Scan route definitions:**
+   - Map all endpoints with HTTP methods
+   - Extract URL parameters, query parameters, request body schemas
+   - Identify middleware chain per route
+
+2. **Extract request/response shapes:**
+   - Analyze request body types/validation
+   - Identify required vs optional fields
+   - Note content types (JSON, form-data, multipart)
+
+3. **Categorize endpoints:**
+   - Group by resource/domain (users, products, orders, etc.)
+   - Identify CRUD patterns
+   - Note rate-limited or special endpoints
+
+See [reference/framework-patterns.md](reference/framework-patterns.md) for framework-specific analysis patterns.
+
+### Step 3: Scenario Design
+
+1. **Map endpoints to test scenarios:**
+   - High-traffic endpoints → higher iteration rate
+   - CRUD sequences → grouped in order (create → read → update → delete)
+   - Background/admin endpoints → lower priority
+
+2. **Design realistic user flows:**
+   - Login → browse → select → purchase
+   - Weighted distribution matching production traffic
+
+### Step 4: Script Generation
+
+Generate the k6 test script with:
+- `setup()` for authentication
+- `default()` with grouped endpoint calls
+- Checks for each response
+- Appropriate thresholds
+- Data parameterization where needed
+- Tags for per-endpoint metrics
+
+## Supported Frameworks
+
+### Node.js
+- **Express** — `app.get()`, `router.get()`, route files
+- **Fastify** — `fastify.get()`, route plugins, schemas
+- **NestJS** — `@Controller()`, `@Get()`, `@Post()` decorators, Guards
+
+### Java
+- **Spring Boot** — `@RestController`, `@GetMapping`, `@PostMapping`, `@RequestMapping`, Security config
+
+### Python
+- **FastAPI** — `@app.get()`, `@router.get()`, Pydantic models, Depends()
+- **Django REST Framework** — `ViewSet`, `@api_view`, `urlpatterns`, permissions
+
+## Output Structure
+
+The generated script should follow this structure:
+
+```javascript
+import http from 'k6/http';
+import { check, group, sleep } from 'k6';
+import { SharedArray } from 'k6/data';
+
+// Test data (if applicable)
+const testData = new SharedArray('data', function () {
+  return JSON.parse(open('./test-data.json'));
+});
+
+export const options = {
+  scenarios: { /* ... */ },
+  thresholds: { /* ... */ },
+};
+
+// Authentication setup
+export function setup() {
+  // Login and return auth token/session
+}
+
+// Main test function
+export default function (data) {
+  const headers = {
+    'Content-Type': 'application/json',
+    'Authorization': `Bearer ${data.token}`,
+  };
+
+  group('Resource A', () => {
+    // CRUD operations for Resource A
+  });
+
+  group('Resource B', () => {
+    // CRUD operations for Resource B
+  });
+
+  sleep(1);
+}
+
+export function teardown(data) {
+  // Cleanup if needed
+}
+```
+
+## Related Skills
+
+- For HTTP/gRPC/WebSocket API patterns: `/k6:generating-api-load-tests`
+- For scenario and threshold design: `/k6:designing-test-scenarios`
+- For OpenAPI spec-based generation: `/k6:generating-tests-from-openapi`