90 lines
2.5 KiB
Markdown
90 lines
2.5 KiB
Markdown
# 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; }'
|
|
});
|
|
```
|