---

name: playwright category: integration-connectivity/mcp-integrations version: 1.0.0 description: Complete guide to using Playwright MCP server with Claude Code author: blackbox5/mcp verified: true tags: [mcp, playwright, testing, browser, automation]

Playwright MCP Server Skills

Type: STDIO (local) Browsers Supported: Chrome, Firefox, Safari, Edge Purpose: E2E testing and browser automation

Initial Setup: Run npx playwright install chromium to download browser binaries on first use.

For testing, always start by launching a browser and navigating to the target URL. Use explicit waits over fixed timeouts for more reliable tests.

<available_skills> <skill_group name="Browser Launch & Control"> Launch a browser instance Launch Chrome browser Browser type (chromium, firefox, webkit) Run headlessly (default: true) Viewport size {width, height} Navigate to a URL Navigate to https://example.com Target URL Wait condition (load, domcontentloaded, networkidle) Close the browser or page Close the browser </skill_group>

<skill_group name="Page Interaction"> Click an element on the page Click the login button Element selector (CSS, XPath, text) Wait for navigation after click Fill form input fields Fill the email input Input element selector Value to enter Type text character by character Type 'Hello World' in textarea Element selector Text to type Delay between keystrokes (ms) Select option from dropdown Select 'United States' from country dropdown Select element Option value or label Check a checkbox Check the 'agree' checkbox Checkbox element selector Uncheck a checkbox Uncheck the newsletter checkbox Checkbox element selector </skill_group>

<skill_group name="Element Inspection"> Get text content from element(s) Get text from h1 Element selector Get HTML content of element or page Get HTML of the page Element selector (optional, for element HTML) Get attribute value from element Get href from all links Element selector Attribute name Count elements matching selector Count number of .item elements Element selector Check if element is visible Is the modal visible? Element selector Check if element is enabled Is the submit button enabled? Element selector </skill_group>

<skill_group name="Waiting & Timing"> Wait for element to appear Wait for .modal to appear Element selector Maximum wait time (default: 30000ms) Wait for page navigation Wait for page to load after click Wait for specific time Wait for 5 seconds Time to wait (milliseconds) Wait for network response Wait for API response URL or URL pattern Maximum wait time </skill_group>

<skill_group name="Screenshot & PDF"> Take screenshot of page or element Take screenshot Element to screenshot (optional) Capture entire page (default: false) Save path (optional) Generate PDF of current page Save page as PDF Save path (optional) Paper format (A4, Letter) Landscape orientation (default: false) </skill_group>

<skill_group name="JavaScript Execution"> Execute JavaScript in page context Run document.title JavaScript code Execute async JavaScript Run await fetch('/api/data') Async JavaScript code </skill_group>

<skill_group name="Form & Input"> Upload file through file input Upload file to input File input element Path to file Hover over element Hover over navigation menu Element selector Focus on element Focus on email input Element selector </skill_group>

<skill_group name="Browser Context"> Set browser viewport size Set viewport to mobile size Viewport width Viewport height Emulate specific device Emulate iPhone 12 Device name (iPhone, iPad, etc.) Set geolocation Set location to New York Latitude Longitude Set offline mode Go offline </skill_group>

<skill_group name="Testing & Assertions"> Assert text exists on page Assert 'Welcome' is visible Expected text Element selector (optional) Assert element is visible Assert button is visible Element selector Assert current URL Assert URL is /dashboard Expected URL Assert page title Assert title is 'Home Page' Expected title </skill_group> </available_skills>

<best_practices> Use data-testid attributes for selectors Use specific, stable selectors Use brittle selectors (nth-child) Use CSS classes that change frequently Wait for elements explicitly Handle async properly Hardcode sleep times Assume instant load Test in multiple browsers Use descriptive test names Clean up after tests Use page object model Run tests in parallel Test only in Chrome Skip cleanup Mix concerns in tests Duplicate test code </best_practices>

<error_handling> Browser launch fails Install browser binaries: npx playwright install Check system requirements Verify sufficient disk space Element not found Verify selector is correct Wait for element to load Check if element is in iframe Use browser DevTools to test selector Test is flaky Add explicit waits Use proper selectors Handle dynamic content Increase timeout if needed Check for race conditions Screenshot fails Ensure element is visible Check file path permissions Verify directory exists Wait for element to render </error_handling>

<output_format> Element Text String content of matched element(s) Screenshot Binary image data (PNG) or saved file path Assertion Result Boolean pass/fail with error message if failed </output_format>

<integration_notes> First run requires: npx playwright install chromium (or firefox/webkit) Playwright vs Chrome DevTools: Playwright supports multi-browser testing, E2E framework, PDF generation, network mocking, and headless mode. Chrome DevTools is for manual debugging and live inspection. Use data-testid attributes for test selectors to avoid coupling tests to implementation details </integration_notes>