Shopping Browser Automation Agent Skill

Shopping Browser Automation Skill

This skill is based on Playwright MCP tools, providing automation capabilities for e-commerce websites.

Core Concepts

In shopping website automation, we distinguish two types of operations:

• Skill: Meaningful combinations of multiple tool calls, encapsulated as independent Python scripts
• Basic Tools: Single function calls in utils.py, used for atomic operations.

I. Skills

1. Simple Search - Type and Submit

File: simple_search.py

Use Cases:

• Need to search for a product using the main search bar
• Want to type a search term and automatically press Enter to submit

Prerequisites:

• First use navigate() to navigate to the website homepage
• Get the ref value of the search input field

Usage:

# Usage:
#   python simple_search.py <search_term> <search_input_ref>
# Example:
python simple_search.py "gingerbread" e35

2. Advanced Search - By Product Name and Price Range

File: advanced_search_by_name.py

Use Cases:

• Already on the Advanced Search page
• Need to fill in product name and price range for search

Prerequisites:

• First use navigate() to navigate to the website homepage
• Then use click() to click the "Advanced Search" link
• Get the ref values of form fields

Typical Task Examples:

• Search for products with name containing "Ginger", price between $50.00 and $100.00
• Search for products with name containing "cookie", price between $20.00 and $40.00

Usage:

# Usage:
#   python advanced_search_by_name.py <product_name> <price_from> <price_to> <name_ref> <price_from_ref> <price_to_ref> <search_btn_ref>
# Example:
python advanced_search_by_name.py "Ginger" 50.00 100.00 e91 e110 e114 e118

3. Advanced Search - By Description and Price Range

File: advanced_search_by_description.py

Use Cases:

• Already on the Advanced Search page
• Need to search keywords in product description (not product name)
• Need to filter by price range

Prerequisites:

• First use navigate() to navigate to the website homepage
• Then use click() to click the "Advanced Search" link
• Get the ref values of form fields

Typical Task Examples:

• Search for products with description containing "vitamin", price $0.00-$99.99

Usage:

# Usage:
#   python advanced_search_by_description.py <description> <price_from> <price_to> <desc_ref> <price_from_ref> <price_to_ref> <search_btn_ref>
# Example:
python advanced_search_by_description.py "vitamin" 0.00 99.99 e99 e110 e114 e118

4. Checkout - Fill Shipping Information

File: fill_shipping_info.py

Use Cases:

• Already on the checkout page (after clicking "Proceed to Checkout")
• Need to fill in complete shipping address information

Typical Task Examples:

• Fill in customer's name, address, city, state, zip code, phone, etc.

Prerequisites:

• First use click() to click the "Proceed to Checkout" button
• Use snapshot() to get all form field ref values

Usage:

# Usage:
#   python fill_shipping_info.py <email> <first_name> <last_name> <street> <country> <state> <city> <zipcode> <phone> <email_ref> <fname_ref> <lname_ref> <street_ref> <country_ref> <state_ref> <city_ref> <zip_ref> <phone_ref>
# Example:
python fill_shipping_info.py [email protected] Alice Johnson "456 Oak Avenue" "United States" California "San Francisco" 94102 415-555-0123 e33 e46 e51 e65 e75 e80 e85 e90 e95

II. Basic Tools (When to Use Single Functions)

Below are the basic tool functions provided in utils.py and their use cases. These are atomic operations for flexible combination.

Note: Basic tools need to be used in async context. Can be simplified using run_browser_ops.py. Code should be written without line breaks.

How to Run

# Standard format (browser persists across calls)
python run_browser_ops.py -c "await browser.navigate('http://localhost:7770')"

Navigation Tools

navigate(url: str)

Use Cases:

• Open website homepage
• Directly access specific product page URL
• Jump to specific URL

Example:

python run_browser_ops.py -c "await browser.navigate('http://localhost:7770')"

navigate_back()

Use Cases:

• Go back to previous page
• Return to search results page after browsing products

Example:

python run_browser_ops.py -c "await browser.navigate_back()"

