VegCart — Automation Testing Guide

VegCart is a single-page e-commerce application for fresh fruits and vegetables. Navigation is entirely tab-based — clicking sidebar buttons swaps visible panels without any page reload. All data is stored in the browser's localStorage, making it ideal for practising automation without a backend.

The home tab is the landing page of the app. It provides an overview of the store, category shortcuts, and a selection of featured products.

• 1Observe the hero banner with a headline, description, and two action buttons — Shop Now and Track Order
• 2Find the four stats cards showing Fresh Products, Happy Customers, Orders Delivered, and Customer Rating
• 3Locate the Shop by Category section with four cards: Fruits, Vegetables, Greens & Herbs, and Exotic Produce
• 4Click any category card to jump directly to the Products tab with that category pre-filtered
• 5Observe the Today's Deals section showing a grid of featured products with high ratings
• 6Click View All next to Today's Deals to navigate to the full products list
• 7Add any featured product to cart directly from the home tab by clicking its Add button
• 8Observe the USP strip at the bottom showing Express Delivery, 100% Organic, Quality Guarantee, and 24/7 Support cards
• 9Use the global header search bar to type a product name and verify the app navigates to Products with results filtered

The Products tab is the main catalogue page with 24 items across four categories. It supports full search, sort, and filter capabilities.

• 1Click Browse Products in the sidebar to navigate to the products catalogue
• 2Observe the product count badge in the card header showing the number of products currently visible
• 3Locate the search box in the toolbar and type a product name such as "mango" — observe the grid filters in real time
• 4Clear the search to restore all products, then type a name that doesn't exist and verify the empty state message appears
• 5Locate the Category dropdown in the toolbar and change it to Vegetables — verify only vegetable products are shown
• 6Try each category option (Fruits, Greens & Herbs, Exotic Produce) and verify the grid updates each time
• 7Open the Sort dropdown and select Price: Low to High — verify the cheapest item appears first in the grid
• 8Select Price: High to Low and verify the most expensive item is first
• 9On any product card, click the heart icon to add it to the wishlist — observe the toast notification
• 10Click the eye icon on a product card to open the Quick View modal with full product details
• 11Inside the Quick View modal, verify the product emoji, name, price, unit, rating, stock status, and category are displayed
• 12Click Add to Cart inside the Quick View modal — verify the modal closes and the cart badge increments
• 13Click the Add button directly on a product card and verify the toast notification appears
• 14For products where you have already added to cart, notice the button reads Add More

The Cart tab displays all items added to the session cart. Changes to quantities update the order summary instantly.

• 1Click My Cart in the sidebar; if no items have been added, the empty state illustration and a Start Shopping button appear
• 2Add one or more products from the Products tab, then return to the Cart tab to see the item rows
• 3Each cart row shows the product emoji, name, category, unit price, a quantity stepper, line subtotal, and a remove button
• 4Click the + button on the quantity stepper to increase an item's quantity by one and verify the subtotal updates
• 5Click the − button and verify the quantity cannot go below 1
• 6Type a number directly into the quantity input field and verify the subtotal recalculates
• 7Observe the Order Summary panel on the right showing Subtotal, Delivery fee, and Total
• 8Add items until the subtotal reaches ₹500 or more — verify the delivery fee changes to FREE
• 9Click the trash icon on an item row to remove it — verify the row disappears and the summary recalculates
• 10Click Clear Cart in the card header and confirm the dialog — verify all items are removed and the empty state reappears
• 11Click Proceed to Checkout to navigate to the Checkout tab

The Checkout tab collects a delivery address and payment method before placing an order. The right panel shows a live order summary matching the cart.

• 1Click Checkout in the sidebar or the Proceed to Checkout button from the Cart tab
• 2Observe the Delivery Address form with fields: Full Name, Phone, Address Line, City, State, PIN Code, and Delivery Slot
• 3If a user is logged in, notice the form fields are pre-populated with the saved address
• 4Fill in all required fields — Full Name, Phone, Address Line, City, and PIN Code are mandatory
• 5Select a preferred Delivery Slot from the dropdown (Express, Morning, Afternoon, Evening)
• 6Observe the four Payment Method options: Cash on Delivery, UPI, Credit/Debit Card, and VegCart Wallet
• 7Select a payment method and verify the radio option highlights the selected card
• 8Verify the Order Summary panel shows the correct subtotal, delivery fee, and grand total
• 9Click Place Order with a form field left empty — verify the validation toast appears and the order is not placed
• 10Fill the form completely and click Place Order — verify the success modal appears with a confirmation message
• 11Verify the cart badge in the sidebar resets to 0 after the order is placed
• 12Observe the app automatically navigates to the Orders tab after a short delay

The Orders tab shows the complete order history for the logged-in user. Pre-seeded orders are available immediately without needing to place a new order first.

• 1Click My Orders in the sidebar to navigate to the order history page
• 2Observe the order cards; each shows the order ID, date, product chips, total amount, and a colour-coded status badge
• 3Verify the status badge colours: Processing (yellow), Confirmed (blue), Out for Delivery (light blue), Delivered (green), Cancelled (red)
• 4Locate the search box in the toolbar, type an order ID such as ORD-10021, and verify only matching orders appear
• 5Clear the search, then use the status filter dropdown to show only Delivered orders
• 6Try each filter option and verify the list updates; select All Orders to restore the full list
• 7Click the Details button on an order card to open the Order Detail modal
• 8In the Details modal, observe the order tracker steps showing the order's progress through the pipeline
• 9Verify the item table in the modal lists every product, its quantity, price, and row total
• 10Close the modal using the × button or by clicking outside it
• 11Click the Reorder button on a delivered order to add all its items back to the cart
• 12Find a Processing order and click the Cancel button; confirm the dialog and verify the status changes to Cancelled
• 13Verify that a Delivered or Cancelled order does not show the Cancel button

