How to Generate Browser Test Automation Scripts Using Chrome DevTools Recorder and Generative AI

In the modern software development lifecycle, test automation has shifted from being a nice-to-have to a fundamental part of CI/CD pipelines. Writing reliable and maintainable automated tests—whether using Selenium or Playwright—requires not only a deep understanding of web technologies but also efficient tooling to bridge the gap between manual test scenarios and automated scripts.

One powerful yet underutilized method for accelerating this process involves leveraging Chrome DevTools' Recorder in conjunction with ChatGPT to rapidly generate high-fidelity automation scripts. This integrated approach enables QA engineers and developers to capture actual browser interactions and convert them into well-structured test automation code, saving hours of manual scripting and reducing the risk of locator errors or missed steps.

In this article, I will walk you through how to seamlessly integrate Chrome DevTools with ChatGPT to write accurate and production-grade Playwright or Selenium automation scripts, based on recorded browser interactions. This technique is especially useful when dealing with complex forms, authentication flows, or any scenario where manually identifying DOM elements is tedious and error-prone.

Understanding the Chrome DevTools Recorder

The Recorder panel in Chrome DevTools is designed to capture user flows as they interact with a web application. Introduced in Chrome 97 and continually improved, it provides a visual interface for recording actions such as clicks, text input, key presses, and navigations. Each interaction is stored in a structured JSON format, preserving metadata like element selectors (data-test, aria-label, XPath), timing offsets, and keystrokes.

To see this workflow in action, watch this video on YouTube, where we walk through the entire process of generating a test automation script using Chrome DevTools Recorder

This JSON format offers a detailed and deterministic view of the user’s journey, including the exact element paths used during interaction. While Chrome offers native options to export recordings into Puppeteer or Lighthouse flows, the real potential is unlocked when this data is handed off to an intelligent agent—ChatGPT—for transformation into the automation framework of your choice.

These features make the Recorder a perfect companion for generative AI tools, which can consume the structured JSON output and convert it into fully functioning automation code in frameworks like Playwright or Selenium.

By capturing the actual DOM selectors, event types, and timing data, Chrome DevTools Recorder provides a highly accurate blueprint of user behavior. When combined with generative AI models, this blueprint can be transformed into clean, structured, and production-ready test automation scripts—dramatically reducing the manual effort typically involved in writing such scripts from scratch.

Recording the Test Flow in Chrome

To begin, open your target web application in Chrome and press F12 to open DevTools. Navigate to the “Recorder” tab, which may need to be enabled via DevTools experiments in some versions.

Once inside the Recorder panel, click “Start recording” and begin interacting with your application as an end user would—fill out forms, click buttons, navigate between pages, and complete transactions. Every action is tracked in real-time. When you finish the test flow, click “Stop recording.”

You can now export the flow as a JSON file. This file contains a chronological list of interaction steps, complete with associated selectors, element hierarchy, and expected behaviors. It essentially serves as the raw material for an automation script—human-readable, structured, and ready for transformation.

Involving ChatGPT: Turning Interactions into Code

Once the JSON file is saved, the next step is to leverage ChatGPT to convert it into executable code. This process typically involves uploading the JSON file to ChatGPT or pasting its contents into a prompt with an instruction such as:

"Convert this Chrome Recorder JSON into a Selenium Java test script that logs in, adds an item to cart, and completes checkout."

ChatGPT will analyze the structure of the JSON, extract meaningful interactions, map selectors to automation-friendly syntax (like By.cssSelector or page.locator()), and generate a script in the target language and framework.

For Selenium, the script will include WebDriver initialization, wait strategies (if requested), interaction with fields and buttons, and assertions. For Playwright, it will typically include context setup, navigation, and interaction logic with the page object, reflecting the same steps captured in Chrome.

Because the JSON contains detailed selectors and values, ChatGPT is able to use reliable locators—data-test, aria-label, and descriptive XPath expressions—directly from the flow, thus minimizing test fragility caused by dynamic class names or unstable DOM structures.

Refining the Generated Script

While AI-generated automation scripts from tools like ChatGPT or other generative platforms are often executable with minimal intervention, a raw script alone is rarely sufficient for enterprise-grade testing. To ensure long-term maintainability, reliability, and alignment with team standards, it is essential that QA engineers review, refactor, and enhance these scripts before integrating them into test suites or CI/CD pipelines.

