Playwright Locator Inspector

About

Playwright Locator Inspector Pro Usage Guide (v4.1.0)
Welcome to the professional suite for Playwright automation. This guide covers how to maximize the efficiency of your locator generation and browser automation workflows.

🚀 1. Getting Started
Open DevTools: Press F12 or Ctrl+Shift+I on any webpage.
Locate Tab: Find the PW Inspector tab in the top navigation of DevTools.
Configure AI: Click the ⚙️ (Settings) icon and enter your OpenAI API Key. This enables Layer 3 (Vision) and Layer 4 (OCR) analysis.
🎯 2. Live Inspect Mode
Used for inspecting elements on actual live websites.

Start Inspecting: Click the big 🎯 Start Inspecting Page button.
Select Element: Hover over and click any element on the webpage.
View Results:
Recommended Locator: The most robust, native Playwright locator.
🪄 AI Suggest: Run the hybrid pipeline (DOM + Vision + OCR) for complex elements.
Code Block: Get ready-to-use snippets in Python, JS, or Java.
📋 3. Paste DOM Mode
Used for generating locators from HTML snippets, even if the site is offline or behind a firewall.

Paste HTML: Paste your HTML code into the text area.
Render Preview: Click Render Preview. A "Sandbox" will appear.
Inspect Sandbox: Click any element inside the preview to generate locators as if it were a live site.
TIP

ag-Grid Support: Pasting ag-Grid snippets automatically triggers a specialized "Grid Layout" for easier cell selection.
🤖 4. AI Agent Mode
Used for generating multi-step automation scenarios using natural language.

Enter Task: Type a goal (e.g., "Go to GitHub, search for Playwright, and click the first result").
Start Agent: Click ▶ Start Agent.
Live Terminal: Watch the agent's thought process and tool execution in real-time.
Multi-Language Scripts: Once finished, use the JS / PY / JAVA toggles to see the generated Playwright script.
Workspace Isolation: The Agent workspace is isolated; it won't clutter your "Live Inspect" results.
🛠️ 5. Advanced Features
🔍 Specialized XPaths (CPY XP)
Next to every AI suggestion, you'll see a CPY XP button. These aren't standard XPaths; they are AI-Optimized:

Parent Anchoring: They use structural context rather than indices (e.g., //nav//a instead of 
(//a)[3]
).
Text Resilience: Long text blocks automatically use contains(normalize-space(.), ...) to prevent breakage from minor content shifts.
🌓 Multi-Language Switching
Instantly switch between Python (Pytest), JavaScript (Playwright Test), and Java logic for every locator and script generated.

🧹 Clear All
The 🧹 (Clear) button is global. It wipes the state across all three tabs, giving you a fresh start for a new project.

Happy Automating! 🚀