The Profile tab handles sign-in, new account creation, and logged-in user profile management.

• 1Click My Profile in the sidebar; when not signed in, the authentication panel appears with two tabs: Sign In and Create Account
• 2On the Sign In tab, enter a valid email and password, then click Sign In — verify the success toast and the profile panel renders
• 3Enter incorrect credentials and verify the error toast "Invalid email or password" appears without logging in
• 4Submit the Sign In form with an empty email field and observe native browser validation
• 5Switch to the Create Account tab, fill in Full Name, Phone, Email, and Password, then submit
• 6Verify the success toast "Account created!" appears and the user is automatically signed in
• 7Attempt to sign up with an email address that already exists — verify the warning toast "Email already registered"
• 8When logged in, observe the profile card on the left showing the avatar initials, name, email, order count, and wishlist count
• 9Locate the edit profile form on the right and change the Full Name or Phone number
• 10Click Save Changes and verify the success toast and the updated name reflected in the profile card and sidebar
• 11Click the Logout button in the profile card and verify the auth panel reappears and the sidebar shows "Guest"

The Wishlist lets users save products for later. Items persist in localStorage across page refreshes.

• 1Navigate to the Products tab and click the heart icon on any product card — observe the success toast “Added to wishlist”
• 2Verify the heart icon on the card turns pink/filled to indicate the item is wishlisted
• 3Observe the Wishlist badge count in the sidebar increment each time a new item is wishlisted
• 4Click Wishlist in the sidebar to navigate to the wishlist page
• 5Verify that all wishlisted product cards are displayed in the grid
• 6Click the Add button on a wishlist card to add it to the cart and verify the cart badge increments
• 7Verify that adding a wishlisted product to the cart does not remove it from the wishlist automatically
• 8Click the heart icon again on a wishlisted product (either in the Products tab or Wishlist tab) to remove it
• 9Verify the toast “Removed from wishlist” appears and the item disappears from the Wishlist grid
• 10Remove all wishlisted items and verify the empty state with a Browse Products button appears
• 11Refresh the page and verify that previously wishlisted items are still present (localStorage persistence)

The Support tab includes contact channel cards, an accordion FAQ, and a contact form.

• 1Click Support in the sidebar to navigate to the support page
• 2Observe the four support channel cards at the top: Call Us, Email Support, WhatsApp, and Live Chat
• 3Verify each support card shows an icon, title, contact details, and availability hours
• 4Locate the Frequently Asked Questions card containing six collapsible FAQ items
• 5Click any FAQ question row to expand it — verify the answer panel becomes visible and the chevron icon rotates
• 6Click a second FAQ question and verify it opens while the first one automatically closes (accordion behaviour)
• 7Click the currently open FAQ again and verify it collapses
• 8Locate the Send Us a Message contact form on the right side
• 9Fill in the Name, Email, Subject dropdown, and Message fields, then click Send Message
• 10Verify the success toast “Your message has been sent!” appears and all form fields are cleared
• 11Attempt to submit the contact form without filling required fields and observe native browser validation

VegCart exposes 18 tools via the WebMCP browser-native standard, allowing AI agents to interact with the app programmatically — searching for products, managing the cart, placing orders, user authentication, and more — without clicking the UI manually.

Registered Tools

How to Use — Model Context Tool Inspector

• 1Install the Model Context Tool Inspector extension from the Chrome Web Store
• 2Open VegCart at http://localhost:4040/testweb/vegcart/ in Chrome
• 3Click the Model Context Tool Inspector extension icon — it should list all 18 tools registered by VegCart
• 4Select get_product_list and click Execute — verify a JSON response with 24 products is returned
• 5Select search_products, set query to carrot, and execute — verify the VegCart UI navigates to Products and shows only matching items
• 6Select add_item_to_cart, set itemName to Spinach and quantity to 2, and execute — verify the Cart tab opens and Spinach × 2 appears
• 7Select get_cart_contents and execute — verify it returns cart details including subtotal, delivery, and total amounts
• 8Select place_order with delivery details and execute — verify order is placed and order ID is returned
• 9Try add_item_to_cart with a product name that does not exist — verify the tool returns success: false and the cart does not change

VegCart features a built-in conversational interface that allows users to perform all shopping activities through natural language chat. The AI assistant interprets user messages and automatically executes appropriate WebMCP tools to fulfill requests.

Intent Recognition Patterns

How to Use — Chat Assistant

• 1Click Chat Assistant in the sidebar to open the conversational interface
• 2Type natural language requests like "Add 2 apples to my cart" or "Register me as John with email john@test.com"
• 3Watch as the AI assistant interprets your request and executes the appropriate actions
• 4Try complex requests like "Show me all vegetables under ₹50" or "Login with my email and place an order"
• 5Use suggestion buttons for quick common actions
• 6Check the tool execution results displayed in the chat for debugging