Web Browser Automation with Agents 🤖🌐 · Hugging Face (original) (raw)

In this notebook, we’ll create an agent-powered web browser automation system! This system can navigate websites, interact with elements, and extract information automatically.

The agent will be able to:

Let’s set up this system step by step!

First, run these lines to install the required dependencies:

pip install smolagents selenium helium pillow -q

Let’s import our required libraries and set up environment variables:

from io import BytesIO from time import sleep

import helium from dotenv import load_dotenv from PIL import Image from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys

from smolagents import CodeAgent, tool from smolagents.agents import ActionStep

load_dotenv()

Now let’s create our core browser interaction tools that will allow our agent to navigate and interact with web pages:

@tool def search_item_ctrl_f(text: str, nth_result: int = 1) -> str: """ Searches for text on the current page via Ctrl + F and jumps to the nth occurrence. Args: text: The text to search for nth_result: Which occurrence to jump to (default: 1) """ elements = driver.find_elements(By.XPATH, f"//*[contains(text(), '{text}')]") if nth_result > len(elements): raise Exception(f"Match n°{nth_result} not found (only {len(elements)} matches found)") result = f"Found {len(elements)} matches for '{text}'." elem = elements[nth_result - 1] driver.execute_script("arguments[0].scrollIntoView(true);", elem) result += f"Focused on element {nth_result} of {len(elements)}" return result

@tool def go_back() -> None: """Goes back to previous page.""" driver.back()

@tool def close_popups() -> str: """ Closes any visible modal or pop-up on the page. Use this to dismiss pop-up windows! This does not work on cookie consent banners. """ webdriver.ActionChains(driver).send_keys(Keys.ESCAPE).perform()

Let’s set up our browser with Chrome and configure screenshot capabilities:

chrome_options = webdriver.ChromeOptions() chrome_options.add_argument("--force-device-scale-factor=1") chrome_options.add_argument("--window-size=1000,1350") chrome_options.add_argument("--disable-pdf-viewer") chrome_options.add_argument("--window-position=0,0")

driver = helium.start_chrome(headless=False, options=chrome_options)

def save_screenshot(memory_step: ActionStep, agent: CodeAgent) -> None: sleep(1.0)
driver = helium.get_driver() current_step = memory_step.step_number if driver is not None: for previous_memory_step in agent.memory.steps:
if isinstance(previous_memory_step, ActionStep) and previous_memory_step.step_number <= current_step - 2: previous_memory_step.observations_images = None png_bytes = driver.get_screenshot_as_png() image = Image.open(BytesIO(png_bytes)) print(f"Captured a browser screenshot: {image.size} pixels") memory_step.observations_images = [image.copy()] 

url_info = f"Current url: {driver.current_url}"
memory_step.observations = (
    url_info if memory_step.observations is None else memory_step.observations + "\n" + url_info
)

Now let’s create our web automation agent:

from smolagents import InferenceClientModel

model_id = "Qwen/Qwen2-VL-72B-Instruct"
model = InferenceClientModel(model_id=model_id)

agent = CodeAgent( tools=[go_back, close_popups, search_item_ctrl_f], model=model, additional_authorized_imports=["helium"], step_callbacks=[save_screenshot], max_steps=20, verbosity_level=2, )

agent.python_executor("from helium import *", agent.state)

The agent needs instructions on how to use Helium for web automation. Here are the instructions we’ll provide:

helium_instructions = """ You can use helium to access websites. Don't bother about the helium driver, it's already managed. We've already ran "from helium import *" Then you can go to pages! Code:

```py go_to('github.com/trending')

```

You can directly click clickable elements by inputting the text that appears on them. Code:

```py click("Top products")

```

If it's a link: Code:

```py click(Link("Top products"))

```

If you try to interact with an element and it's not found, you'll get a LookupError. In general stop your action after each button click to see what happens on your screenshot. Never try to login in a page.

To scroll up or down, use scroll_down or scroll_up with as an argument the number of pixels to scroll from. Code:

```py scroll_down(num_pixels=1200) # This will scroll one viewport down

```

When you have pop-ups with a cross icon to close, don't try to click the close icon by finding its element or targeting an 'X' element (this most often fails). Just use your built-in tool close_popups to close them: Code:

```py close_popups()

```

You can use .exists() to check for the existence of an element. For example: Code:

```py if Text('Accept cookies?').exists(): click('I accept')

``` """

Now we can run our agent with a task! Let’s try finding information on Wikipedia:

search_request = """ Please navigate to https://en.wikipedia.org/wiki/Chicago and give me a sentence containing the word "1992" that mentions a construction accident. """

agent_output = agent.run(search_request + helium_instructions) print("Final output:") print(agent_output)

You can run different tasks by modifying the request. For example, here’s for me to know if I should work harder:

github_request = """ I'm trying to find how hard I have to work to get a repo in github.com/trending. Can you navigate to the profile for the top author of the top trending repo, and give me their total number of commits over the last year? """

agent_output = agent.run(github_request + helium_instructions) print("Final output:") print(agent_output)

The system is particularly effective for tasks like: