AI locators for Playwright 🚀

Today I'm excited to present ai-locators for Playwright! 🚀

// 👎 Say goodbye to this complexity page.locator("//div[contains(@class, 'header')]//button[contains(@class, 'login') and not(@disabled) and contains(text(), 'Sign In')]"); // 🌟 And hello to this simplicity! page.locator("ai=the login button in the header that says Sign In"); 

🔗 Check it out: https://github.com/lila-team/ai-locators

😫 The Problem

Let's face it - maintaining locators in Playwright tests can be a real headache! 🤕 They depend on how elements are positioned and declared in the frontend, which changes constantly and breaks your tests.

Sure, you could follow best practices like maintaining test-ids or being consistent with roles and labels (check out these best practices). But let's be real - developers want to move fast, and tests that are hard to maintain often get left behind! 🏃‍♂️💨

🤖 LLMs to the Rescue!

Here's where the magic happens! ✨ This project uses LLMs to generate selectors based on the HTML content and your natural description of the elements you want to find.
It's implemented as a custom selector engine so it fits perfectly into your existing Playwright codebase! 🧩

// 🔍 Search the entire page const element = page.locator("ai=the login button"); await element.click(); // 🎯 Search inside a container const container = page.locators('.main-div'); const element = container.locator("ai=search input"); await element.fill("foobar"); 

🎨 Choose Your LLM!

When registering the custom selector (check out our README for the how-to), you can pick your favorite LLM to power the magic - as long as it follows the OpenAI API! 🪄

🎉 Great news! ai-locators is available in both python and node! Give it a try and let us know what you think! 💭

🔗 Link to project: https://github.com/lila-team/ai-locators

ai-locators is available for Python and for Node.