Playwright Locator Assistant

In modern web development, writing stable end-to-end tests is a challenge. CSS selectors are brittle, and manually crafting the perfect Playwright locator can be time-consuming. This extension solves that problem by embedding Playwright's best practices directly into your browser. It follows the official locator priority, ensuring you always get the most resilient locator possible, preferring user-facing attributes over implementation details. Features 🚀 Intelligent Locator Generation: Click on any element, and the extension automatically generates the best possible locator based on Playwright's recommended priority: data-testid getByRole (with accessible name) getByText, getByLabel, getByPlaceholder, etc. Smart getByRole (when unique without a name) CSS selector as a last resort (with a warning). 🔗 Smart Locator Chaining: For elements that aren't unique on their own, the extension finds a stable parent and creates a readable and robust chained locator (e.g., page.getByRole('list').getByRole('listitem', { name: 'User 1' })). ✅ Instant Locator Verifier: Manually write and test a locator directly in the popup. The verifier understands both CSS and Playwright syntax (getByRole, getByText, etc.) and instantly highlights all matching elements on the page, showing you a live count. 🐍 Pytest & JS Support: Toggle between Python (pytest) and JavaScript (playwright-test) syntax for the generated locators. 💡 Lightweight & Fast: Built with performance in mind to not slow down your browsing or debugging sessions. 🛠️ How to Use Install the Extension: * To Generate a Locator: Click the extension icon in your browser toolbar. Select your desired framework (Pytest or JS). Click the "Pick Element" button. The popup will close. Click on any element on the web page. A notification will appear with the best locator, which is also copied to your popup. To Verify a Locator: Click the extension icon. In the "Verify Selector" section, type any CSS selector or Playwright locator (e.g., getByRole('button')). Click the "Check Selector" button. The matching elements will be highlighted on the page, and the count will be displayed in the popup.