Strategic navigation patterns and selector guides for thorough web exploration using Playwright MCP. Provides decision trees, navigation strategies, and site-specific selectors for reading multiple pages systematically. Use when planning how to navigate websites, determining reading depth, or finding the right selectors for Playwright MCP commands.
Strategic guide for systematic web exploration using Playwright MCP tools. This skill provides navigation patterns, not executable code.
Query Analysis Decision Tree:
├── Keywords: "간단히, 요약, 훑어, quick, summary, overview"
│ → **QUICK MODE**
│ → Extract: Titles + First paragraphs only
│ → Pages: 30-50 (fast scan)
│
├── Keywords: "자세히, 상세, 모든, 댓글, detailed, comprehensive, everything"
│ → **DEEP MODE**
│ → Extract: Full content + Comments + Metadata + Related links
│ → Pages: 5-10 (thorough read)
│
└── No specific keywords
→ **STANDARD MODE**
→ Extract: Main content + Basic metadata
→ Pages: 15-20 (balanced)
// Get titles and summaries only
mcp_playwright.navigate(url)
links = mcp_playwright.query_selector_all('h2 a, h3 a')
for (link in links.slice(0, 50)) {
mcp_playwright.click(link)
title = mcp_playwright.get_text('h1')
summary = mcp_playwright.get_text('p:first-of-type')
mcp_playwright.go_back()
}
// Get full main content
mcp_playwright.navigate(url)
links = mcp_playwright.query_selector_all('article a')
for (link in links.slice(0, 20)) {
mcp_playwright.click(link)
mcp_playwright.wait_for_load_state('networkidle')
content = mcp_playwright.get_text('main, article, .content')
mcp_playwright.go_back()
}
// Get everything including discussions
mcp_playwright.navigate(url)
links = mcp_playwright.query_selector_all('article a')
for (link in links.slice(0, 10)) {
mcp_playwright.click(link)
mcp_playwright.wait_for_load_state('networkidle')
// Main content
content = mcp_playwright.get_text('article, main')
// Comments
comments = mcp_playwright.query_selector_all('.comment')
for (comment in comments) {
comment_text = mcp_playwright.get_text(comment)
}
// Metadata
author = mcp_playwright.get_text('.author, .writer')
date = mcp_playwright.get_text('time, .date')
// Related links
related = mcp_playwright.query_selector_all('.related a')
mcp_playwright.go_back()
}
Use for: Blog indexes, search results, news listings
Step-by-Step Process:
1. Navigate to list page
2. Collect all article links
3. For each link:
a. Click link
b. Wait for page load
c. Extract content
d. Navigate back
e. Continue with next
MCP Commands:
// Navigate to list
mcp_playwright.navigate('https://blog.com/posts')
// Get all article links
article_links = mcp_playwright.query_selector_all('article a[href]')
// Process each
for (link in article_links) {
// Enter detail page
mcp_playwright.click(link)
mcp_playwright.wait_for_load_state('networkidle')
// Extract content
text = mcp_playwright.get_text('article')
// Return to list
mcp_playwright.go_back()
mcp_playwright.wait_for_load_state('networkidle')
}
Use for: Multi-page results, forums, archives
Process:
1. Process current page
2. Find "Next" button
3. Click and repeat
4. Stop when no more pages
MCP Commands:
while (true) {
// Process current page
articles = mcp_playwright.query_selector_all('article')
for (article in articles) {
// Extract content
}
// Check for next page
next_button = mcp_playwright.query_selector('a.next, [rel="next"]')
if (!next_button) break
// Go to next page
mcp_playwright.click(next_button)
mcp_playwright.wait_for_load_state('networkidle')
}
Use for: Social media, modern blogs, dynamic content
// Scroll and load pattern
current_height = 0
while (true) {
// Get current height
new_height = mcp_playwright.evaluate('document.body.scrollHeight')
if (new_height == current_height) break
// Scroll to bottom
mcp_playwright.evaluate('window.scrollTo(0, document.body.scrollHeight)')
mcp_playwright.wait_for_timeout(2000) // Wait for content load
current_height = new_height
}
// Then extract all loaded content
all_articles = mcp_playwright.query_selector_all('article')
// Search results
list_selector: '.blog_list li'
link_selector: '.api_txt_lines.total_tit'
content_selector: '.se-main-container'
comment_selector: '.u_cbox_contents'
// Blog specific
blog_content: '#postViewArea, .se-main-container'
blog_title: '.se-title-text, .pcol1'
// Search results
list_selector: '.list_info'
link_selector: '.f_link_b, .tit_main'
content_selector: '.article_view'
// Tistory blogs
tistory_content: '.entry-content, .article-view'
tistory_comments: '.comment-list'
article_list: '.wrap_article_list li'
article_link: 'a.link_post'
article_content: '.wrap_body'
article_list: 'article'
article_link: 'h2 a, h3 a'
article_content: 'section.pw-post-body'
clap_count: '[aria-label*="clap"]'
post_list: '[data-testid="post-container"]'
post_content: '[data-click-id="text"]'