If you're in the world of test automation, you know and probably love Playwright Codegen. It's a fantastic tool that has lowered the barrier to entry for creating end-to-end tests, allowing anyone to record user actions and generate functional test scripts. It's fast, it's built-in, and for many simple scenarios, it's good enough.
But "good enough" isn't always good enough.
When faced with modern, complex web applications, the limitations of automated recorders become apparent. Codegen is a great starting point, but it's an algorithm following a set of predefined rules. It doesn't think like an expert engineer. For the truly tricky scenarios, you need a tool that does.
This is where Best-Locator enters the ring. Let's put them to the test in a real-world scenario where many automated tools fail.
The Test Case: The Textless Icon Link
Our challenge is to find a robust locator for the Discord icon link on faucet.circle.com.
The Discord icon link - a classic difficult element with no visible text
This is a classic difficult element: it's a clickable link (<a>), but it contains no visible text, only an SVG icon. It has no data-testid or unique ID. How do our contenders handle it?
The Side-by-Side Analysis
1. Playwright Codegen's Attempt
When we run Codegen on this element, it produces the following locator:
# Output from Playwright Codegen
page.get_by_role("link").filter(has_text=re.compile(r"^$")).nth(1)
Analysis:
At first glance, it seems clever. It correctly identifies the element as a link. It then filters for all links that have no text. But then comes the fatal flaw: .nth(1).
This is a major red flag. The .nth(1) means Codegen found multiple textless links on the page and had to resort to just picking the second one it found. This is the definition of a brittle selector. It's a locator based on hope and circumstance.
- What if a developer adds a new icon link before this one? The test will now click the wrong element.
- What if the order of the icons changes? The test will break.
2. Best-Locator's Solution
Now, we run bestlocator pick ... --ai on the same element. The result is fundamentally different:
# Output from Best-Locator
page.locator('a[href*="discord"]')
Best-Locator's AI intelligently identifies the href attribute as the key selector
Analysis:
Best-Locator's AI, guided by its advanced prompt and the AriaCalculator, ignored the unstable properties. It didn't care about the lack of text or the order of the elements. It asked a more intelligent question: "What is the purpose of this element?"
The purpose of a Discord icon link is to go to Discord. The most stable and unique property that defines this purpose is its href attribute.
- Semantic and Functional: The selector
a[href*="discord"]is not based on style or position, but on the element's function. It will find the element regardless of its position on the page. - Robust and Maintainable: Developers can add or remove other icons, and this selector will continue to work flawlessly as long as the link points to Discord. It is readable, intentional, and robust.
Conclusion: Thinking Like an Expert
Playwright Codegen is an excellent recorder. It tells you what it sees. In this case, it saw "the second link on the page with no text."
Best-Locator is an expert analyst. It tells you what the element means. It saw "the link that goes to Discord."
While a tool like Codegen is invaluable for getting started, it often produces locators that create long-term maintenance headaches. Best-Locator is designed to solve that problem, thinking like a senior engineer to give you the most stable and reliable selector from the start. For the simple cases, it's fast. For the complex cases, it's smart.
Don't just record tests. Build a reliable automation suite.
Ready to try the expert approach?
npm install -g bestlocator