219 lines
6.6 KiB
Markdown
219 lines
6.6 KiB
Markdown
# Page Management Workflows
|
|
|
|
Browser window and tab operations for managing multiple pages and navigation.
|
|
|
|
## Tools in This Group
|
|
|
|
### new_page
|
|
Creates a new browser page (tab).
|
|
|
|
**Required:** `--url URL`
|
|
**Optional:** `--timeout MILLISECONDS`
|
|
|
|
```bash
|
|
node scripts/new_page.js --url https://example.com --timeout 30000
|
|
```
|
|
|
|
### list_pages
|
|
Lists all open pages with their indices and URLs.
|
|
|
|
```bash
|
|
node scripts/list_pages.js
|
|
```
|
|
|
|
**Output Example:**
|
|
```
|
|
Page 0: https://example.com (selected)
|
|
Page 1: https://google.com
|
|
Page 2: https://github.com
|
|
```
|
|
|
|
### select_page
|
|
Switches the active context to a specific page by index.
|
|
|
|
**Required:** `--pageIdx INDEX`
|
|
|
|
```bash
|
|
node scripts/select_page.js --pageIdx 1
|
|
```
|
|
|
|
### navigate_page
|
|
Navigates the currently selected page to a new URL.
|
|
|
|
**Optional:** `--url URL`, `--type [navigate|reload|back|forward]`, `--ignoreCache [true|false]`, `--timeout MILLISECONDS`
|
|
|
|
```bash
|
|
# Navigate to URL
|
|
node scripts/navigate_page.js --url https://example.com/page2
|
|
|
|
# Reload page
|
|
node scripts/navigate_page.js --type reload --ignoreCache true
|
|
|
|
# Go back
|
|
node scripts/navigate_page.js --type back
|
|
```
|
|
|
|
### resize_page
|
|
Resizes the browser window to specific dimensions.
|
|
|
|
**Required:** `--width WIDTH --height HEIGHT`
|
|
|
|
```bash
|
|
node scripts/resize_page.js --width 1920 --height 1080
|
|
```
|
|
|
|
### close_page
|
|
Closes a page by its index. Cannot close the last remaining page.
|
|
|
|
**Required:** `--pageIdx INDEX`
|
|
|
|
```bash
|
|
node scripts/close_page.js --pageIdx 2
|
|
```
|
|
|
|
## Workflows
|
|
|
|
### Workflow: Open Multiple Research Tabs
|
|
|
|
Open several pages for research or comparison:
|
|
|
|
- [ ] List current pages: `node scripts/list_pages.js`
|
|
- [ ] Open first article: `node scripts/new_page.js --url https://example.com/article1`
|
|
- [ ] Open second article: `node scripts/new_page.js --url https://example.com/article2`
|
|
- [ ] Open third article: `node scripts/new_page.js --url https://example.com/article3`
|
|
- [ ] Verify all open: `node scripts/list_pages.js`
|
|
|
|
**Expected Output:**
|
|
Multiple tabs open, each with different content, ready for analysis.
|
|
|
|
### Workflow: Navigate Through Site Pages
|
|
|
|
Walk through a multi-page flow:
|
|
|
|
- [ ] Start at homepage: `node scripts/new_page.js --url https://example.com`
|
|
- [ ] Take initial snapshot: `node scripts/take_snapshot.js`
|
|
- [ ] Click "About" link: `node scripts/click.js --uid link_about_xyz`
|
|
- [ ] Wait for page load: `node scripts/wait_for.js --text "About Us" --timeout 5000`
|
|
- [ ] Go back: `node scripts/navigate_page.js --type back`
|
|
- [ ] Verify homepage: `node scripts/wait_for.js --text "Welcome" --timeout 5000`
|
|
- [ ] Go forward: `node scripts/navigate_page.js --type forward`
|
|
|
|
**Expected Output:**
|
|
Browser navigates through pages, back/forward works correctly.
|
|
|
|
### Workflow: Multi-Tab Data Extraction
|
|
|
|
Extract data from multiple pages simultaneously:
|
|
|
|
- [ ] Open page 1: `node scripts/new_page.js --url https://example.com/data/item1`
|
|
- [ ] Take snapshot 1: `node scripts/take_snapshot.js --filePath item1.txt`
|
|
- [ ] Open page 2: `node scripts/new_page.js --url https://example.com/data/item2`
|
|
- [ ] Take snapshot 2: `node scripts/take_snapshot.js --filePath item2.txt`
|
|
- [ ] Open page 3: `node scripts/new_page.js --url https://example.com/data/item3`
|
|
- [ ] Take snapshot 3: `node scripts/take_snapshot.js --filePath item3.txt`
|
|
- [ ] Switch to page 0: `node scripts/select_page.js --pageIdx 0`
|
|
- [ ] Extract from page 0: `node scripts/evaluate_script.js --function "() => document.querySelector('.price').textContent"`
|
|
- [ ] Switch to page 1: `node scripts/select_page.js --pageIdx 1`
|
|
- [ ] Extract from page 1: `node scripts/evaluate_script.js --function "() => document.querySelector('.price').textContent"`
|
|
|
|
**Expected Output:**
|
|
Data extracted from multiple pages, context switching successful.
|
|
|
|
### Workflow: Responsive Design Testing
|
|
|
|
Test page at different viewport sizes:
|
|
|
|
- [ ] Open test page: `node scripts/new_page.js --url https://example.com`
|
|
- [ ] Desktop view: `node scripts/resize_page.js --width 1920 --height 1080`
|
|
- [ ] Take desktop screenshot: `node scripts/take_screenshot.js --fullPage true --filePath desktop.png`
|
|
- [ ] Tablet view: `node scripts/resize_page.js --width 768 --height 1024`
|
|
- [ ] Take tablet screenshot: `node scripts/take_screenshot.js --fullPage true --filePath tablet.png`
|
|
- [ ] Mobile view: `node scripts/resize_page.js --width 375 --height 667`
|
|
- [ ] Take mobile screenshot: `node scripts/take_screenshot.js --fullPage true --filePath mobile.png`
|
|
|
|
**Expected Output:**
|
|
Screenshots captured at different viewport sizes for comparison.
|
|
|
|
### Workflow: Clean Up Tabs
|
|
|
|
Close unnecessary tabs while keeping important ones:
|
|
|
|
- [ ] List all pages: `node scripts/list_pages.js`
|
|
- [ ] Identify indices to close (e.g., pages 2, 3, 4)
|
|
- [ ] Close page 4: `node scripts/close_page.js --pageIdx 4`
|
|
- [ ] Close page 3: `node scripts/close_page.js --pageIdx 3`
|
|
- [ ] Close page 2: `node scripts/close_page.js --pageIdx 2`
|
|
- [ ] Verify remaining: `node scripts/list_pages.js`
|
|
- [ ] Switch to desired page: `node scripts/select_page.js --pageIdx 0`
|
|
|
|
**Note:** Close tabs in reverse order (highest index first) to avoid index shifting issues.
|
|
|
|
**Expected Output:**
|
|
Unwanted tabs closed, important tabs remain active.
|
|
|
|
## Common Patterns
|
|
|
|
### Pattern: Safe Page Closing
|
|
|
|
Always list pages before closing to avoid errors:
|
|
|
|
```bash
|
|
# 1. Check what's open
|
|
node scripts/list_pages.js
|
|
|
|
# 2. Close specific page (use actual index from list)
|
|
node scripts/close_page.js --pageIdx 2
|
|
|
|
# 3. Verify closure
|
|
node scripts/list_pages.js
|
|
```
|
|
|
|
### Pattern: Page Context Switching
|
|
|
|
When working with multiple pages, always select before interacting:
|
|
|
|
```bash
|
|
# 1. List to see indices
|
|
node scripts/list_pages.js
|
|
|
|
# 2. Select target page
|
|
node scripts/select_page.js --pageIdx 1
|
|
|
|
# 3. Now interact with that page
|
|
node scripts/take_snapshot.js
|
|
node scripts/click.js --uid button_xyz
|
|
```
|
|
|
|
### Pattern: Reliable Navigation
|
|
|
|
Use wait_for to ensure page loads before interaction:
|
|
|
|
```bash
|
|
# 1. Navigate
|
|
node scripts/navigate_page.js --url https://example.com/login
|
|
|
|
# 2. Wait for key element
|
|
node scripts/wait_for.js --text "Sign In" --timeout 10000
|
|
|
|
# 3. Now safe to interact
|
|
node scripts/take_snapshot.js
|
|
```
|
|
|
|
## Troubleshooting
|
|
|
|
**Problem:** "Cannot close last page" error
|
|
|
|
**Solution:** You must keep at least one page open. Open a new page before closing the last one.
|
|
|
|
**Problem:** Page index out of range
|
|
|
|
**Solution:** Always run `list_pages.js` first to see current indices. Indices shift when pages are closed.
|
|
|
|
**Problem:** Navigation timeout
|
|
|
|
**Solution:** Increase timeout value: `--timeout 60000` (60 seconds) for slow-loading pages.
|
|
|
|
**Problem:** Wrong page context
|
|
|
|
**Solution:** Use `list_pages.js` to check which page is selected (marked with "selected"). Use `select_page.js` to switch.
|