Skip to main content

Using Web Agent

This guide walks you through using Web Agent to automate web browser interactions and generate automation scripts.

Switching to Web Agent Mode​

Step 1: Open PostQode Chat Interface​

  1. Open VS Code with PostQode extension installed
  2. Click on the PostQode icon in the sidebar to open the chat panel
  3. You'll see the chat interface with a mode dropdown at the top

Step 2: Change to Web Agent Mode​

  1. Click on the mode dropdown (usually shows "Code" by default)
  2. Select "Web Agent" from the dropdown menu
  3. The interface will switch to Web Agent mode, indicated by the mode label

Step 3: Verify Browser Connection​

Before starting automation tasks, ensure your browser connection is active:

  1. Check that you've configured browser settings properly
  2. Look for connection status indicators in the interface
  3. If disconnected, go back to settings to establish connection

Basic Web Agent Commands​

Go to Website​

Go to https://example.com
Navigate to https://github.com and take a screenshot

Open Multiple Pages​

Open https://google.com in a new tab and then navigate to https://stackoverflow.com

Interaction Commands​

Click Elements​

Click the "Sign In" button on the page

Fill Forms​

Fill the search box with "PostQode automation" and press Enter

Select Dropdown Options​

Select "United States" from the country dropdown

Scroll and Navigate​

Scroll down to the footer and click the "Contact Us" link

Advanced Automation Scenarios​

Complete User Journey​

Go to https://example-ecommerce.com, search for "laptop", 
click on the first result, add it to cart, and proceed to checkout

Form Automation​

Go to the contact form at https://example.com/contact, 
fill in name as "John Doe", email as "[email protected]", 
message as "Testing automation", and submit the form

Data Extraction​

Go to https://news-website.com, extract all article headlines 
from the homepage, and save them to a file

Multi-Step Workflow​

1. Go to https://admin-panel.com
2. Login with username "admin" and password "password123"
3. Navigate to the users section
4. Create a new user with name "Test User"
5. Verify the user was created successfully

Web Agent Response Types​

Screenshots​

Web Agent automatically takes screenshots at key steps:

  • After navigation to new pages
  • After significant interactions
  • When explicitly requested
  • For error documentation

Action Confirmations​

Web Agent provides feedback for each action:

  • ✅ Successfully navigated to website
  • ✅ Clicked button "Submit"
  • ✅ Form filled successfully
  • ❌ Element not found: "Login button"

Generated Code​

Web Agent can generate automation scripts:

  • Playwright scripts
  • Selenium scripts
  • Custom automation frameworks
  • Reusable test scenarios

Working with Dynamic Content​

Waiting for Elements​

Go to https://dynamic-site.com and wait for the loading spinner to disappear, 
then click the "Load More" button

Handling Pop-ups​

Navigate to https://popup-site.com, dismiss any cookie banners, 
and then click the main call-to-action button

Working with Frames​

Go to https://iframe-site.com, switch to the embedded frame, 
and fill out the form inside it

Error Handling and Debugging​

Common Issues and Solutions​

Element Not Found​

❌ Could not find element: "Submit button"

Solution: Be more specific about the element or check if page loaded completely

Page Load Timeout​

❌ Page failed to load within timeout period

Solution: Increase timeout or check if website is accessible

Connection Lost​

❌ Browser connection lost during automation

Solution: Check browser settings and re-establish connection

Debugging Commands​

Take Screenshot for Debugging​

Take a screenshot of the current page to see what's visible

Get Page Information​

Show me the current page title and URL

List Available Elements​

Show me all clickable buttons on this page

Best Practices​

Writing Effective Prompts​

Be Specific​

❌ "Click the button" ✅ "Click the 'Sign Up' button in the top navigation"

Use Clear Steps​

❌ "Do everything to complete checkout" ✅ "Add item to cart, go to checkout, fill shipping info, and place order"

Include Context​

❌ "Fill the form" ✅ "Fill the contact form with my name and email address"

Performance Tips​

Go to https://example.com, click "Products", then "Laptops", 
then filter by "Under $1000" - all in one command

Use Explicit Waits​

Navigate to the page and wait for the data table to load completely 
before extracting information

Minimize Screenshots​

Complete the entire checkout process and take a screenshot only at the end

Generating Automation Scripts​

Request Script Generation​

Generate a Playwright script for the automation I just performed

Specify Framework​

Create a Selenium Python script that replicates these actions

Export Test Case​

Convert this workflow into a reusable test case for our test suite

Next Steps​

Troubleshooting​

If you encounter issues:

  1. Check browser connection in settings
  2. Verify website accessibility manually
  3. Review error messages for specific guidance
  4. Try simpler commands to isolate issues
  5. Check network connectivity and firewall settings

For more help, join our Discord community.

Is this documentation incorrect or incomplete? Report an issue on GitHub