import type { BenchmarkCommand, Scenario } from "./scenarios.js"; function generateArticlePage(): string { const paragraphs = Array.from({ length: 30 }, (_, index) => { const words = Array.from( { length: 40 + (index % 5) * 10 }, (_, wordIndex) => [ "the", "quick", "browser", "engine", "renders", "content", "across", "multiple", "layout", "passes", "while", "handling", "style", "recalculations", "and", "DOM", "mutations", ][wordIndex % 17], ).join(" "); return `

${words}

`; }); const comments = Array.from( { length: 40 }, (_, index) => `
` + `
User ${index}
` + `

This is comment number ${index + 1} with some discussion text.

` + '
' + "
", ); const sidebar = Array.from( { length: 20 }, (_, index) => `
  • Related Article ${index + 1}: A Longer Title Here
    • `, ); return [ "Benchmark Article", "", ``, '
    ', "

    Understanding Modern Browser Engine Architecture

    ", '
    Dr. Smith | | 15 min read
    ', `
    ${Array.from({ length: 6 }, (_, index) => `tag-${index + 1}`).join("")}
    `, "

    Introduction

    ", ...paragraphs.slice(0, 5), "

    Core Concepts

    ", ...paragraphs.slice(5, 12), '
    "Performance is not just about speed, it is about efficiency." - Anonymous
    ', "

    Implementation Details

    ", ...paragraphs.slice(12, 20), "

    Subsection A

    ", ...paragraphs.slice(20, 25), "

    Subsection B

    ", ...paragraphs.slice(25), "

    Comments

    ", '
    ', ...comments, "
    ", '
    ', "

    Related Articles

    ", ``, "

    Archives

    ", ``, "
    ", "", ].join(""); } function generateDataTablePage(): string { const headerCells = ["ID", "Name", "Email", "Department", "Role", "Status", "Joined", "Last Active"]; const header = `${headerCells.map((cell) => `${cell}`).join("")}`; const rows = Array.from({ length: 200 }, (_, index) => { const department = ["Engineering", "Design", "Marketing", "Sales", "Support"][index % 5]; const role = ["Admin", "Manager", "Member", "Viewer"][index % 4]; const status = ["Active", "Inactive", "Pending"][index % 3]; return ( `` + `${index + 1}` + `User ${index + 1}` + `user${index + 1}@example.com` + `${department}` + `${role}` + `${status}` + `2024-${String((index % 12) + 1).padStart(2, "0")}-${String((index % 28) + 1).padStart(2, "0")}` + `${index % 3 === 0 ? "Today" : index % 3 === 1 ? "Yesterday" : "Last week"}` + "" ); }); return [ "Benchmark Table", "", "

    User Management Dashboard

    ", '
    ', '', '', '', '', 'Showing 200 users', "
    ", `${header}${rows.join("")}
    `, '", "", ].join(""); } function generateNestedPage(): string { function nest(depth: number, breadth: number, prefix: string): string { if (depth === 0) { return `Leaf node at ${prefix}`; } const children = Array.from( { length: breadth }, (_, index) => `
    ` + `
    Section ${prefix}.${index + 1} (depth ${depth})
    ` + `
    ${nest(depth - 1, Math.max(2, breadth - 1), `${prefix}.${index + 1}`)}
    ` + "
    ", ); return children.join(""); } return [ "Benchmark Nested", "", "

    Deeply Nested Document Structure

    ", nest(7, 3, "root"), "", ].join(""); } function generateDashboardPage(): string { const cards = Array.from( { length: 12 }, (_, index) => `
    ` + `
    Metric ${index + 1}
    ` + `
    ${Math.floor(Math.random() * 10000)}
    ` + `
    ${index % 2 === 0 ? "+" : "-"}${(Math.random() * 20).toFixed(1)}%
    ` + "
    ", ); const chartBars = Array.from({ length: 24 }, (_, index) => { const height = 20 + ((index * 7 + 13) % 80); return `
    ${String(index).padStart(2, "0")}:00
    `; }); const logRows = Array.from({ length: 100 }, (_, index) => { const level = ["INFO", "WARN", "ERROR", "DEBUG"][index % 4]; return ( `` + `${new Date(2025, 0, 1, index % 24, index % 60).toISOString()}` + `${level}` + `Service ${["auth", "api", "worker", "cache", "db"][index % 5]}` + `Log message number ${index + 1}: operation completed in ${(Math.random() * 1000).toFixed(0)}ms` + "" ); }); return [ "Benchmark Dashboard", "", '

    Operations Dashboard

    ', `
    ${cards.join("")}
    `, '
    Hourly
    Daily
    Weekly
    ', `

    Request Volume

    ${chartBars.join("")}
    `, '
    ', "

    Recent Logs

    ", `${logRows.join("")}
    TimestampLevelServiceMessage
    `, "
    ", "", ].join(""); } const ARTICLE_HTML = generateArticlePage(); const TABLE_HTML = generateDataTablePage(); const NESTED_HTML = generateNestedPage(); const DASHBOARD_HTML = generateDashboardPage(); function injectCmd(id: string, html: string): BenchmarkCommand { return { action: "evaluate", id, script: `document.open(); document.write(${JSON.stringify(html)}); document.close(); 'ok'`, }; } function setupPage(html: string, tag: string): BenchmarkCommand[] { return [ { action: "navigate", id: `${tag}-nav`, url: "about:blank", waitUntil: "domcontentloaded" }, injectCmd(`${tag}-inject`, html), ]; } export const engineScenarios: Scenario[] = [ { commands: [{ action: "snapshot", id: "snap" }], description: "Snapshot a realistic article page (~800 DOM nodes, 30 paragraphs, 40 comments)", name: "article-snapshot", setup: setupPage(ARTICLE_HTML, "art"), }, { commands: [{ action: "snapshot", id: "snap" }], description: "Snapshot a data table with 200 rows and 8 columns", name: "table-snapshot", setup: setupPage(TABLE_HTML, "tbl"), }, { commands: [{ action: "snapshot", id: "snap" }], description: "Snapshot a deeply nested DOM tree (7 levels, ~3000 nodes)", name: "nested-snapshot", setup: setupPage(NESTED_HTML, "nest"), }, { commands: [{ action: "snapshot", id: "snap" }], description: "Snapshot an operations dashboard with cards, chart, and 100 log rows", name: "dashboard-snap", setup: setupPage(DASHBOARD_HTML, "dash"), }, { commands: [injectCmd("ai-write", ARTICLE_HTML)], description: "Write a full article page into the DOM (measures parse + layout)", name: "article-inject", setup: [{ action: "navigate", id: "ai-nav", url: "about:blank", waitUntil: "domcontentloaded" }], }, { commands: [ { action: "evaluate", id: "query", script: "document.querySelectorAll('tr[data-row]').length + ' rows, ' + document.querySelectorAll('td').length + ' cells'", }, ], description: "Evaluate a querySelectorAll across a large table", name: "table-query", setup: setupPage(TABLE_HTML, "tq"), }, { commands: [ { action: "snapshot", id: "dw-snap" }, { action: "fill", id: "dw-fill", selector: "#dash-search", value: "error logs" }, { action: "click", id: "dw-click", selector: "#refresh" }, { action: "evaluate", id: "dw-eval", script: "document.querySelectorAll('.card').length + ' cards'" }, { action: "screenshot", id: "dw-ss" }, ], description: "Full agent workflow on complex dashboard: snapshot, click, fill, eval, screenshot", name: "dashboard-workflow", setup: setupPage(DASHBOARD_HTML, "dw"), }, { commands: [ { action: "evaluate", id: "walk", script: "(function(){let c=0;const w=n=>{c++;for(const ch of n.children)w(ch);};w(document.body);return c+' nodes';})()", }, ], description: "Recursive DOM traversal via evaluate on deeply nested tree", name: "nested-eval", setup: setupPage(NESTED_HTML, "ne"), }, ];