Playwright Locator Finder

Accelerate your Playwright test automation with live browser inspection, smart locator recommendations, real-time testing, and direct Page Object Model (POM) code export—all inside VS Code.

Overview

Playwright Locator Finder is a VS Code extension designed to streamline authoring Playwright automation tests. Stop manually writing CSS selectors, copying element attributes, or hand-editing Page Object files. With this extension, you can visually inspect live web pages, evaluate locators in real time, and import generated locators directly into your project's Page Object Model files with a single click.

Key Features

• 🎯 Interactive Browser Inspection: Launch a Chromium browser instance directly from VS Code. Hover over and click any element on your web app to capture locators instantly.
• 🧠 Smart Locator Generation: Generates resilient, role-first Playwright locators (getByRole, getByLabel, getByText, getByTestId), CSS selectors, XPath expressions, and shadow-DOM-aware strategies.
• ⚡ Real-time Locator Validation: Test any Playwright locator, CSS, or XPath expression against the open browser page with live element highlighting and accurate match counts.
• 📄 Page Object Model (POM) Integration: Automatically discovers Page Object files in your workspace and inserts formatted locators directly into TypeScript, JavaScript, or JSON files.
• 🌐 Full Page Scanner: Scan an entire web page in one click to identify, review, and bulk-export locators for all interactive UI elements.

How to Use

1. Open the Extension Sidebar

Click the Locator Finder icon in the VS Code Activity Bar (or press Ctrl+Shift+P / Cmd+Shift+P and run Locator Finder: Open / Focus View).

2. Launch the Inspection Browser

• Enter the URL of the web page you wish to test in the sidebar address bar.
• Click Launch Browser (or run Locator Finder: Launch Browser from the Command Palette).

3. Inspect UI Elements

• Click Start Inspecting in the sidebar.
• In the launched Chromium browser window, hover over any element and click it.
• The sidebar will immediately populate with recommended locators and candidate variations.

4. Evaluate and Test Locators

• Switch between Playwright, XPath, and CSS tabs.
• Choose from alternate locator candidates in the dropdown list if needed.
• Click Test to highlight matching elements on the active page and verify match counts.

5. Export to Page Object File

• Choose or browse to your target Page Object file in the workspace.
• Enter a property / variable name for the element.
• Click Import to Page Object to insert the formatted locator directly into your code.

6. Scan Page for Bulk Locators

• Click Scan Page to extract locators for all interactive elements on the page.
• Review discovered locators in the list and bulk-import them into your Page Object file.

Supported Page Object Formats

Configure your preferred POM code style using the locatorFinder.pomFormat setting:

readonlyProperty (Default)

readonly submitBtn = this.page.getByRole('button', { name: 'Submit' });

getterMethod

get submitBtn() {
  return this.page.getByRole('button', { name: 'Submit' });
}

keyValueJSON

"submitBtn": "getByRole('button', { name: 'Submit' })",

Extension Settings

Customize extension behavior through VS Code Settings (Ctrl+, / Cmd+, -> search for Locator Finder):

Commands

Access these commands from the VS Code Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

Requirements

• VS Code: Version 1.85.0 or higher.
• Playwright Chromium: Playwright Chromium browser installed (npx playwright install chromium).

Troubleshooting & Tips

• Browser fails to launch: Ensure Chromium browser binaries are installed via npx playwright install chromium.
• Shadow DOM / Web Components: The locator generator automatically handles shadow DOM hierarchies using Playwright's shadow-piercing locators and accessible name heuristics.
• Page Object directory: By default, the extension looks for files inside the pages/ directory in your workspace root. You can adjust this via locatorFinder.defaultPageObjectDir or use the file picker in the sidebar to select any target file.