Interaction Tools

click(ref: str, element: Optional[str] = None)

Use Cases (very broad):

• Click navigation menu (categories, subcategories)
• Click product links
• Click "Add to Compare" button
• Click "Add to Cart" button
• Click pagination links (Page 2, Page 3, etc.)
• Click price filters
• Click sort direction toggle

Example:

python run_browser_ops.py -c "await browser.click(ref='e56', element='Health & Household menu item')"

type_text(ref: str, text: str, element: Optional[str] = None)

Use Cases:

• Enter keywords in search box
• Fill single form field
• Modify quantity input box

Example:

# Enter in search box
python run_browser_ops.py -c "await browser.type_text(ref='e32', text='gingerbread', element='Search input')"
# Press Enter to submit
python run_browser_ops.py -c "await browser.press_key('Enter')"

fill_form(fields: List[Dict[str, str]])

Use Cases:

• Fill multiple form fields (e.g., advanced search form)
• Batch update form data
• Update quantity in shopping cart

Example:

# Fill advanced search form
python run_browser_ops.py -c "await browser.fill_form(fields=[{'name': 'Product Name', 'ref': 'e111', 'value': 'cookie'}, {'name': 'Price From', 'ref': 'e134', 'value': '20.00'}, {'name': 'Price To', 'ref': 'e138', 'value': '40.00'}])"

# Update cart quantity
python run_browser_ops.py -c "await browser.fill_form(fields=[{'name': 'Qty', 'ref': 'e141', 'value': '3'}])"

select_option(ref: str, element_desc: str, value: str)

Use Cases:

• Select sort method (Sort By: Price, Relevance, etc.)
• Select country/state/province dropdown
• Select product options (e.g., Flavor, Size, etc.)

Example:

# Sort by price
python run_browser_ops.py -c "await browser.select_option(ref='e114', element_desc='Sort By dropdown', value='Price')"

# Select product flavor
python run_browser_ops.py -c "await browser.select_option(ref='e128', element_desc='Flavor', value='Peanut Butter')"

press_key(key: str)

Use Cases:

• Submit search (press Enter key)
• Close dialog (press Escape key)

Example:

# Press Enter after typing in search box
python run_browser_ops.py -c "await browser.press_key('Enter')"

Page State Tools

snapshot()

Use Cases (very important):

• When unsure about current page state
• Need to view complete page content to decide next action
• Verify if operation was successful
• Find ref references for specific elements

Example:

python run_browser_ops.py -c "await browser.snapshot()"

Best Practices:

• Use snapshot before and after critical operations to confirm state
• Use snapshot on search results page to view all products
• Use snapshot after page navigation to confirm page loaded completely

get_console_messages()

Use Cases:

• Debug JavaScript errors
• View log information during page loading

get_network_requests()

Use Cases:

• Debug network request issues
• View API call status

Wait Tools

wait_for_time(seconds: int)

Use Cases:

• Wait for page to load completely
• Wait for animation effects to finish
• Wait for async data loading

Example:

python run_browser_ops.py -c "await browser.wait_for_time(3)"

Tab Management

list_tabs()

Use Cases:

• View all currently open tabs
• Get tab ID

tab_new(url: Optional[str] = None)

Use Cases:

• Open product detail page in new tab (keep search results page)
• Compare multiple products simultaneously

Example:

python run_browser_ops.py -c "await browser.tab_new(url='http://localhost:7770/product-page.html')"

III. Best Practice Recommendations

1. Make Good Use of snapshot()

Use snapshot() in the following situations:

• Just entered a new page, unsure about page structure
• After executing an operation, need to verify results
• Need to find ref references for elements
• Unsure about current sort order (descending or ascending) / filter state

Usage Principles

• Prefer combined skills for fixed workflows: e.g., advanced search, add quantity to cart, fill forms
• Use basic tools flexibly for changing scenarios: e.g., click, input, select and other atomic operations
• Make good use of snapshot() to understand page state: confirm state before and after critical steps