AI locators for Playwright 🚀

#playwright #llm #opensource

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.