Locator Labs — An End-to-End Locator Tooling Ecosystem for Modern QA Engineers

First of all, A big thanks to "Naveen Khunteta" for building Locator Labs—an amazing and thoughtfully designed tool that significantly simplifies locator creation and maintenance for QA engineers and an incredibly useful tool for modern test automation.

In my last blog, I covered Locator Labs with a focus on its Chrome browser extension only. This article goes a step further by exploring all three installation options of Locator Labs and highlighting how they benefit QA engineers in building reliable test automation.

1. What is Locator Labs?

Locator Labs is a tooling ecosystem that helps QA engineers and automation developers:

• Inspect web elements visually

• Generate multiple locator strategies:

  • Playwright (getByRole, getByLabel, getByTestId, CSS, XPath)

  • Selenium (CSS, XPath, Relative Locators)

• Validate locators instantly on the page

• Export working locators directly into Page Object–ready code

Supported Automation Frameworks

✔ Playwright (JavaScript / TypeScript / Python)
✔ Selenium (Java / Python / C#)

📘 Diagram: Where Locator Labs Fits in the Automation Flow

2. Locator Labs Components Overview

Locator Labs is not just a browser extension. It consists of three complementary components:

1. Chrome / Edge Extension – For visual inspection and locator generation

2. Desktop Setup App – For managing projects, frameworks, and exports

3. NPM Package – For seamless integration with Playwright projects

📘 Diagram: Locator Labs Tooling Ecosystem

3. Installation Guide – Browser Extension

Follow these steps to install Locator Labs in Chrome or Edge:

1. Open the Chrome Web Store page

2. Click Add to Chrome

3. Approve the permission prompt

4. Pin the extension to your toolbar for quick access

5. Navigate to any web page and click the Locator Labs icon

🧭 Diagram: Installation Steps Overview

4. Desktop Setup App (Locator Labs Desktop)

The Locator Labs Desktop App enhances the extension by providing a centralized setup for your automation projects.

Why Use the Desktop App?

• Configure your preferred automation framework (Playwright / Selenium)

• Select language (JS, TS, Java, Python, C#)

• Define Page Object structure and naming conventions

• Manage exported locators across projects

• Keep locator standards consistent across teams

Typical Workflow

1. Install and open the Locator Labs Desktop App

2. Configure your automation framework and language

3. Connect it with the browser extension

4. Export locators directly into your project structure

📘 Diagram: Desktop App Integration Flow

5. NPM Package for Playwright Integration

For Playwright users, Locator Labs also provides an npm package that integrates smoothly into existing test automation setups.

Benefits of the NPM Package

• Easy installation into Playwright projects

• Standardised locator handling

• Cleaner Page Object Model generation

• Faster onboarding for new team members

Installation Command

npx locatorlabs

The npm package works alongside the extension and desktop app to:

• Consume exported locators

• Organise them into Page Objects

• Keep locators maintainable and reusable

📘 Diagram: NPM Package in Playwright Workflow

6. Using Locator Labs to Generate Locators

Once installed, generating locators is incredibly simple.

Step 1 — Open Your Target Web Page

Navigate to the application you want to automate (for example, a React app).

Step 2 — Activate Locator Labs

Click the Locator Labs icon in the browser toolbar. A side panel or overlay appears.

Step 3 — Hover and Select Elements

Hover over any element on the page. Locator Labs highlights it and instantly suggests locators such as:

• Playwright getByRole()

• getByLabel()

• getByTestId()

• CSS selectors

• XPath

📘 Diagram: How Locator Labs Generates Locators

Step 4 — Copy or Export

• Copy the locator directly

• Or export it to your configured framework via the Desktop App or npm setup

7. Validating Locators in Real Time

Locator Labs allows instant validation:

• ✅ Clicking a locator highlights the target element

• ❌ If multiple matches exist, it shows the count and highlights all matches

This makes it easy to refine locators and avoid flaky selectors.

8. Exporting to Your Automation Framework

After validation, export locators into ready-to-use code.

Playwright Export Example

this.loginButton = page.getByRole('button', { name: 'Login' });

Selenium Export Example

By loginButton = By.xpath("//button[text()='Login']");

Exports align with your Page Object Model structure when using the Desktop App or npm package.

9. Best Practices with Locator Labs

✅ Prefer semantic locators (getByTestId, getByRole, getByLabel)
🧩 Re-validate locators after UI changes
🧠 Avoid long, brittle XPaths
🔁 Store locators in Page Object Models
🧾 Use annotations and screenshots for reporting

📘 Diagram: Best Practices with Locator Labs in a QA Workflow

10. Conclusion

Locator Labs is one of the most practical productivity tools available for test automation engineers.

By combining:

• A powerful browser extension

• A structured desktop setup app

• An npm package for Playwright integration

It significantly simplifies how we find, validate, and maintain locators across Playwright and Selenium projects.

If you’ve ever struggled with flaky selectors, Locator Labs can drastically reduce that pain.

Try it in your next automation sprint — it might just become your go-to locator companion.

Happy Automation Testing Guys :) 🚀 !