sir-chawakorn 🌐 Browser Automation Skill
Use Cases
- TikTok video upload automation
- Form auto-fill testing
- UI validation with screenshots
- Multi-step workflow automation
Workflow
1. Page Navigation
// Navigate and wait for load
await page.goto('https://example.com');
await page.waitForSelector('.target-element');
2. Element Interaction
// Click
await page.click('button[type="submit"]');
// Type with delay
await page.type('input[name="title"]', 'Video Title', { delay: 100 });
// Select dropdown
await page.select('select#category', 'entertainment');
3. File Upload
// Upload file
const input = await page.$('input[type="file"]');
await input.uploadFile('/path/to/video.mp4');
4. Wait Strategies
// Wait for network idle
await page.waitForNavigation({ waitUntil: 'networkidle0' });
// Wait for specific element
await page.waitForSelector('.success-message', { timeout: 30000 });
// Wait for text
await page.waitForFunction(() =>
document.body.textContent.includes('Upload complete')
);
5. Screenshot & Validation
// Full page screenshot
await page.screenshot({ path: 'result.png', fullPage: true });
// Element screenshot
const element = await page.$('.preview');
await element.screenshot({ path: 'preview.png' });
Decision Tree
Browser task?
├── Login required? → Use saved cookies/session
├── Upload file? → waitForSelector → uploadFile → waitForNavigation
├── Fill form? → Loop through fields with type()
├── Validate result? → Take screenshot + check text
└── Multi-step? → Break into sequential waits
Best Practices
| ✅ ทำ | ❌ ไม่ทำ |
|---|---|
| ใช้ waitForSelector ก่อน interact | Hardcode delays |
| Handle popup/modal cases | Assume elements always exist |
| Take screenshots on error | Ignore timeout errors |
| Use retry logic for flaky elements | Give up after 1 try |
TikTok-Specific Tips
- Video upload element:
input[type="file"][accept="video/*"] - Title field:
div[contenteditable="true"] - Post button: Look for specific button text/aria-label
- Wait for processing: Check for progress indicator