Playwright Selector Tool

Playwright Selector Studio: Version 2.1.0 — Unified AI Page Object Generator, Automation Locator & Quick UI Testing Tool Selector…

Playwright Selector Studio: Version 2.1.0 — Unified AI Page Object Generator, Automation Locator & Quick UI Testing Tool Selector Studio is the ultimate browser companion built specifically for QA Engineers, Automation Developers, and Software Engineers. Say goodbye to manually inspecting elements, writing tedious Page Object Model boilerplate by hand, and performing repetitive visual QA checks. With Selector Studio v2.1.0, you can automatically scan web pages, extract robust production-ready locators, synthesize full Page Object Model (POM) code in seconds, and execute instant 1-click Quick UI & Visual Quality Audits! Whether you are building automated regression suites, setting up robust end-to-end testing frameworks, scraping web elements, or auditing UI visual layout bugs, Selector Studio delivers clean, unique locators and actionable UI insights that keep your applications bug-free and test suites flake-free. 🚀 KEY FEATURES: 🧪 QUICK UI TESTING & VISUAL QUALITY AUDITING (NEW IN v2.1.0!) Run automated visual, layout, and copy audits across any webpage in seconds—no extra setup or script writing required! 📐 Viewport Overflow & Layout Audits: Automatically detect elements spilling beyond screen width boundaries (overflow-x) to prevent broken responsive layouts. Smart container checks intelligently bypass carousels, sliders, and horizontal feed tracks. ✂️ Text Truncation & Clipping Detection: Catch clipped button labels or clipped text headers where inner text content exceeds visible container width. 🔴 Interactive Component Overlap Detection: Identify overlapping buttons, inputs, links, or form fields with precise overlapping pixel area calculations. 🔤 UI Text & Spelling Typo Checker: Audit button copy, input placeholders, labels, and ARIA attributes for common spelling typos (sumbit, receieve, usernmae, passowrd) and duplicate repeated words. 📊 Interactive Report Modal & Health Metrics: View overall page health scores including Status (Passed/Failed), Alignment Score (%), Spelling Accuracy (%), and total component counts. 🔍 Live Spotlight Ring & Return Countdown Toast: Click any detected issue to automatically scroll to and highlight the bug directly on the live webpage with a glowing highlight spotlight ring and auto-return timer. 📂 Category Filtering & Retest Controls: Instantly filter issue lists by All, 📐 Alignment, or 🔤 Spelling, or run a full-page auto-scroll audit. 📥 1-Click JSON & Markdown Export: Export full audit reports directly into structured JSON or formatted Markdown (.md) files to seamlessly attach to Jira, GitHub Issues, or Trello cards. 🤖 AI PAGE OBJECT MODEL (POM) GENERATOR Transform entire web pages into complete, production-ready Page Object Model classes with a single click! Multi-Framework Code Generation: Instantly synthesize clean POM scripts in Playwright (TypeScript & JavaScript), Selenium (Python & Java), Cypress (JavaScript), and Structured JSON Schema. Semantic Auto-Naming: Automatically derives clean variable names (loginBtn, usernameInput, submitOrderBtn) based on accessibility roles, HTML attributes, and DOM context. Interactive Discovered Element Inspector: Filter, search, edit variable names, and toggle elements on/off before exporting code. 1-Click Export: Instantly copy generated POM code to your clipboard or download standard .ts, .js, .py, .java, or .json class files. ⏳ REAL-TIME LOCATOR SCANNING & LOADER PROGRESS Never wonder what's happening under the hood! When generating AI Page Objects, Selector Studio displays an interactive, high-tech animated loader with live progress tracking (Scanned X of Y locators) as it scans buttons, inputs, links, forms, and custom components across the DOM without freezing your browser. ⚙️ MULTI-ENGINE & LOCAL AI SUPPORT Flexible AI architecture tailored to your security & privacy preferences: ⚡ Fast Local Engine: High-speed, zero-latency local locator synthesis (sub-50ms). 🤗 Hugging Face Open-Source API: Connect directly to top open-source coding models like Qwen2.5-Coder. 🦙 Local Ollama AI Server: Run AI page analysis 100% locally on your machine (http://localhost:11434) for full enterprise data privacy. 🎯 REAL-TIME UNIQUE LOCATOR IDENTIFICATION Stop guessing if your locators are stable. Selector Studio automatically analyzes the live DOM to verify whether your generated selector is completely unique, tagging it with a distinct UNIQUE ✅ badge inside the UI. 📊 LIVE MATCHING ELEMENT COUNTS If a selector isn't unique, Selector Studio instantly displays the exact number of matching elements found across the active page context (e.g., 3 matches). Easily explore alternative selector paths to pick the most reliable option. 🖥️ CROSS-AUTOMATION FRAMEWORK SYNTAX No longer restricted to just one ecosystem. Seamlessly switch tabs to generate native framework locators: Playwright: Generates page.getByRole(), page.locator(), getByText(), and getByTestId(). Selenium WebDriver: Formats clean, production-ready By.cssSelector(), By.xpath(), By.id(), and @FindBy annotations. Cypress: Extracts reliable commands using cy.get() and cy.contains() syntax. 🔗 BUILT-IN SMART JSON FORMATTER LINK Testing APIs or working with heavy payload assertions? Instantly navigate to an integrated, lightweight JSON Formatter tool directly from the extension panel to validate, beautify, and parse complex JSON strings on the fly. 🖱️ ALT + CLICK HOVER OVERLAY & SMART LOCATOR MODE Simply hold the [Alt] key and click on any element on the page, or activate Smart Locator Mode to outline elements dynamically with live tooltips. View multi-framework CSS and XPath selectors instantly. 📋 CONTEXT MENU INTEGRATION Right-click on any element and select "🤖 Generate AI Page Object Model" or "Copy Playwright Selector" to trigger actions directly without opening extra browser windows. 🏷️ SMART ATTRIBUTE PRIORITIZATION & UNSTABLE SELECTOR CLEANING Build flake-free automation tests. Selector Studio prioritizes data-testid, data-qa, data-cy, stable IDs, and standard accessibility attributes (role, aria-label, placeholder) while filtering out brittle inline styles and dynamic framework tokens (ng-tns-*, sc-*). 📖 HOW TO USE: Install Selector Studio and pin it to your browser extension toolbar. Open any web application or test target page. Run Quick UI Tests (New in v2.1.0!): Click "Quick UI Test" in the extension popup or context menu to instantly audit page alignment, text clipping, element overlaps, and spelling mistakes. Click any issue to spotlight it live, or export the report to Markdown/JSON! Generate Full Page Objects: Click "Generate AI Page Object" in the popup or right-click context menu. Watch the live scanning loader analyze page locators, select your desired framework tab (Playwright / Selenium / Cypress / JSON), and click Copy Code or Download File! Inspect Individual Elements: Hold [Alt] and click any element on the page, or right-click to copy selectors directly into your automation test script. 💼 WHY CHOOSE SELECTOR STUDIO? Save Hours of Boilerplate Coding: Generate complete Page Object files in seconds. Instant Automated UI Auditing: Catch visual layout bugs, viewport overflows, overlapping elements, and typos before production releases. Eliminate Test Flakiness: Adheres strictly to modern locator best practices. Privacy & Local First: Supports offline scanning, local LLM integration via Ollama, and client-side DOM processing. All-In-One QA Toolkit: Consolidates AI Page Object generation, Quick UI testing, multi-framework locator verification, DOM match checking, and JSON utilities into one extension. Sleek & Lightweight: Zero background lag with modern dark-mode aesthetics designed for everyday QA workflow efficiency. Streamline your test automation pipeline and build resilient test suites with Selector Studio v2.1.0! Note for Web Store Reviewers: Version 2.1.0 introduces Quick UI Testing alongside the AI Page Object Model Generator. The extension audits active tab DOM elements non-blockingly to generate test locators and detect visual layout/text alignment issues. All DOM inspection and audit checks occur locally on the client page, ensuring maximum performance, zero network overhead, and user privacy.