Your First Web Task

This tutorial will guide you through completing your first web automation task using Web Agent. We'll walk through a simple but complete workflow that demonstrates the core capabilities.

Prerequisites

Before starting, ensure you have:

• ✅ PostQode extension installed and configured
• ✅ Browser settings configured with active connection
• ✅ Web Agent mode selected in PostQode

Tutorial: Automating a GitHub Search

We'll create an automation that searches for repositories on GitHub, clicks on a result, and takes screenshots along the way.

Step 1: Switch to Web Agent Mode

1. Open VS Code with PostQode extension
2. Click on the PostQode icon in the sidebar
3. In the chat interface, click the mode dropdown
4. Select "Web Agent" from the list

Step 2: Verify Browser Connection

Before starting automation, confirm your browser connection:

Check browser connection status

You should see a confirmation that the browser is connected and ready.

Step 3: Navigate to GitHub

Let's start with a simple navigation command:

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

Expected Result:

• Web Agent opens GitHub in the browser
• Takes a screenshot of the homepage
• Shows the screenshot in the chat
• Confirms successful navigation

Step 4: Perform a Search

Now let's search for PostQode repositories:

Search for "PostQode" in the GitHub search box and press Enter

Expected Result:

• Web Agent locates the search box
• Types "PostQode" into the search field
• Presses Enter to submit the search
• Takes a screenshot of the search results

Step 5: Click on a Repository

Let's click on the first repository result:

Click on the first repository in the search results

Expected Result:

• Web Agent identifies the first repository link
• Clicks on it to navigate to the repository page
• Takes a screenshot of the repository page
• Shows repository details

Step 6: Extract Information

Now let's extract some information from the repository:

Get the repository description and star count from this page

Expected Result:

• Web Agent extracts the repository description
• Gets the current star count
• Displays the extracted information in the chat

Step 7: Generate Automation Script

Finally, let's generate a reusable script for this workflow:

Generate a Playwright script for all the actions I just performed

Expected Result: Web Agent generates a complete Playwright script like this:

const { chromium } = require('playwright');

(async () => {
  // Launch browser
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();

  try {
    // Navigate to GitHub
    console.log('Navigating to GitHub...');
    await page.goto('https://github.com');
    await page.waitForLoadState('networkidle');
    
    // Take screenshot of homepage
    await page.screenshot({ path: 'github-homepage.png' });
    console.log('Screenshot saved: github-homepage.png');
    
    // Search for PostQode
    console.log('Searching for PostQode...');
    await page.fill('[data-test-selector="nav-search-input"]', 'PostQode');
    await page.press('[data-test-selector="nav-search-input"]', 'Enter');
    await page.waitForLoadState('networkidle');
    
    // Take screenshot of search results
    await page.screenshot({ path: 'search-results.png' });
    console.log('Screenshot saved: search-results.png');
    
    // Click first repository
    console.log('Clicking first repository...');
    await page.click('.repo-list-item:first-child h3 a');
    await page.waitForLoadState('networkidle');
    
    // Take screenshot of repository page
    await page.screenshot({ path: 'repository-page.png' });
    console.log('Screenshot saved: repository-page.png');
    
    // Extract repository information
    const repoName = await page.textContent('h1 strong a');
    const description = await page.textContent('[data-pjax="#repo-content-pjax-container"] p');
    const stars = await page.textContent('#repo-stars-counter-star');
    
    console.log('Repository Information:');
    console.log(`Name: ${repoName}`);
    console.log(`Description: ${description}`);
    console.log(`Stars: ${stars}`);
    
    console.log('Automation completed successfully!');
    
  } catch (error) {
    console.error('Error during automation:', error);
    await page.screenshot({ path: 'error-screenshot.png' });
  } finally {
    await browser.close();
  }
})();

Understanding the Results

What Happened

1. Navigation: Web Agent successfully navigated to GitHub
2. Interaction: It found and interacted with page elements (search box, links)
3. Data Extraction: It extracted specific information from the page
4. Documentation: It took screenshots at each step for verification
5. Code Generation: It created a reusable Playwright script

Key Observations

• Element Detection: Web Agent automatically found the right elements to interact with
• Wait Strategies: It waited for pages to load before proceeding
• Error Handling: It provided feedback for each action
• Screenshot Documentation: Visual proof of each step was captured

Common Issues and Solutions

Issue: Element Not Found

❌ Could not find search box on the page

Solution: Be more specific about the element:

Find the search input field in the top navigation and type "PostQode"

Issue: Page Load Timeout

❌ Page took too long to load

Solution: Add explicit wait instructions:

Go to https://github.com and wait for the page to fully load before taking a screenshot

Issue: Wrong Element Clicked

❌ Clicked on wrong repository

Solution: Be more specific about which element to click:

Click on the repository link that contains "PostQode" in the title

Next Steps

Now that you've completed your first web automation task, you can:

Explore More Complex Scenarios

Go to an e-commerce site, search for a product, add it to cart, and go to checkout

Try Different Websites

Automate a login flow on a social media platform

Generate Different Script Types

Create a Python Selenium script for the GitHub search workflow

Add Error Handling

Generate a robust script with retry logic and comprehensive error handling

Advanced Tutorial: Form Automation

Let's try a more complex example with form filling:

Step 1: Navigate to a Contact Form

Go to https://example.com/contact-us

Step 2: Fill Out the Form

Fill the contact form with:
- Name: "John Doe"
- Email: "[email protected]"
- Subject: "Web Agent Testing"
- Message: "This is an automated test using PostQode Web Agent"

Step 3: Submit and Verify

Submit the form and verify the success message appears

Step 4: Generate Test Script

Create a comprehensive test script that validates form submission with both valid and invalid data

Best Practices Learned

1. Be Specific with Instructions

❌ "Click the button" ✅ "Click the 'Search' button in the top navigation"

2. Use Step-by-Step Approach

❌ "Do everything to complete the checkout process" ✅ "Add item to cart, then go to cart, then proceed to checkout"

3. Include Verification Steps

❌ "Fill the form and submit" ✅ "Fill the form, submit it, and verify the success message appears"

4. Plan for Screenshots

❌ "Complete the entire process" ✅ "Complete the process and take screenshots at key steps"

Troubleshooting Your First Task

If you encounter issues:

1. Check Browser Connection: Ensure the connection indicator shows "Connected"
2. Verify Website Accessibility: Try accessing the website manually first
3. Use Simpler Commands: Break complex tasks into smaller steps
4. Check Error Messages: Read the specific error messages for guidance
5. Try Alternative Selectors: If an element isn't found, describe it differently

Congratulations! 🎉

You've successfully completed your first web automation task with Web Agent. You've learned how to:

• Navigate to websites
• Interact with page elements
• Extract information from pages
• Generate automation scripts
• Handle common issues

What's Next?

• Learn about generating automation scripts
• Using Web Agent

Ready to automate more complex workflows? Explore our other Web Agent documentation!