Lesson: Automating DOM Structure Extraction and Test Generation using Playwright and Large Language Models (LLMs)

Objective:

In this lesson, you will learn how to:

  1. Extract the DOM structure of a webpage using Playwright.
  2. Generate automated test scripts from the extracted DOM structure using a Large Language Model (LLM) such as OpenAI’s GPT-4.
  3. Use the generated scripts to interact with elements like checkboxes on a webpage.

Prerequisites:

  • Basic understanding of Python programming.
  • Familiarity with Playwright for browser automation.
  • Access to OpenAI’s API (ChatGPT or GPT-4).

Step 1: Installing Dependencies

Make sure you have the required dependencies installed in your environment.

In your terminal or Google Colab environment or you set this up in python, but then you need to pass the output of your result to the input of your other script

pip install nest_asyncio playwright openai

Step 2: Extract DOM Structure using Playwright

This code demonstrates how to use Playwright to fetch the DOM structure of checkboxes on a webpage. We’ll extract the necessary HTML elements from the page to later generate automated test scripts.

import nest_asyncio
import asyncio
from playwright.async_api import async_playwright

# Apply the nest_asyncio patch to allow nested event loops
nest_asyncio.apply()

async def fetch_dom_structure():
    dom_structure = {}

    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        page = await browser.new_page()

        # Navigate to the website
        await page.goto("https://practiceautomatedtesting.com/webelements/Checkboxes")

        # Fetch all checkbox containers (div elements with class 'checkbox-container')
        checkbox_containers = await page.query_selector_all('.checkbox-container')

        # Check if any checkbox containers were found
        if checkbox_containers:
            # Extract the inner HTML of each checkbox container
            dom_structure['checkboxes'] = [await container.inner_html() for container in checkbox_containers]

        await browser.close()

    return dom_structure

# Run the asynchronous function directly
dom_structure = asyncio.run(fetch_dom_structure())

# Output the DOM structure including the checkboxes
print(dom_structure)

Step 3: Using a Large Language Model (LLM) to Generate a Playwright Test Script

Now that we have the DOM structure, we will use OpenAI’s GPT-4 to generate a Playwright script. The goal is to create a Python script that will check all checkboxes and validate their status.

import openai
import os

# Set your OpenAI API key
os.environ['OPENAI_API_KEY'] = 'your_api_key'
client = openai.OpenAI(api_key=os.getenv('OPENAI_API_KEY'))

# Function to generate Playwright test script using GPT-4
def generate_playwright_script(dom_structure):
    # Convert DOM structure to a string to use as input prompt
    dom_string = "\n".join(dom_structure['checkboxes'])
    
    # Prepare the prompt for GPT-4
    prompt = f"""
    Given the following DOM structure for checkboxes:
    {dom_string}
    
    Generate a Playwright script in Python that performs the following actions:
    1. Navigate to the web page https://practiceautomatedtesting.com/webelements/Checkboxes
    2. Check all checkboxes.
    3. Validate that each checkbox is checked after performing the action, using id or class as a selector.
    """
    
    # Send the request to GPT-4
    response = client.chat.completions.create(
        model="gpt-4",
        messages=[
            {"role": "system", "content": "You are a helpful assistant."},
            {"role": "user", "content": prompt}
        ]
    )

    return response.choices[0].message['content']

# Use the dom_structure from the Playwright extraction
generated_script = generate_playwright_script(dom_structure)

# Print the generated Playwright script
print(generated_script)

Explanation:

  • OpenAI GPT-4: Used to generate a Python script based on the extracted DOM.
  • Prompt Design: We ask GPT-4 to generate a Playwright script that navigates to the website, checks all checkboxes, and validates if they are checked.
  • Generated Script: GPT-4 returns a Playwright script that interacts with the webpage.

Step 4: Running the Generated Script

The output from GPT-4 will be a Playwright test script, which may look something like this:

from playwright.sync_api import sync_playwright

def run():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()

        # Navigate to the webpage
        page.goto("https://practiceautomatedtesting.com/webelements/Checkboxes")

        # Check all checkboxes
        checkboxes = page.query_selector_all('input[type="checkbox"]')
        for checkbox in checkboxes:
            checkbox.check()

        # Validate that all checkboxes are checked
        for checkbox in checkboxes:
            assert checkbox.is_checked(), "Checkbox is not checked"

        browser.close()

run()

## Important Note:
Please note that the last script will only work on a **Docker container** or directly on your **desktop**. The purpose of this example is to demonstrate how to generate a script from a **Large Language Model (LLM)** based on the **DOM**. You can easily tweak this script to generate **Playwright**, **Selenium**, or any other framework-specific script based on your needs.

Attached the google colab example: [Google Colab Project](https://colab.research.google.com/drive/1GmrjCeYXrN8jT1vVwbFogIzcM5EpWvpf?usp=sharing)
Happy investigating!