In this Blog, We will discuss about "Locator Labs" on finding reliable and efficient locators to build your test automation. First of all thanks to "Naveen Khunteta" in building this amazing chrome extension.
To start with,
1. What is Locator Labs?
Locator Labs is a Chrome extension that lets QA engineers and automation developers:
-
Inspect web elements visually
-
Generate multiple locator strategies (
getByRole,getByLabel,CSS,XPath) -
Validate locators on the page instantly
-
Export working locators into Playwright or Selenium Page Object code
Supports:
✔ Playwright (JavaScript / TypeScript / Python)
✔ Selenium (Java / Python / C#)
📘 Diagram: “Where Locator Labs Fits in the Automation Flow”
2. Installation Guide
Follow these steps to install Locator Labs in your Chrome or Edge browser:
Open the Chrome Web Store page
Click Add to Chrome
Approve the permission prompt
Once installed, pin the extension to your toolbar for quick access
Navigate to any web page and click the Locator Labs icon
🧭 Diagram: “Installation Steps Overview”
3. Using Locator Labs to Generate Locators
Once installed, it’s incredibly easy to start finding locators.
Step 1 — Open your target web page
Go to the page you want to automate (for example, your React app).
Step 2 — Activate Locator Labs
Click the Locator Labs icon in the Chrome toolbar. A side panel or overlay appears.
Step 3 — Hover and Select
Hover your mouse over any element. Locator Labs highlights it and instantly shows suggested locators like:
Step 4 — Copy or Export
Copy the locator or export it into a Page Object in your desired framework.
🧮 Diagram: “How Locator Labs Generates Locators”
4. Validating Locators in Real Time
Locator Labs also lets you validate your locators instantly.
✅ Click on a suggested locator → the element is highlighted on the page
❌ If multiple matches appear, it shows the count and highlights all of them
You can refine your locator using filters or choose alternate strategies.
5. Exporting to Your Automation Framework
After validation, export the locator into ready-to-use automation code.
-
Playwright Export Example
Selenium Export Example
6. Best Practices with Locator Labs
-
✅ Prefer semantic locators (getByTestId,
getByRole,getByLabel) for stability -
🧩 Re-validate locators after UI changes
-
🧠 Don’t rely only on long XPaths
-
🔁 Store all locators in Page Object Models
-
🧾 Use built-in annotation/screenshot for reporting
🪄 Diagram: “Locator Labs in a QA Workflow”
7. Conclusion
Locator Labs is one of the most practical Chrome extensions for test automation engineers.
It simplifies finding, validating, and maintaining locators across Playwright and Selenium projects.
It is a helpful productivity-tool for test automation teams using Playwright or Selenium. It bridges the gap between manual locator hunting and robust, maintainable automation code. By generating smart suggestions, validating them in real-time, exporting ready-to-use Page Objects, and supporting relative locators (for Selenium) as well as typical locators (for Playwright), it can save a lot of time and reduce flakiness.
If you’ve ever struggled with flaky selectors, this tool can drastically reduce that pain.
Try it on your next automation sprint — it might just become your go-to locator companion.
If you’re regularly writing UI tests for your web application, incorporating a tool like Locator Labs can make your locator creation workflow nicer and more reliable.
Happy Automation testing Guys :)!
