Frame Content Aggregator

A utility that extracts and aggregates data from nested iframe structures on a webpage. The tool should navigate through multiple levels of iframes and collect specific information from each frame.

Problem Description

Build a function that accepts a page URL and extracts content from all frames (including nested iframes) within that page. The function should return a structured dataset containing information from each frame.

Requirements

Your solution must:

1. Navigate to the provided URL
2. Identify the main frame and all child frames (including deeply nested frames)
3. Extract the following information from each frame:
   • Frame name or identifier
   • Frame URL
   • Page title within the frame
   • Whether the frame has any child frames
4. Handle frames that may load asynchronously
5. Return the data as a hierarchical structure that reflects the frame tree

Input

• url: String containing the target webpage URL
• outputPath: String path where results should be saved as JSON

Output

The output should be a JSON file with the following structure:

{
  "mainFrame": {
    "name": "main",
    "url": "https://example.com/page",
    "title": "Example Page",
    "hasChildren": true,
    "children": [
      {
        "name": "iframe1",
        "url": "https://example.com/frame1",
        "title": "Frame 1",
        "hasChildren": false,
        "children": []
      }
    ]
  }
}

Test Cases

• Given a page with a single iframe, the function returns data for both the main frame and the child frame @test
• Given a page with nested iframes (3 levels deep), the function returns a complete hierarchical structure with all frames @test
• Given a page with no iframes, the function returns only main frame data with an empty children array @test

Implementation

@generates

API

/**
 * Extracts and aggregates data from all frames in a webpage
 * @param {string} url - The URL of the webpage to analyze
 * @param {string} outputPath - Path where the JSON result should be saved
 * @returns {Promise<void>}
 */
async function aggregateFrameContent(url, outputPath) {
  // IMPLEMENTATION HERE
}

module.exports = { aggregateFrameContent };

Dependencies { .dependencies }

puppeteer-core { .dependency }

Provides browser automation capabilities for navigating pages and interacting with frames.