Supercharge Your Browser Tests with Google Gemini (Free Tier Guide)

Supercharging Browser Automation with Google Gemini (Free Tier AI)

“AI won’t replace testers—but testers who use AI will replace those who don’t.”

Welcome back to TestOps Journal, where testing meets engineering excellence.

Today, we explore how to combine browser automation with Gemini, Google’s free-tier generative AI model. We'll walk through a working example where Gemini helps analyze a webpage and suggest test cases on the fly.

---

🔍 Why Use Gemini with Browser Automation?

Traditional test scripts are rule-based. But what if your script could understand the context of the page, summarize page content, and even suggest assertions or test data?

With Google Gemini’s API and tools like Playwright or Puppeteer, that vision is within reach—even on the free tier.

---

What You’ll Need

Prerequisites

• Node.js 18+

• A Google Cloud Project with Gemini API enabled (Vertex AI)

• API key with access to generative language API

• Browser automation library: Playwright or Puppeteer

• Axios or fetch for API calls

---

Step-by-Step: Dynamic Page Understanding with Gemini

Let’s say you want to test the homepage of https://magento.softwaretestingboard.com/.

We'll use:

• Playwright to open the page and extract HTML content

• Gemini API to understand the page and suggest test ideas

---

1. Setup Your Node Project

mkdir gemini-playwright-demo && cd gemini-playwright-demo
npm init -y
npm install playwright axios doten

Create a .env file:

GEMINI_API_KEY=your_google_api_key_here

---

2. Script: Capture Page and Send to Gemini

const { chromium } = require('playwright');
const axios = require('axios');
require('dotenv').config();

async function run() {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('https://magento.softwaretestingboard.com/');
  const content = await page.content(); // Get full HTML

  await browser.close();

  const prompt = `Here is a webpage's HTML:\n\n${content}\n\nGive me a summary of what this page is about and suggest 3 functional UI test cases.`;

  const response = await axios.post(
    'https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=' + process.env.GEMINI_API_KEY,
    {
      contents: [
        {
          parts: [{ text: prompt }]
        }
      ]
    },
    {
      headers: {
        'Content-Type': 'application/json'
      }
    }
  );

  console.log('\n🤖 Gemini AI Output:\n');
  console.log(response.data.candidates[0].content.parts[0].text);
}

run();

---

Sample Output from Gemini

“This is an e-commerce homepage with categories like Men, Women, and Gear. The page features a promotional banner, search functionality, and shopping cart icons.

Suggested UI Test Cases:

1. Verify navigation links (e.g., Women → Tops) load correct pages.

2. Validate search bar returns products when keyword is entered.

3. Ensure 'Add to Cart' icon updates correctly when items are added.”

---

What Just Happened?

• We scraped a live page

• Sent its HTML to Gemini

• Got back AI-generated insights and test cases

Now imagine extending this to:

• Suggesting accessibility improvements

• Generating test data inputs

• Validating AI-generated locators for flaky elements

---

Tips and Considerations

• Limit the payload size. Gemini has token limits (~30K tokens).

• Use page.locator().evaluate() to extract only the visible DOM if needed.

• Don’t send credentials or sensitive data to Gemini.

---

What’s Next?

You can go further by:

• Building a CI plugin that uses Gemini to auto-generate test cases

• Creating a dashboard for Gemini's suggestions per page

• Comparing Gemini vs GPT vs Claude for test generation tasks

---

Final Thoughts

This is just the beginning. AI won’t write your entire test suite—but it can supercharge your productivity by reducing grunt work and improving test coverage ideas.

Thanks for reading TestOps. If you found this useful, follow for more tips on AI + Testing + DevOps.

“Automate smarter, not harder.”