Here is a breakdown of key refinement areas, with detailed guidance for each.

Replace Static Waits with Explicit Waits

Problem:
AI-generated scripts often use static delays such as Thread.sleep(2000) or page.waitForTimeout(3000) to handle asynchronous loading. This is a major anti-pattern in test automation because it introduces unnecessary delays and causes flakiness, especially in slow or variable environments.

Solution:
Replace static waits with explicit waits that wait only as long as necessary for a specific condition to be met.

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("checkout-button")));

await page.locator('#checkout-button').waitFor({ state: 'visible' });

Why it matters:
Explicit waits improve script efficiency, reduce false negatives, and make tests more resilient to real-world conditions.

Add Assertions to Validate Expected Behaviors

Problem:
Generated scripts usually focus on performing actions (e.g., clicking buttons, entering data) but often lack validations to ensure that the outcome of those actions is as expected.

Solution:
Incorporate assertions after critical steps to verify application state, such as URL changes, UI updates, text visibility, or data correctness.

assertEquals("Thank you for your order!", driver.findElement(By.className("complete-header")).getText());

await expect(page.locator('.complete-header')).toHaveText('Thank you for your order!');

Why it matters:
Assertions transform your script from a passive flow into a true test case by verifying that business requirements are met.

Abstract Repeated Actions into Reusable Methods or Page Object Classes

Problem:
Generated code often duplicates common operations—such as login sequences, adding products to the cart, or checking out—leading to code redundancy and poor maintainability.

Solution:
Apply the Page Object Model (POM) or custom helper functions to encapsulate and reuse logic across multiple test cases.

public class LoginPage {
    WebDriver driver;

    public LoginPage(WebDriver driver) {
        this.driver = driver;
    }

    public void login(String username, String password) {
        driver.findElement(By.id("user-name")).sendKeys(username);
        driver.findElement(By.id("password")).sendKeys(password);
        driver.findElement(By.id("login-button")).click();
    }
}

Why it matters:
Abstraction reduces duplication, simplifies test maintenance, and enhances test scalability in large test suites.

Parameterize Inputs for Data-Driven Testing

Problem:
Scripts generated from a fixed recording often contain hardcoded values (e.g., usernames, product names), which limit test reusability and flexibility.

Solution:
Use data-driven testing patterns to feed dynamic values into the test, either from CSV, Excel, JSON, or test frameworks like JUnit/TestNG (Selenium) or Playwright’s test configuration files.

@DataProvider(name = "loginData")
public Object[][] getData() {
    return new Object[][] { { "standard_user", "secret_sauce" }, { "locked_out_user", "secret_sauce" } };
}

@Test(dataProvider = "loginData")
public void testLogin(String username, String password) {
    loginPage.login(username, password);
    // Add assertions
}

test.describe.configure({ mode: 'parallel' });

test('Login with different users', async ({ page }) => {
  const credentials = [{ user: 'standard_user', pass: 'secret_sauce' }];
  for (const cred of credentials) {
    await page.goto('https://www.saucedemo.com/');
    await page.fill('#user-name', cred.user);
    await page.fill('#password', cred.pass);
    await page.click('#login-button');
    // Assertions here
  }
});

Integrate the Script into a Test Runner Framework

Problem:
Even well-written scripts are of limited use if they are not integrated into a test execution framework. Raw scripts lack reporting, setup/teardown hooks, and test grouping.

Solution:
Integrate the script into a proper test runner:

• Use JUnit or TestNG for Java-based Selenium tests.

• Use Playwright Test for JavaScript/TypeScript tests.

• Add configuration files (testng.xml, playwright.config.ts) for parallel execution, environment setup, and reporter integration.

Bonus Enhancements:

• Add HTML or Allure reports for test result visualization.

• Use CI tools like GitHub Actions, Jenkins, or Azure DevOps to automate test execution after every commit or build.

Why it matters:
Framework integration allows your scripts to become part of a sustainable and automated quality strategy—enabling regression testing, alerting, and test trend analysis.

Real-World Application: From Demo to Production

Consider a scenario where a QA engineer needs to automate the end-to-end checkout flow of an e-commerce application. Traditionally, this would involve inspecting each page, writing locators manually, and scripting the sequence of actions. Using this integrated approach, the engineer simply records the flow in Chrome—navigating through login, product selection, cart review, and checkout—and hands off the JSON to ChatGPT for conversion.

