Element Locator Generator Chrome Extension

A Chrome extension that enables users to interactively select elements on any webpage and generate Playwright-compatible locators, including CSS, XPath, and semantic locators (get_by_role, get_by_text, etc.).

Features

• Select any DOM element by clicking on it.
• Automatically generates multiple types of locators:
  • Unique ID-based selectors
  • Data attributes (e.g., data-testid)
  • Relative CSS selectors
  • XPath
  • Role-based and text-based Playwright locators
• Visual highlighting of the selected element.
• View, copy, or export generated locators to a Python test snippet.

How It Works

1. popup.js

The extension popup provides a UI with:

• Select Element: Activates selection mode on the active tab.
• Dropdown Menu: Lists generated locators.
• Copy: Copies the selected locator to the clipboard.
• Export: Downloads a Python test snippet using the selected locator.

2. background.js

Handles communication between the popup and content script. It listens for the "START_SELECTION" message and injects the content.js script into the current tab.

3. content.js

Runs in the context of the page:

• Detects and highlights clicked elements.
• Determines the best locators based on a set of heuristics.
• Stores the locator list in chrome.storage.local for access by popup.js.

Installation

1. Clone or download this repository.
2. Open Chrome and navigate to chrome://extensions/.
3. Enable Developer mode.
4. Click Load unpacked and select the project directory.

Usage

1. Click the extension icon in the toolbar.
2. Click "Select Element" to enter selection mode.
3. Click any element on the page.
4. Re-open the extension popup to:
   • View all generated locators.
   • Copy to clipboard.
   • Export to a .py file with a Playwright script.

Example Output

# Sample Playwright Python snippet
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto('https://example.com')
    page.locator("#submitBtn")  # Example output