init

.opencode/skills/web-testing/references/interactive-testing-patterns.md

@@ -0,0 +1,89 @@
+# Interactive Testing Patterns
+
+## Form Testing
+
+```javascript
+// Text input validation
+test('validates email format', async ({ page }) => {
+  await page.fill('[name="email"]', 'invalid');
+  await page.click('button[type="submit"]');
+  await expect(page.locator('.error')).toContainText('Invalid email');
+});
+
+// Select dropdowns
+await page.selectOption('select#country', 'US');
+await page.selectOption('select#country', { label: 'United States' });
+await page.selectOption('select#tags', ['tag1', 'tag2']); // Multi-select
+
+// Checkboxes & radios
+await page.check('input[name="terms"]');
+await expect(page.locator('input[name="terms"]')).toBeChecked();
+await page.uncheck('input[name="newsletter"]');
+await page.check('input[value="premium"]'); // Radio
+
+// File uploads
+await page.setInputFiles('input[type="file"]', 'path/to/file.pdf');
+await page.setInputFiles('input[type="file"]', ['file1.pdf', 'file2.pdf']);
+
+// Date picker
+await page.fill('input[type="date"]', '2025-12-25');
+await page.click('.date-picker-trigger');
+await page.click('.calendar-day:text("25")');
+```
+
+## Keyboard Navigation
+
+```javascript
+test('keyboard accessibility', async ({ page }) => {
+  await page.keyboard.press('Tab');
+  await expect(page.locator(':focus')).toHaveAttribute('data-testid', 'first-btn');
+  await page.keyboard.press('Enter'); // Activate
+  await page.keyboard.press('Escape'); // Close modal
+  await page.keyboard.press('Shift+Tab'); // Navigate backward
+});
+```
+
+## Drag & Drop
+
+```javascript
+await page.dragAndDrop('#source', '#target');
+
+// Manual control
+const source = page.locator('#draggable');
+await source.hover();
+await page.mouse.down();
+await page.locator('#dropzone').hover();
+await page.mouse.up();
+```
+
+## Hover & Modals
+
+```javascript
+await button.hover();
+await expect(page.locator('.tooltip')).toBeVisible();
+
+// Modal workflow
+await page.click('button:text("Open")');
+await expect(page.locator('[role="dialog"]')).toBeVisible();
+await page.click('[aria-label="Close"]');
+await expect(page.locator('[role="dialog"]')).not.toBeVisible();
+```
+
+## Scroll & Wait Patterns
+
+```javascript
+await page.locator('#footer').scrollIntoViewIfNeeded();
+await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+
+// Wait patterns
+await page.waitForLoadState('networkidle');
+await Promise.all([page.waitForResponse('**/api/data'), page.click('button.load')]);
+```
+
+## Disable Animations
+
+```javascript
+await page.addStyleTag({
+  content: '* { animation-duration: 0s !important; transition-duration: 0s !important; }'
+});
+```