6.6 KiB
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
node scripts/new_page.js --url https://example.com --timeout 30000
list_pages
Lists all open pages with their indices and URLs.
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
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
# 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
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
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:
# 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:
# 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:
# 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.