Introducing Playwright Smart Locator

Introducing Playwright Smart Locator: Simplifying Web Automation with Natural Language Queries

The Challenge with Traditional Selectors

In the realm of web automation, precision is key. Traditional methods of locating web elements often rely on intricate and brittle selectors like XPath or CSS selectors. These methods, while powerful, can become cumbersome and error-prone, especially when dealing with complex web pages or dynamic content. A typical selector might look something like this:

search_box = page.locator("xpath=/html/body/div[1]/div[3]/form/div[1]/div[1]/div[1]/div/div[2]/button")

Such selectors are not only difficult to read but also prone to break when the structure of the webpage changes.

Enter Playwright Smart Locator

Our new Playwright Smart Locator addresses these challenges by enabling you to use natural language queries to locate web elements. This AI-driven approach simplifies the process, making your code more readable and resilient. Here’s how you can use it:

search_box = page.get_by_ai("Search input field")

import time

from playwright.sync_api import sync_playwright

from agentql.ext.playwright.sync_api import Page


with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page: Page = browser.new_page()
    page.goto("https://www.google.com/")

    search_box = page.get_by_ai("Search input field")
    search_btn = page.get_by_ai("Search button which initiaties the search")

    if search_box is None or search_btn is None:
        raise ValueError("Search box or search button not found")

    search_box.type("Tiny Fish")
    search_btn.click(force=True)

    time.sleep(5)

With Smart Locator, you can describe the element you want to interact with in plain English, and our AI will handle the rest.

Key Benefits

1. Intuitive and Readable Code: By replacing complex selectors with natural language queries, your automation scripts become more readable and maintainable. This is especially beneficial for teams, making it easier for new members to understand and contribute to the codebase.

2. Increased Productivity: Spend less time crafting and debugging selectors. With Smart Locator, you can quickly identify web elements using simple descriptions, speeding up your automation development process.

3. Resilience to Changes: Natural language queries are more resilient to changes in the webpage structure. If a page layout changes, there's a higher chance that your natural language description will still correctly identify the desired element.

4. Seamless Integration: For engineers with existing Playwright scripts, integrating Smart Locator is a breeze. It’s a drop-in replacement for your current page.get_by* and page.locate* methods, ensuring a smooth transition.

Getting Started

To start using Playwright Smart Locator:

1. Update your AgentQL SDK to the latest version
2. [Important] Replace existing Page import with Page from AgentQL SDK: from agentql.ext.playwright.sync_api import Page (or from agentql.ext.playwright.async_api import Page for async scripts)
3. Replace your existing locator methods with page.get_by_ai and provide a natural language description of the element you wish to interact with. Here’s a quick example:

Before:

search_box = page.locator("xpath=/html/body/div[1]/div[3]/form/div[1]/div[1]/div[1]/div/div[2]/button")

After:

search_box = page.get_by_ai("Search input field")

Join the Future of Web Automation

We believe that Playwright Smart Locator will transform how you approach web automation, making it more accessible and efficient. We are excited to see how this feature will enhance your automation scripts and overall productivity.

Stay tuned for more updates and features as we continue to innovate and improve the AgentQL SDK. If you have any feedback or questions, feel free to reach out to our support team or join our community forum.

Happy automating!

Thank you for being a part of our journey to make web automation smarter and more efficient.