The result is a complete automation script that mimics the real user experience with precision, generated in minutes rather than hours.

This workflow is particularly effective in agile environments where requirements change frequently and test coverage must evolve rapidly. By capturing real user interactions and turning them into code, QA teams can adapt faster, reduce manual effort, and improve test reliability.

---

Automating the E-commerce Checkout Flow

The QA team is responsible for validating the checkout process of an e-commerce web application. The test case involves:

1. Logging into the platform.

2. Selecting a product from the catalog.

3. Adding it to the shopping cart.

4. Proceeding to checkout.

5. Entering payment and shipping information.

6. Confirming the order and validating the success message.

Traditionally, building this flow manually would require:

• Inspecting dozens of HTML elements.

• Writing complex selectors.

• Managing asynchronous behavior with waits.

• Implementing assertions and reusable methods.

• Testing and debugging each step iteratively.

Using the Recorder + AI workflow, the process becomes streamlined and user-driven.

Step 1: Record the Flow with Chrome DevTools Recorder

Chrome DevTools Recorder allows QA engineers to record real interactions with the web application—capturing user behavior as a sequence of DOM events and metadata.

Instructions:

1. Open Chrome and navigate to your e-commerce test environment.

2. Open DevTools (Right-click → Inspect or press F12) and switch to the Recorder tab.

3. Click "Start new recording" and name it (e.g., CheckoutFlow).

4. Perform the following actions in the browser:

   • Enter login credentials and click Login.

   • Browse products and click Add to Cart on one.

   • Go to the cart and click Checkout.

   • Enter dummy address and payment details.

   • Click Place Order and wait for the confirmation screen.

5. Once finished, return to the Recorder and click "Stop".

6. Click the three-dot menu (⋮) next to your recording and choose Export as JSON.

7. Save the .json file—this file contains all recorded steps, selectors, and timings.

Result: You now have a structured, machine-readable file representing the exact user flow.

Step 2: Convert the Recording into Automation Code Using Generative AI

With the JSON export ready, the next step is to transform the recorded flow into executable test automation code. This is where Generative AI like ChatGPT comes into play.

Instructions:

1. Open ChatGPT (or another LLM-powered assistant).

2. Upload the exported JSON recording.

3. Provide a clear instruction prompt such as:

“Convert this Chrome DevTools Recorder JSON into a Playwright/Selenium test script in JavaScript/Java. Include proper waits and basic assertions.”

4. The AI will parse the JSON and generate code that reproduces the entire user flow, using selectors and timing information from the recording.

5. Review the output. Optionally, ask ChatGPT to:

   • Replace static waits with waitForSelector or WebDriverWait.

   • Add assertions to verify cart contents or order confirmation.

   • Wrap steps into reusable methods or page objects.

Result: A ready-to-run script that replicates the entire checkout process, complete with selectors and actions pulled directly from real browser usage.

Step 3: Validate and Refine the Script

Although the AI-generated script is functional, a senior QA engineer should still review and refine it to align with the team’s test architecture. This includes:

• Verifying selectors and modifying them if they are too brittle (e.g., based on text content or dynamic class names).

• Adding assertions to validate critical checkpoints, such as:

  • Ensuring the user lands on the homepage after login.

  • Checking that the cart count updates correctly.

  • Confirming that a success message appears after checkout.

• Parameterizing login credentials and product selections to support data-driven tests.

• Encapsulating steps into reusable classes using the Page Object Model (POM).

• Integrating the script into a test runner like JUnit, TestNG, or Playwright Test.

• Running in CI/CD environments using GitHub Actions, Jenkins, or CircleCI.

Result: A clean, modular, and robust automation script that is CI-ready and production-grade.

Conclusion

Integrating Chrome DevTools Recorder with ChatGPT represents a powerful paradigm shift in how test automation scripts are authored. It bridges the gap between manual testing intuition and automation efficiency, making test creation more accessible, faster, and grounded in real usage scenarios.

This approach not only saves time but also empowers teams to maintain higher quality standards across rapidly evolving applications. As AI continues to evolve, workflows like this will become essential tools in the modern QA toolkit—allowing us to focus more on strategy, architecture, and resilience, and less on the mechanics of boilerplate scripting.