New awesome agent primitive

skills/webapp-testing/SKILL.md

@@ -0,0 +1,116 @@
+---
+name: webapp-testing
+description: Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
+---
+
+# Web Application Testing
+
+This skill enables comprehensive testing and debugging of local web applications using Playwright automation.
+
+## When to Use This Skill
+
+Use this skill when you need to:
+- Test frontend functionality in a real browser
+- Verify UI behavior and interactions
+- Debug web application issues
+- Capture screenshots for documentation or debugging
+- Inspect browser console logs
+- Validate form submissions and user flows
+- Check responsive design across viewports
+
+## Prerequisites
+
+- Node.js installed on the system
+- A locally running web application (or accessible URL)
+- Playwright will be installed automatically if not present
+
+## Core Capabilities
+
+### 1. Browser Automation
+- Navigate to URLs
+- Click buttons and links
+- Fill form fields
+- Select dropdowns
+- Handle dialogs and alerts
+
+### 2. Verification
+- Assert element presence
+- Verify text content
+- Check element visibility
+- Validate URLs
+- Test responsive behavior
+
+### 3. Debugging
+- Capture screenshots
+- View console logs
+- Inspect network requests
+- Debug failed tests
+
+## Usage Examples
+
+### Example 1: Basic Navigation Test
+```javascript
+// Navigate to a page and verify title
+await page.goto('http://localhost:3000');
+const title = await page.title();
+console.log('Page title:', title);
+```
+
+### Example 2: Form Interaction
+```javascript
+// Fill out and submit a form
+await page.fill('#username', 'testuser');
+await page.fill('#password', 'password123');
+await page.click('button[type="submit"]');
+await page.waitForURL('**/dashboard');
+```
+
+### Example 3: Screenshot Capture
+```javascript
+// Capture a screenshot for debugging
+await page.screenshot({ path: 'debug.png', fullPage: true });
+```
+
+## Guidelines
+
+1. **Always verify the app is running** - Check that the local server is accessible before running tests
+2. **Use explicit waits** - Wait for elements or navigation to complete before interacting
+3. **Capture screenshots on failure** - Take screenshots to help debug issues
+4. **Clean up resources** - Always close the browser when done
+5. **Handle timeouts gracefully** - Set reasonable timeouts for slow operations
+6. **Test incrementally** - Start with simple interactions before complex flows
+7. **Use selectors wisely** - Prefer data-testid or role-based selectors over CSS classes
+
+## Common Patterns
+
+### Pattern: Wait for Element
+```javascript
+await page.waitForSelector('#element-id', { state: 'visible' });
+```
+
+### Pattern: Check if Element Exists
+```javascript
+const exists = await page.locator('#element-id').count() > 0;
+```
+
+### Pattern: Get Console Logs
+```javascript
+page.on('console', msg => console.log('Browser log:', msg.text()));
+```
+
+### Pattern: Handle Errors
+```javascript
+try {
+  await page.click('#button');
+} catch (error) {
+  await page.screenshot({ path: 'error.png' });
+  throw error;
+}
+```
+
+## Limitations
+
+- Requires Node.js environment
+- Cannot test native mobile apps (use React Native Testing Library instead)
+- May have issues with complex authentication flows
+- Some modern frameworks may require specific configuration

skills/webapp-testing/test-helper.js

@@ -0,0 +1,56 @@
+/**
+ * Helper utilities for web application testing with Playwright
+ */
+
+/**
+ * Wait for a condition to be true with timeout
+ * @param {Function} condition - Function that returns boolean
+ * @param {number} timeout - Timeout in milliseconds
+ * @param {number} interval - Check interval in milliseconds
+ */
+async function waitForCondition(condition, timeout = 5000, interval = 100) {
+  const startTime = Date.now();
+  while (Date.now() - startTime < timeout) {
+    if (await condition()) {
+      return true;
+    }
+    await new Promise(resolve => setTimeout(resolve, interval));
+  }
+  throw new Error('Condition not met within timeout');
+}
+
+/**
+ * Capture browser console logs
+ * @param {Page} page - Playwright page object
+ * @returns {Array} Array of console messages
+ */
+function captureConsoleLogs(page) {
+  const logs = [];
+  page.on('console', msg => {
+    logs.push({
+      type: msg.type(),
+      text: msg.text(),
+      timestamp: new Date().toISOString()
+    });
+  });
+  return logs;
+}
+
+/**
+ * Take screenshot with automatic naming
+ * @param {Page} page - Playwright page object
+ * @param {string} name - Base name for screenshot
+ */
+async function captureScreenshot(page, name) {
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const filename = `${name}-${timestamp}.png`;
+  await page.screenshot({ path: filename, fullPage: true });
+  console.log(`Screenshot saved: ${filename}`);
+  return filename;
+}
+
+module.exports = {
+  waitForCondition,
+  captureConsoleLogs,
+  captureScreenshot
+};