jmcmnpjhcciofldoeepdbfjbhefjjddh
Pick elements and generate robust selectors for QA workflows. π― QA Selector Picker - The Ultimate Element Selector Tool for Test Automation Tired of writing brittle selectors that break with every UI change? QA Selector Picker helps you generate stable, maintainable selectors in seconds! π Smart Element Picking - Click any element on any webpage - Visual highlighting shows exactly what you're selecting - Works on all websites π§ Intelligent Selector Quality Analysis - Confidence score for each selector - Quality badges: RECOMMENDED, OK, or RISKY - Warnings for brittle selectors (nth-of-type, auto-generated classes) π‘ Actionable Suggestions - Get recommendations to improve selector stability - Tips to add data-testid, aria-label, or other stable attributes - Refactor alternatives with better stability scores π Refactor Recommendations - See alternative selectors ranked by stability - Compare CSS vs XPath options - Choose the best selector for your test suite ## π AI-Powered Test Automation Transform your manual selector picking into full automation scripts instantly! **1. AI Script Generation** - Automatically generate complete test scripts based on your picked elements. - Uses advanced AI (DeepSeek) to understand context and create logical test scenarios. - **Smart Analysis:** The AI acts as a Senior QA Engineer, analyzing your selectors to suggest meaningful test cases (e.g., successful login, error handling). **2. Multi-Framework Support** - Generate code for your favorite framework: - π **Playwright** (`test.describe`, `page.locator`) - π² **Cypress** (`describe`, `cy.xpath`) - π€ **WebdriverIO** (`describe`, `await $`) **3. Enterprise-Grade Security** - New **Cloudflare Gateway Integration**: Your API requests are now routed through a secure server-side worker. - **No API Keys** are exposed in the client-side extension code, ensuring maximum security and compliance. **4. Enhanced Selector Picking** - **Disabled Elements Support**: Now you can easily pick disabled buttons or inputs! We've upgraded our picker engine to handle elements that block standard click events. - **Improved Accuracy**: Better handling of dynamic classes and complex DOM structures. ### π‘οΈ Privacy & Security - We do **not** collect your browsing data. - AI features are optional and only activate when you click "Generate Script". - Only the specific selectors you pick are sent to the AI service for script generation. ### π¦ How to Use 1. **Pick Elements**: Use the picker to select elements on the page (Login fields, buttons, etc.). 2. **Review**: Check the generated CSS/XPath selectors. 3. **Generate Script**: - Scroll down to the AI section. - Select your framework (Playwright, Cypress, or WebdriverIO). - Click **Generate Script**. - Copy the code and paste it into your test file! Update now to experience the future of test automation! π
First QA Recorder Extension
Records UI interactions for Playwright POM generation ## Product Name **AutoQA Recorder for Playwright** ## Short Description (Max 132 chars) Record user flows and generate clean Playwright POM projects with stable locators β faster, scalable, automation-ready. AutoQA Recorder automatically generates production-ready Playwright test code, helping QA teams build scalable and maintainable automation suites with minimal effort. Built around the **Page Object Model (POM)** pattern, it produces clean TypeScript code while organizing recorded actions into reusable **Flows** and structured **Test Cases**. Unlike basic recorders, AutoQA prioritizes stable selectors such as **Test IDs**, accessibility roles, and placeholders to reduce flaky tests and improve long-term maintainability. ### Smart and Resilient Selector Engine **Priority-Based Locator Strategy** Automatically selects the most stable locator using this priority: `data-testid β placeholder β role/name β text β xpath` **Dynamic ID Filtering** Detects and ignores unstable auto-generated IDs (e.g., React or Next.js) to prevent brittle tests. **Reliable Input Simulation** Uses `pressSequentially` to simulate real user typing, improving compatibility with modern React/Vue forms. **Page Object Model Ready** Separates locators from actions for cleaner, maintainable test architecture. **Full TypeScript Support** Generates typed `.ts` files ready for development. - `playwright.config.ts` - Sample test structure - CI workflow templates (GitHub Actions) - Organized Page Object Model structure ### Secure and Private by Design **Sensitive Data Masking** Automatically detects and masks sensitive inputs such as passwords, tokens, or CVV fields. 1. Click **Start Recording** and interact with your application normally. 2. Add **New Test Case** to organize logical test scenarios. 3. Use **Assertion Mode** to capture validations. 4. Group steps into **Flows** for better organization. 5. Click **Download Project ZIP** to get a production-ready Playwright codebase. 6. Extract and integrate it directly into your automation pipeline or CI/CD workflow. - Added **New Test Case** feature for better test organization - Improved input reliability with human-like typing simulation - Enhanced duplicate element indexing logic - Security updates and extension permission hardening
SelectorsHub
Locators Plugin to Auto Generate and Verify Playwright Locators, XPath & CSS Selectors. SelectorsHub - Auto-generate Playwright Locators, XPath & CSS Selectors SelectorsHub is a powerful developer tool that automatically generates and verifies Playwright locators, XPath, and CSS selectors for web automation testing. Key Features: 1. Auto-generation: Instantly generates multiple selector types including native Playwright locators, XPath, CSS selectors, IDs, names, and more. 2. Advanced element support: Works seamlessly with iframes, Shadow DOM, SVG elements, dynamic elements, dropdowns, and complex UI components. 3. Smart suggestions: Auto-suggests attributes, text values, and occurrences to help you build selectors fasterβno more copying and pasting from the DOM. 4. Error detection: Provides clear error messages indicating what's wrong with your XPath or CSS selectors. 5. Element highlighting: Automatically highlights matching elements and scrolls them into view for easy verification. 6. XPath Healing: Verify all the xpath in one shot. 7. Locators Page: Generate Locator Page in one go. How to Use: 1. Open Chrome DevTools (F12 or right-click > Inspect) 2. Navigate to the SelectorsHub tab in the DevTools sidebar, or click the SelectorsHub icon in your browser toolbar 3. Inspect any element to automatically generate all selector types 4. For Playwright locators, click the "Playwright Selectors" button, then inspect the element 5. Type or edit selectors in the input boxβsmart suggestions will help you complete them quickly 6. Press Enter to verify and highlight all matching elements on the page Perfect for: a) QA Engineers and Test Automation professionals, b) Web developers working with Playwright, Selenium, Cypress, or other testing frameworks c) Anyone who needs reliable, maintainable element selectors
BlazeMeter | The Continuous Testing Platform
Record Selenium and HTTP traffic to create a load and functional tests in less than 10 minutes (Apache JMeter Compatible). The BlazeMeter Chrome extension enables you to - Record. Upload. Run. The Chrome extension records all HTTP/S requests and actual user interactions that your browser sends. It creates a JMeter or Selenium script, and automatically uploads it to BlazeMeter.com, where you can execute tests with a single click. No need to install JMeter nor Selenium to record or run GUI Functional, API Functional, or Performance tests, the Chrome extension will create the JMeter (JMX) and Taurus Selenium (YAML) scripts automatically. The extension will also allow you to debug and test your recorded Selenium session on your local Chrome browser. By using JMeter locally, you can debug and enhance the JMX file created by the Chrome Extension to ensure your script is ready to go. WHAT'S NEW: https://guide.blazemeter.com/hc/en-us/articles/115004970329-Chrome-Extension-Changelog-Chrome-Extension-Changelog Features - Record test scenarios without scripting experience - Record all HTTP/S requests made by your browser - Record user GUI actions - Add assertions to your Selenium steps - Add transaction labels (for JMeter and Selenium) during recording - Support for shadow locators (Lightning Web Components) - Apache JMeter Compatible - Taurus Selenium Compatible - Run tests without installing test scripting applications - Run Performance tests for up to 3,000,000 concurrent users - Run load tests in under ten minutes - Run API Functional Tests - Run GUI Functional Tests - Run Selenium tests and JMeter tests side by side to get the best of both worlds - Debug scripts - If you want to record transactions, Chrome version 58 or newer is required - Recommended minimum version of Chrome is 58 - For certain features (e.g. converting to JMX, Scriptless Scenario Editor), a free BlazeMeter.com account is required
LocatorPro | Element Locators for Test Automation
Professional DOM element locator generator for Playwright, Cypress, and Selenium test automation ## π§ **Next-Generation Element Identification for Test Automation** LocatorPro is the most advanced Chrome extension for generating reliable test selectors. Now with enhanced nth-match strategies and SVG support, it's the ultimate tool for QA engineers and developers working with modern web applications. ## β¨ ** LocatorPro v1.1.1 - Highlights:** β’ **π― Enhanced nth-match Selectors** - Advanced handling for duplicate elements with intelligent positioning strategies β’ **π‘οΈ SVG Element Support** - First-class support for SVG graphics and icons (no more TypeErrors!) β’ **π’ 35 Priority-Based Selectors** - Comprehensive semantic-to-structural hierarchy for maximum reliability β’ **π§ Smart Table Intelligence** - Automatically detects table structures with row/column context β’ **β‘ Framework-Optimized Output** - Best practices for Playwright, Cypress, and Selenium β’ **βΏ Accessibility-First** - Prioritizes ARIA labels, roles, and semantic selectors ## π― **Perfect For:** β’ QA Engineers writing automated tests β’ Frontend Developers building comprehensive test suites β’ Test Automation Engineers scaling test coverage β’ DevOps Teams implementing robust CI/CD testing β’ Anyone working with complex web applications ## π **How It Works:** 1. **Install & Activate**: Right-click any element β "π― Get Element Identification" OR use LocatorPro popup 2. **Smart Capture**: Click any element to generate intelligent selectors 3. **DevTools Integration**: Open Chrome DevTools β "LocatorPro" tab 4. **Copy & Use**: Get framework-specific selectors instantly with descriptions ## π‘ **Advanced LocatorPro v1.1.1 Features:** ### **π― Intelligent Selector Generation (35 Priority Levels)** - **Priority 1-6**: Semantic attributes (ARIA labels, roles, placeholders, test IDs) - **Priority 10-16**: Text content with smart nth-match strategies - **Priority 17-25**: Additional attributes (dimensions, data attributes, lang) - **Priority 30-35**: Structural selectors with modern CSS techniques ### **π§ Smart Duplicate Element Handling** - **First/Last Strategies**: `.first()`, `.last()` for boundary elements - **nth-match Positioning**: `:nth-match(:text("..."), 2)` for precise targeting - **Role-based Selection**: `getByRole('button', { name: '...' }).nth(1)` - **Context-Aware**: Understands parent-child relationships ### **π‘οΈ Robust SVG & Modern Web Support** - **SVG Compatibility**: Handles SVGAnimatedString className objects - **Modern Frameworks**: React, Vue, Angular component support - **Complex DOMs**: Shadow DOM and dynamic content handling - **Error Prevention**: TypeErrors eliminated with safe property access ### **β‘ Framework-Specific Optimizations** **π Playwright (Modern & Semantic)** ```javascript page.getByLabel('Email Address') page.getByRole('button', { name: 'Submit' }) page.locator(':nth-match(:text("Delete"), 2)') ``` **π² Cypress (Robust & Reliable)** ```javascript cy.get('[aria-label="Email Address"]') cy.get('[role="button"]').contains('Submit') cy.contains('Delete').eq(1) ``` **π§ Selenium (WebDriver Compatible)** ```javascript driver.findElement(By.cssSelector('[aria-label="Email Address"]')) driver.findElement(By.xpath("(//*[text()='Delete'])[2]")) ``` ## π§ **Supported Frameworks & Use Cases:** ### **π Playwright** - Modern `getByLabel()`, `getByRole()`, `getByText()` selectors - nth-match strategies for duplicate elements - Accessibility-focused approach ### **π² Cypress** - Optimized `cy.get()` and `cy.contains()` patterns - Robust element positioning with `.eq()` and `.first()` - Framework-specific best practices ### **π§ Selenium WebDriver** - CSS selector and XPath strategies - WebDriver-compatible syntax - Cross-browser reliability ## π **Performance & Quality:** β’ **β‘ Fast Generation**: