Initial commit

skills/mcp-chrome-devtools/workflows/page-management.md

@@ -0,0 +1,218 @@
+# 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.