QA Selector Picker

About

🎯 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!

✨ KEY FEATURES:

🔍 Smart Element Picking
- Click any element on any webpage
- Visual highlighting shows exactly what you're selecting
- Works on all websites

📝 Multiple Selector Formats
- CSS Selectors
- XPath (Relative)
- Playwright Locators (getByTestId, getByRole, getByLabel, etc.)
- Cypress Commands (cy.get, cy.contains)
- WebdriverIO Selectors

🧠 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!

### ✨ Key Features Update (v2.0.0)

**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! 🚀