Assignment 04 - Website Automation Agent

This project implements a small intelligent website automation agent with Playwright. It opens the shadcn React Hook Form docs page, detects the Name and Description form fields, and fills them automatically.

Features

• Modular browser tools: open_browser, navigate_to_url, take_screenshot, click_on_screen, send_keys, scroll, and double_click
• Intelligent field detection using labels, placeholders, and XPath fallbacks
• Page inspection logs that show what controls the agent considered
• Coordinate-based interaction for clicks, matching the assignment requirement
• Logging for every major action and decision
• Environment-based configuration
• Screenshots before and after automation

Setup

Install dependencies:

npm install
npx playwright install chromium

Optional configuration:

cp .env.example .env

Edit .env if you want to change the target URL, browser mode, or form values.

Run

Run the agent using the default URL (configured in .env or defaulting to Shadcn):

npm start

Or pass a custom URL directly through the terminal:

# Via npm (requires '--' before arguments)
npm start -- https://example.com

# Via node directly
node src/index.js https://example.com

By default the browser opens visibly (HEADLESS=false) so it can be demonstrated during viva. Screenshots are saved in the screenshots/ directory.

The visible demo intentionally runs slower than a pure automation script. It types with a delay and keeps the completed browser open for inspection, so the examiner can see the agent's work.

Scripts

• npm start - run the automation agent
• npm run demo - same as start, useful for viva demos
• npm run check - validate JavaScript syntax

Configuration

The agent reads these environment variables:

• TARGET_URL - page to automate
• FORM_NAME - text for the Name field
• FORM_DESCRIPTION - text for the Description field
• HEADLESS - true or false
• BROWSER - chromium, firefox, or webkit
• SLOW_MO - delay in milliseconds between Playwright actions
• TYPE_DELAY_MS - delay between typed characters
• DEMO_PAUSE_MS - how long to keep the completed visible browser open
• ACTION_TIMEOUT_MS - action timeout
• SCREENSHOT_DIR - screenshot output directory

Project Structure

src/
  agent/
    WebsiteAutomationAgent.js
  tools/
    BrowserTools.js
  utils/
    config.js
    logger.js
  index.js