Playwright Locator Finder

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

Overview

Locator Finder is a VS Code extension designed to streamline authoring test automation locators for Playwright and Selenium projects across TypeScript, JavaScript, Python, C#, and Java.

Stop manually inspecting DOM trees, hand-crafting fragile CSS selectors, copying element attributes, or manually writing 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 Multi-Strategy Locator Engine: Generates resilient Playwright role-first locators (getByRole, getByLabel, getByText, getByTestId), standard CSS selectors, and relative XPath expressions.
• ⚡ Real-time Locator Validation: Test any Playwright locator, standard CSS selector, or XPath expression against the open browser page with live element highlighting and accurate match counts.
• 🌐 Selenium & Multi-Framework Support: Full support for Selenium WebDriver projects. Generate standard XPath and CSS locators compatible with By.xpath() and By.cssSelector() across Java, Python, C#, and JavaScript/TypeScript.
• 📄 Page Object Model (POM) Integration: Automatically discovers Page Object files in your workspace and inserts formatted locators directly into TypeScript, JavaScript, Python, C#, Java, 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.
• 🔒 Shadow DOM & Dynamic ID Resilience: Built-in resilience scoring and automated handling of shadow DOM roots, web components, and dynamic attributes (like auto-generated hashes or auto-incrementing IDs).

Framework & Language Support

Using with Selenium Projects

If you are working on a Selenium WebDriver project in VS Code (Java, Python, C#, or JS):

1. Launch Inspector: Click Start Inspecting to launch the browser and pick any element on your site.
2. Switch to XPath or CSS: Select the XPath or CSS tab in the sidebar. The extension automatically generates clean, resilient XPath expressions (//button[normalize-space()='Submit'], //input[@id='username']) and CSS selectors.
3. Validate in Real-Time: Click Test to highlight matching elements on the active page and verify exact element match counts before writing code.
4. Copy or Export: Copy the XPath/CSS directly into your driver.find_element(By.XPATH, "...") or By.cssSelector("...") statements, or use the Import to Page Object feature for your Selenium Page Object files.

Requirements & Prerequisites

Workspace Project Requirements

• No Playwright Project Dependency Required: Your workspace project does NOT need to have Playwright installed as a dependency! The extension bundles its own lightweight browser driver (playwright-core).
• Works seamlessly in any workspace—whether it is a Selenium Java/Python/C# repository, a Playwright TS/Python repository, or a plain web project.

System & Machine Requirements

• VS Code: Version 1.85.0 or higher.
• Browser Binary: To launch the inspection browser, your machine needs either:
  • Google Chrome installed locally, OR
  • Microsoft Edge installed locally, OR
  • Playwright Chromium installed via terminal (npx playwright install chromium).

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.
• Select your target programming language (TypeScript, Python, C#, Java).
• 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.