From 6b5158d17967765922687a6ccbe241daab1393f3 Mon Sep 17 00:00:00 2001
From: Vishnu Vardhan <vishnu.p@browserstack.com>
Date: Tue, 13 Jan 2026 20:21:33 +0530
Subject: [PATCH 1/5] Network logs feature

---
 packages/app/src/components/workbench.ts      |  18 +-
 .../app/src/components/workbench/network.ts   | 572 ++++++++++++++++++
 packages/app/src/controller/DataManager.ts    |  19 +
 packages/script/src/collector.ts              |   4 +
 .../script/src/collectors/networkRequests.ts  | 320 ++++++++++
 packages/script/types.d.ts                    |   2 +
 packages/service/src/index.ts                 |  27 +
 packages/service/src/session.ts               | 114 +++-
 packages/service/src/types.ts                 |   1 +
 packages/service/tests/index.test.ts          |   4 +-
 10 files changed, 1072 insertions(+), 9 deletions(-)
 create mode 100644 packages/app/src/components/workbench/network.ts
 create mode 100644 packages/script/src/collectors/networkRequests.ts

diff --git a/packages/app/src/components/workbench.ts b/packages/app/src/components/workbench.ts
index afbd6b4..a3868d5 100644
--- a/packages/app/src/components/workbench.ts
+++ b/packages/app/src/components/workbench.ts
@@ -4,7 +4,7 @@ import { customElement, query, state } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
 import { DragController, Direction } from '../utils/DragController.js'
-import { consoleLogContext } from '../controller/DataManager.js'
+import { consoleLogContext, networkRequestContext } from '../controller/DataManager.js'
 
 import '~icons/mdi/arrow-collapse-down.js'
 import '~icons/mdi/arrow-collapse-up.js'
@@ -17,6 +17,7 @@ import './workbench/actions.js'
 import './workbench/logs.js'
 import './workbench/console.js'
 import './workbench/metadata.js'
+import './workbench/network.js'
 import './browser/snapshot.js'
 
 const MIN_WORKBENCH_HEIGHT = Math.min(300, window.innerHeight * 0.3)
@@ -34,6 +35,10 @@ export class DevtoolsWorkbench extends Element {
   @state()
   consoleLogs: ConsoleLogs[] | undefined = undefined
 
+  @consume({ context: networkRequestContext, subscribe: true })
+  @state()
+  networkRequests: NetworkRequest[] | undefined = undefined
+
   static styles = [
     ...Element.styles,
     css`
@@ -200,12 +205,11 @@ export class DevtoolsWorkbench extends Element {
             id="console-logs-tab"
           ></wdio-devtools-console-logs>
         </wdio-devtools-tab>
-        <wdio-devtools-tab label="Network">
-          <section
-            class="flex items-center justify-center text-sm w-full h-full"
-          >
-            Network tab not yet implemented!
-          </section>
+        <wdio-devtools-tab
+          label="Network"
+          .badge="${this.networkRequests?.length || 0}"
+        >
+          <wdio-devtools-network></wdio-devtools-network>
         </wdio-devtools-tab>
         <nav class="ml-auto" slot="actions">
           <button
diff --git a/packages/app/src/components/workbench/network.ts b/packages/app/src/components/workbench/network.ts
new file mode 100644
index 0000000..7175636
--- /dev/null
+++ b/packages/app/src/components/workbench/network.ts
@@ -0,0 +1,572 @@
+import { Element } from '@core/element'
+import { html, css, nothing } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import { consume } from '@lit/context'
+import { networkRequestContext } from '../../controller/DataManager.js'
+
+import '../placeholder.js'
+
+const COMPONENT = 'wdio-devtools-network'
+
+function formatBytes(bytes?: number): string {
+  if (!bytes || bytes === 0) return '-'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  const size = bytes / Math.pow(k, i)
+  return size >= 10 ? `${size.toFixed(0)}${sizes[i]}` : `${size.toFixed(1)}${sizes[i]}`
+}
+
+function formatTime(ms?: number): string {
+  if (!ms) return '-'
+  if (ms < 1) return `${(ms * 1000).toFixed(0)}μs`
+  if (ms < 1000) return `${ms.toFixed(0)}ms`
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+function getStatusClass(status?: number): string {
+  if (!status) return 'text-gray-500'
+  if (status >= 200 && status < 300) return 'text-green-500'
+  if (status >= 300 && status < 400) return 'text-yellow-500'
+  if (status >= 400) return 'text-red-500'
+  return 'text-gray-500'
+}
+
+function getResourceType(request: NetworkRequest): string {
+  const url = request.url.toLowerCase()
+  const contentType = request.responseHeaders?.['content-type']?.toLowerCase() || ''
+
+  // Check by content-type first
+  if (contentType.includes('text/html')) return 'HTML'
+  if (contentType.includes('text/css')) return 'CSS'
+  if (contentType.includes('javascript') || contentType.includes('ecmascript')) return 'JS'
+  if (contentType.includes('image/')) return 'Image'
+  if (contentType.includes('font/') || contentType.includes('woff')) return 'Font'
+  if (contentType.includes('application/json')) return 'Fetch'
+
+  // Fallback to URL extension
+  if (url.endsWith('.html') || url.endsWith('.htm')) return 'HTML'
+  if (url.endsWith('.css')) return 'CSS'
+  if (url.endsWith('.js') || url.endsWith('.mjs')) return 'JS'
+  if (url.match(/\.(png|jpg|jpeg|gif|svg|webp|ico)$/)) return 'Image'
+  if (url.match(/\.(woff|woff2|ttf|eot|otf)$/)) return 'Font'
+
+  // Check by request type
+  if (request.type === 'fetch' || request.method !== 'GET') return 'Fetch'
+
+  return 'Other'
+}
+
+function getFileName(url: string): string {
+  if (!url || url === '' || url === 'event') {
+    return '-'
+  }
+
+  try {
+    const urlObj = new URL(url)
+    const pathname = urlObj.pathname
+    const parts = pathname.split('/').filter(Boolean)
+    const fileName = parts[parts.length - 1]
+
+    // If there's a query string and no filename, show the host + path
+    if (!fileName || fileName === '' || pathname === '/') {
+      if (urlObj.search) {
+        return `${urlObj.hostname}${pathname.length > 1 ? pathname : ''}`
+      }
+      return urlObj.hostname
+    }
+
+    return fileName
+  } catch {
+    // If URL parsing fails, return a cleaned version
+    return url.slice(0, 50)
+  }
+}
+
+@customElement(COMPONENT)
+export class DevtoolsNetwork extends Element {
+  @consume({ context: networkRequestContext, subscribe: true })
+  @state()
+  networkRequests: NetworkRequest[] = []
+
+  @state()
+  selectedRequest?: NetworkRequest
+
+  @state()
+  filterType: string = 'All'
+
+  @state()
+  searchQuery: string = ''
+
+  connectedCallback() {
+    super.connectedCallback()
+    // Watch for visibility changes via active attribute
+    const parentTab = this.closest('wdio-devtools-tab')
+    if (parentTab) {
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'active') {
+            // Tab became inactive, clear selection
+            if (!parentTab.hasAttribute('active')) {
+              this.selectedRequest = undefined
+            }
+          }
+        })
+      })
+      observer.observe(parentTab, { attributes: true })
+      // Store observer to disconnect later
+      ;(this as any)._tabObserver = observer
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    // Clean up observer
+    if ((this as any)._tabObserver) {
+      ;(this as any)._tabObserver.disconnect()
+    }
+  }
+
+  static styles = [
+    ...Element.styles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+        color: var(--vscode-foreground);
+        background-color: var(--vscode-editor-background);
+      }
+
+      .network-header {
+        padding: 0.5rem 1rem;
+        border-bottom: 1px solid var(--vscode-panel-border);
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .search-input {
+        padding: 0.375rem 0.75rem;
+        border: 1px solid var(--vscode-panel-border);
+        background: var(--vscode-input-background);
+        color: var(--vscode-input-foreground);
+        border-radius: 4px;
+        font-size: 0.875rem;
+        min-width: 200px;
+      }
+
+      .search-input:focus {
+        outline: none;
+        border-color: var(--vscode-focusBorder);
+      }
+
+      .filter-tabs {
+        display: flex;
+        gap: 0.25rem;
+        margin-left: 1rem;
+      }
+
+      .filter-tab {
+        padding: 0.375rem 0.75rem;
+        border: none;
+        background: transparent;
+        color: var(--vscode-foreground);
+        cursor: pointer;
+        font-size: 0.875rem;
+        transition: all 0.15s;
+        border-bottom: 2px solid transparent;
+      }
+
+      .filter-tab:hover {
+        background: var(--vscode-toolbar-hoverBackground);
+      }
+
+      .filter-tab.active {
+        color: var(--vscode-textLink-activeForeground);
+        border-bottom-color: var(--vscode-textLink-activeForeground);
+      }
+
+      .network-content {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .requests-list {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: auto;
+        border-right: 1px solid var(--vscode-panel-border);
+        min-width: 0;
+      }
+
+      .requests-header {
+        display: grid;
+        grid-template-columns: 200px 80px 70px 180px 90px 80px 90px;
+        min-width: 790px;
+        border-bottom: 1px solid var(--vscode-panel-border);
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: var(--vscode-descriptionForeground);
+        position: sticky;
+        top: 0;
+        background: var(--vscode-editor-background);
+        z-index: 1;
+      }
+
+      .requests-header > div {
+        padding: 0.5rem;
+        border-right: 1px solid var(--vscode-panel-border);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .requests-header > div:last-child {
+        border-right: none;
+      }
+
+      .request-row {
+        display: grid;
+        grid-template-columns: 200px 80px 70px 180px 90px 80px 90px;
+        min-width: 790px;
+        border-bottom: 1px solid var(--vscode-panel-border);
+        cursor: pointer;
+        font-size: 0.875rem;
+        transition: background 0.15s;
+        align-items: center;
+      }
+
+      .request-row > span {
+        padding: 0.5rem;
+        border-right: 1px solid var(--vscode-panel-border);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .request-row > span:last-child {
+        border-right: none;
+      }
+
+      .request-row:hover {
+        background: var(--vscode-list-hoverBackground);
+      }
+
+      .request-row.selected {
+        background: var(--vscode-list-activeSelectionBackground);
+        color: var(--vscode-list-activeSelectionForeground);
+      }
+
+      .request-row.error {
+        color: var(--vscode-errorForeground);
+      }
+
+      .request-detail {
+        flex: 1;
+        overflow-y: auto;
+        padding: 1rem;
+        min-width: 400px;
+      }
+
+      .detail-section {
+        margin-bottom: 1.5rem;
+      }
+
+      .detail-title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        color: var(--vscode-foreground);
+      }
+
+      .detail-content {
+        background: var(--vscode-editor-background);
+        padding: 0.75rem;
+        border-radius: 4px;
+        border: 1px solid var(--vscode-panel-border);
+        font-family: monospace;
+        font-size: 0.75rem;
+        overflow-x: auto;
+      }
+
+      .header-row {
+        display: flex;
+        gap: 1rem;
+        padding: 0.25rem 0;
+        border-bottom: 1px solid var(--vscode-panel-border);
+      }
+
+      .header-key {
+        font-weight: 600;
+        color: var(--vscode-symbolIcon-keyForeground);
+        flex-shrink: 0;
+        min-width: 80px;
+      }
+
+      .header-value {
+        color: var(--vscode-symbolIcon-stringForeground);
+        word-break: break-word;
+        flex: 1;
+        text-align: right;
+      }
+
+      .truncate {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .text-muted {
+        color: var(--vscode-descriptionForeground);
+      }
+    `
+  ]
+
+  #filterRequests(): NetworkRequest[] {
+    let filtered = this.networkRequests
+
+    // Filter by resource type
+    if (this.filterType !== 'All') {
+      filtered = filtered.filter((req) => getResourceType(req) === this.filterType)
+    }
+
+    // Filter by search query
+    if (this.searchQuery) {
+      const query = this.searchQuery.toLowerCase()
+      filtered = filtered.filter(
+        (req) =>
+          req.url.toLowerCase().includes(query) ||
+          req.method.toLowerCase().includes(query) ||
+          req.status?.toString().includes(query) ||
+          getFileName(req.url).toLowerCase().includes(query)
+      )
+    }
+
+    return filtered
+  }
+
+  #selectRequest(request: NetworkRequest) {
+    this.selectedRequest = request
+  }
+
+  render() {
+    const filteredRequests = this.#filterRequests()
+    const resourceTypes = ['All', 'Fetch', 'HTML', 'JS', 'CSS', 'Font', 'Image']
+
+    if (!this.networkRequests || this.networkRequests.length === 0) {
+      return html`
+        <wdio-devtools-placeholder
+          icon="network"
+          title="No network requests captured"
+          description="Network requests will appear here as your tests run"
+        ></wdio-devtools-placeholder>
+      `
+    }
+
+    return html`
+      <div class="network-header">
+        <input
+          type="text"
+          class="search-input"
+          placeholder="Filter network"
+          .value="${this.searchQuery}"
+          @input="${(e: InputEvent) =>
+            (this.searchQuery = (e.target as HTMLInputElement).value)}"
+        />
+        <div class="filter-tabs">
+          ${resourceTypes.map(
+            (type) => html`
+              <button
+                class="filter-tab ${this.filterType === type ? 'active' : ''}"
+                @click="${() => (this.filterType = type)}"
+              >
+                ${type}
+              </button>
+            `
+          )}
+        </div>
+      </div>
+      <div class="network-content">
+        <div class="requests-list">
+          <div class="requests-header">
+            <div>Name</div>
+            <div>Method</div>
+            <div>Status</div>
+            <div>Content Type</div>
+            <div>Duration</div>
+            <div>Size</div>
+            <div>Start</div>
+          </div>
+          ${filteredRequests.length === 0
+            ? html`
+                <div class="p-4 text-center text-sm text-muted">
+                  No requests match your filter
+                </div>
+              `
+            : filteredRequests.map(
+                (request) => html`
+                  <div
+                    class="request-row ${this.selectedRequest?.id === request.id
+                      ? 'selected'
+                      : ''} ${request.error ? 'error' : ''}"
+                    @click="${() => this.#selectRequest(request)}"
+                  >
+                    <span class="truncate" title="${request.url}"
+                      >${getFileName(request.url)}</span
+                    >
+                    <span>${request.method}</span>
+                    <span class="${getStatusClass(request.status)}"
+                      >${request.status || (request.error ? 'ERR' : '-')}</span
+                    >
+                    <span class="truncate text-muted"
+                      >${request.responseHeaders?.['content-type']?.split(';')[0] || '-'}</span
+                    >
+                    <span>${formatTime(request.time)}</span>
+                    <span>${formatBytes(request.size)}</span>
+                    <span class="text-muted"
+                      >${request.startTime ? `${request.startTime.toFixed(1)}s` : '-'}</span
+                    >
+                  </div>
+                `
+              )}
+        </div>
+        ${this.selectedRequest ? this.#renderRequestDetail() : nothing}
+      </div>
+    `
+  }
+
+  #renderRequestDetail() {
+    const req = this.selectedRequest!
+
+    return html`
+      <div class="request-detail">
+        <div class="detail-section">
+          <div class="detail-title">General</div>
+          <div class="detail-content">
+            <div class="header-row">
+              <span class="header-key">URL:</span>
+              <span class="header-value">${req.url}</span>
+            </div>
+            <div class="header-row">
+              <span class="header-key">Method:</span>
+              <span class="header-value">${req.method}</span>
+            </div>
+            <div class="header-row">
+              <span class="header-key">Status:</span>
+              <span class="header-value ${getStatusClass(req.status)}"
+                >${req.status || '-'} ${req.statusText || ''}</span
+              >
+            </div>
+            <div class="header-row">
+              <span class="header-key">Type:</span>
+              <span class="header-value">${req.type}</span>
+            </div>
+            ${req.time
+              ? html`
+                  <div class="header-row">
+                    <span class="header-key">Time:</span>
+                    <span class="header-value">${formatTime(req.time)}</span>
+                  </div>
+                `
+              : nothing}
+            ${req.size
+              ? html`
+                  <div class="header-row">
+                    <span class="header-key">Size:</span>
+                    <span class="header-value">${formatBytes(req.size)}</span>
+                  </div>
+                `
+              : nothing}
+            ${req.error
+              ? html`
+                  <div class="header-row">
+                    <span class="header-key">Error:</span>
+                    <span class="header-value text-red-500"
+                      >${req.error}</span
+                    >
+                  </div>
+                `
+              : nothing}
+          </div>
+        </div>
+
+        ${req.requestHeaders &&
+        Object.keys(req.requestHeaders).length > 0
+          ? html`
+              <div class="detail-section">
+                <div class="detail-title">Request Headers</div>
+                <div class="detail-content">
+                  ${Object.entries(req.requestHeaders).map(
+                    ([key, value]) => html`
+                      <div class="header-row">
+                        <span class="header-key">${key}:</span>
+                        <span class="header-value">${value}</span>
+                      </div>
+                    `
+                  )}
+                </div>
+              </div>
+            `
+          : nothing}
+        ${req.requestBody
+          ? html`
+              <div class="detail-section">
+                <div class="detail-title">Request Body</div>
+                <div class="detail-content">
+                  <pre>${this.#formatBody(req.requestBody)}</pre>
+                </div>
+              </div>
+            `
+          : nothing}
+        ${req.responseHeaders &&
+        Object.keys(req.responseHeaders).length > 0
+          ? html`
+              <div class="detail-section">
+                <div class="detail-title">Response Headers</div>
+                <div class="detail-content">
+                  ${Object.entries(req.responseHeaders).map(
+                    ([key, value]) => html`
+                      <div class="header-row">
+                        <span class="header-key">${key}:</span>
+                        <span class="header-value">${value}</span>
+                      </div>
+                    `
+                  )}
+                </div>
+              </div>
+            `
+          : nothing}
+        ${req.responseBody
+          ? html`
+              <div class="detail-section">
+                <div class="detail-title">Response Body</div>
+                <div class="detail-content">
+                  <pre>${this.#formatBody(req.responseBody)}</pre>
+                </div>
+              </div>
+            `
+          : nothing}
+      </div>
+    `
+  }
+
+  #formatBody(body: string): string {
+    try {
+      const parsed = JSON.parse(body)
+      return JSON.stringify(parsed, null, 2)
+    } catch {
+      return body
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [COMPONENT]: DevtoolsNetwork
+  }
+}
diff --git a/packages/app/src/controller/DataManager.ts b/packages/app/src/controller/DataManager.ts
index bbe469f..51b487d 100644
--- a/packages/app/src/controller/DataManager.ts
+++ b/packages/app/src/controller/DataManager.ts
@@ -27,6 +27,9 @@ export const logContext = createContext<string[]>(Symbol('logContext'))
 export const consoleLogContext = createContext<ConsoleLogs[]>(
   Symbol('consoleLogContext')
 )
+export const networkRequestContext = createContext<NetworkRequest[]>(
+  Symbol('networkRequestContext')
+)
 export const metadataContext = createContext<Metadata>(
   Symbol('metadataContext')
 )
@@ -60,6 +63,7 @@ export class DataManagerController implements ReactiveController {
   mutationsContextProvider: ContextProvider<typeof mutationContext>
   logsContextProvider: ContextProvider<typeof logContext>
   consoleLogsContextProvider: ContextProvider<typeof consoleLogContext>
+  networkRequestsContextProvider: ContextProvider<typeof networkRequestContext>
   metadataContextProvider: ContextProvider<typeof metadataContext>
   commandsContextProvider: ContextProvider<typeof commandContext>
   sourcesContextProvider: ContextProvider<typeof sourceContext>
@@ -80,6 +84,10 @@ export class DataManagerController implements ReactiveController {
       context: consoleLogContext,
       initialValue: []
     })
+    this.networkRequestsContextProvider = new ContextProvider(this.#host, {
+      context: networkRequestContext,
+      initialValue: []
+    })
     this.metadataContextProvider = new ContextProvider(this.#host, {
       context: metadataContext
     })
@@ -279,6 +287,8 @@ export class DataManagerController implements ReactiveController {
         this.#handleMetadataUpdate(data as Metadata)
       } else if (scope === 'consoleLogs') {
         this.#handleConsoleLogsUpdate(data as string[])
+      } else if (scope === 'networkRequests') {
+        this.#handleNetworkRequestsUpdate(data as NetworkRequest[])
       } else if (scope === 'sources') {
         this.#handleSourcesUpdate(data as Record<string, string>)
       } else if (scope === 'suites') {
@@ -331,6 +341,7 @@ export class DataManagerController implements ReactiveController {
     this.commandsContextProvider.setValue([])
     this.logsContextProvider.setValue([])
     this.consoleLogsContextProvider.setValue([])
+    this.networkRequestsContextProvider.setValue([])
 
     // Keep suitesContextProvider intact - test list stays visible
     // Keep metadata and sources - they're environment-level
@@ -409,6 +420,13 @@ export class DataManagerController implements ReactiveController {
     ])
   }
 
+  #handleNetworkRequestsUpdate(data: NetworkRequest[]) {
+    this.networkRequestsContextProvider.setValue([
+      ...(this.networkRequestsContextProvider.value || []),
+      ...data
+    ])
+  }
+
   #handleMetadataUpdate(data: Metadata) {
     this.metadataContextProvider.setValue({
       ...this.metadataContextProvider.value,
@@ -562,6 +580,7 @@ export class DataManagerController implements ReactiveController {
     this.mutationsContextProvider.setValue(traceFile.mutations)
     this.logsContextProvider.setValue(traceFile.logs)
     this.consoleLogsContextProvider.setValue(traceFile.consoleLogs)
+    this.networkRequestsContextProvider.setValue(traceFile.networkRequests || [])
     this.metadataContextProvider.setValue(traceFile.metadata)
     this.commandsContextProvider.setValue(traceFile.commands)
     this.sourcesContextProvider.setValue(traceFile.sources)
diff --git a/packages/script/src/collector.ts b/packages/script/src/collector.ts
index 43cdb38..108fec0 100644
--- a/packages/script/src/collector.ts
+++ b/packages/script/src/collector.ts
@@ -1,5 +1,6 @@
 import { getLogs, clearLogs } from './logger.js'
 import { ConsoleLogCollector } from './collectors/consoleLogs.js'
+import { NetworkRequestCollector } from './collectors/networkRequests.js'
 
 class DataCollector {
   #metadata = {
@@ -9,6 +10,7 @@ class DataCollector {
   #errors: string[] = []
   #mutations: TraceMutation[] = []
   #consoleLogs = new ConsoleLogCollector()
+  #networkRequests = new NetworkRequestCollector()
 
   captureError(err: Error) {
     const error = err.stack || err.message
@@ -23,6 +25,7 @@ class DataCollector {
     this.#errors = []
     this.#mutations = []
     this.#consoleLogs.clear()
+    this.#networkRequests.clear()
     clearLogs()
   }
 
@@ -35,6 +38,7 @@ class DataCollector {
       errors: this.#errors,
       mutations: this.#mutations,
       consoleLogs: this.#consoleLogs.getArtifacts(),
+      networkRequests: this.#networkRequests.getArtifacts(),
       traceLogs: getLogs(),
       metadata: this.getMetadata()
     } as const
diff --git a/packages/script/src/collectors/networkRequests.ts b/packages/script/src/collectors/networkRequests.ts
new file mode 100644
index 0000000..d663153
--- /dev/null
+++ b/packages/script/src/collectors/networkRequests.ts
@@ -0,0 +1,320 @@
+import type { Collector } from './collector.js'
+
+export interface NetworkRequest {
+  id: string
+  url: string
+  method: string
+  status?: number
+  statusText?: string
+  type: string
+  initiator?: string
+  size?: number
+  time?: number
+  requestHeaders?: Record<string, string>
+  responseHeaders?: Record<string, string>
+  requestBody?: string
+  responseBody?: string
+  timestamp: number
+  startTime: number
+  endTime?: number
+  error?: string
+}
+
+export class NetworkRequestCollector implements Collector<NetworkRequest> {
+  #requests: NetworkRequest[] = []
+  #pendingRequests = new Map<string, Partial<NetworkRequest>>()
+  #originalFetch?: typeof fetch
+  #originalXhrOpen?: typeof XMLHttpRequest.prototype.open
+  #originalXhrSend?: typeof XMLHttpRequest.prototype.send
+
+  constructor() {
+    this.#patchFetch()
+    this.#patchXHR()
+  }
+
+  getArtifacts(): NetworkRequest[] {
+    return this.#requests
+  }
+
+  clear(): void {
+    this.#requests = []
+    this.#pendingRequests.clear()
+  }
+
+  #generateId(): string {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+  }
+
+  #shouldIgnoreRequest(url: string): boolean {
+    // Filter out internal URLs, data URLs, blob URLs, chrome extensions, etc.
+    if (!url) return true
+
+    const urlLower = url.toLowerCase()
+
+    // Ignore non-HTTP protocols
+    if (urlLower.startsWith('data:')) return true
+    if (urlLower.startsWith('blob:')) return true
+    if (urlLower.startsWith('chrome:')) return true
+    if (urlLower.startsWith('chrome-extension:')) return true
+    if (urlLower.startsWith('about:')) return true
+
+    // Ignore WebSocket connections
+    if (urlLower.startsWith('ws:') || urlLower.startsWith('wss:')) return true
+
+    // Ignore browser internal requests
+    if (urlLower.includes('/.well-known/')) return true
+    if (urlLower.includes('/favicon.ico')) return true
+
+    return false
+  }
+
+  #patchFetch() {
+    if (typeof window.fetch !== 'function') {
+      return
+    }
+
+    this.#originalFetch = window.fetch
+    const self = this
+
+    window.fetch = async function (
+      input: RequestInfo | URL,
+      init?: RequestInit
+    ): Promise<Response> {
+      const id = self.#generateId()
+      const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url
+      const method = init?.method?.toUpperCase() || 'GET'
+
+      // Skip internal/non-HTTP requests
+      if (self.#shouldIgnoreRequest(url)) {
+        return self.#originalFetch!.apply(this, [input, init])
+      }
+
+      const startTime = performance.now()
+      const timestamp = Date.now()
+
+      const request: Partial<NetworkRequest> = {
+        id,
+        url,
+        method,
+        type: 'fetch',
+        timestamp,
+        startTime,
+        requestHeaders: init?.headers ? self.#extractHeaders(init.headers) : {},
+        requestBody: init?.body ? String(init.body) : undefined
+      }
+
+      self.#pendingRequests.set(id, request)
+
+      try {
+        const response = await self.#originalFetch!.apply(this, [input, init])
+        const endTime = performance.now()
+        const time = endTime - startTime
+
+        const responseHeaders = self.#extractHeaders(response.headers)
+        const contentType = responseHeaders['content-type']?.trim()
+
+        if (!contentType || contentType === '-') {
+          self.#pendingRequests.delete(id)
+          return response
+        }
+
+        let responseBody: string | undefined
+        try {
+          if (contentType.includes('application/json') || contentType.includes('text/')) {
+            responseBody = await response.clone().text()
+          }
+        } catch (e) {
+          // Ignore body read errors
+        }
+
+        const networkRequest: NetworkRequest = {
+          id,
+          url,
+          method,
+          status: response.status,
+          statusText: response.statusText,
+          type: 'fetch',
+          timestamp,
+          startTime,
+          endTime,
+          time,
+          requestHeaders: request.requestHeaders,
+          responseHeaders,
+          requestBody: request.requestBody,
+          responseBody,
+          size: self.#estimateSize(responseBody)
+        }
+
+        self.#requests.push(networkRequest)
+        self.#pendingRequests.delete(id)
+
+        return response
+      } catch (error) {
+        self.#pendingRequests.delete(id)
+        throw error
+      }
+    }
+  }
+
+  #patchXHR() {
+    if (typeof XMLHttpRequest === 'undefined') {
+      return
+    }
+
+    const self = this
+    this.#originalXhrOpen = XMLHttpRequest.prototype.open
+    this.#originalXhrSend = XMLHttpRequest.prototype.send
+
+    XMLHttpRequest.prototype.open = function (
+      method: string,
+      url: string | URL,
+      async?: boolean,
+      username?: string | null,
+      password?: string | null
+    ) {
+      const id = self.#generateId()
+      const urlString = typeof url === 'string' ? url : url.href
+
+      // Skip internal/non-HTTP requests
+      if (self.#shouldIgnoreRequest(urlString)) {
+        return self.#originalXhrOpen!.call(
+          this,
+          method,
+          url as string,
+          async ?? true,
+          username,
+          password
+        )
+      }
+
+      ;(this as any)._networkRequestId = id
+      ;(this as any)._networkRequestData = {
+        id,
+        url: urlString,
+        method: method.toUpperCase(),
+        type: 'xhr',
+        timestamp: Date.now(),
+        startTime: performance.now(),
+        requestHeaders: {}
+      }
+
+      return self.#originalXhrOpen!.call(
+        this,
+        method,
+        url as string,
+        async ?? true,
+        username,
+        password
+      )
+    }
+
+    XMLHttpRequest.prototype.send = function (body?: Document | XMLHttpRequestBodyInit | null) {
+      const requestData = (this as any)._networkRequestData as Partial<NetworkRequest>
+
+      // If no request data, this request was filtered out - just send it
+      if (!requestData) {
+        return self.#originalXhrSend!.call(this, body)
+      }
+
+      if (body) {
+        requestData.requestBody = String(body)
+      }
+
+      const startTime = requestData.startTime || performance.now()
+
+      const loadHandler = function (this: XMLHttpRequest) {
+        const endTime = performance.now()
+        const time = endTime - startTime
+
+        const responseHeaders = self.#extractXHRHeaders(this)
+        const contentType = responseHeaders['content-type']?.trim()
+
+        if (!contentType || contentType === '-') {
+          return
+        }
+
+        let responseBody: string | undefined
+        try {
+          if (contentType.includes('application/json') || contentType.includes('text/')) {
+            responseBody = this.responseText
+          }
+        } catch (e) {
+          // Ignore
+        }
+
+        const networkRequest: NetworkRequest = {
+          id: requestData.id!,
+          url: requestData.url!,
+          method: requestData.method!,
+          status: this.status,
+          statusText: this.statusText,
+          type: 'xhr',
+          timestamp: requestData.timestamp!,
+          startTime,
+          endTime,
+          time,
+          requestHeaders: requestData.requestHeaders,
+          responseHeaders,
+          requestBody: requestData.requestBody,
+          responseBody,
+          size: self.#estimateSize(responseBody)
+        }
+
+        self.#requests.push(networkRequest)
+      }
+
+      const errorHandler = function (this: XMLHttpRequest) {
+        // Skip errors
+      }
+
+      this.addEventListener('load', loadHandler)
+      this.addEventListener('error', errorHandler)
+
+      return self.#originalXhrSend!.call(this, body)
+    }
+  }
+
+  #extractHeaders(headers: HeadersInit | Headers): Record<string, string> {
+    const result: Record<string, string> = {}
+
+    if (headers instanceof Headers) {
+      headers.forEach((value, key) => {
+        result[key.toLowerCase()] = value
+      })
+    } else if (Array.isArray(headers)) {
+      headers.forEach(([key, value]) => {
+        result[key.toLowerCase()] = value
+      })
+    } else if (headers) {
+      Object.entries(headers).forEach(([key, value]) => {
+        result[key.toLowerCase()] = value
+      })
+    }
+
+    return result
+  }
+
+  #extractXHRHeaders(xhr: XMLHttpRequest): Record<string, string> {
+    const result: Record<string, string> = {}
+    const headersString = xhr.getAllResponseHeaders()
+
+    if (headersString) {
+      const headers = headersString.trim().split(/[\r\n]+/)
+      headers.forEach((line) => {
+        const parts = line.split(': ')
+        const key = parts.shift()
+        const value = parts.join(': ')
+        if (key) {
+          result[key.toLowerCase()] = value
+        }
+      })
+    }
+
+    return result
+  }
+
+  #estimateSize(body?: string): number {
+    if (!body) return 0
+    return new Blob([body]).size
+  }
+}
diff --git a/packages/script/types.d.ts b/packages/script/types.d.ts
index 69631ac..434d38b 100644
--- a/packages/script/types.d.ts
+++ b/packages/script/types.d.ts
@@ -1,5 +1,6 @@
 import type { DataCollectorType } from './src/collector.ts'
 import type { ConsoleLog as ConsoleLogImport } from './src/collectors/consoleLogs.ts'
+import type { NetworkRequest as NetworkRequestImport } from './src/collectors/networkRequests.ts'
 
 export interface TraceMetadata {
   url: string
@@ -15,6 +16,7 @@ export interface SimplifiedVNode {
 
 declare global {
   type ConsoleLogs = ConsoleLogImport
+  type NetworkRequest = NetworkRequestImport
 
   interface Element {
     'wdio-ref': string
diff --git a/packages/service/src/index.ts b/packages/service/src/index.ts
index ff2b0c7..a891ef6 100644
--- a/packages/service/src/index.ts
+++ b/packages/service/src/index.ts
@@ -18,6 +18,7 @@ import {
   SPEC_FILE_PATTERN,
   CONTEXT_CHANGE_COMMANDS
 } from './constants.js'
+
 export * from './types.js'
 export const launcher = DevToolsAppLauncher
 
@@ -87,6 +88,7 @@ export default class DevToolsHookService implements Services.ServiceInstance {
   #testReporters: TestReporter[] = []
   #sessionCapturer = new SessionCapturer()
   #browser?: WebdriverIO.Browser
+  #bidiListenersSetup = false
 
   /**
    * This is used to capture the command stack to ensure that we only capture
@@ -208,6 +210,30 @@ export default class DevToolsHookService implements Services.ServiceInstance {
       return
     }
 
+    // Set up BiDi listeners on first command (before any actual commands are executed)
+    if (!this.#bidiListenersSetup && this.#browser.isBidi) {
+      this.#bidiListenersSetup = true
+      log.info('Setting up BiDi network event listeners...')
+
+      // Listen for network events
+      this.#browser.on('network.beforeRequestSent', (event: any) => {
+        log.info(`>>> BiDi beforeRequestSent - keys: ${Object.keys(event).join(', ')}`)
+        this.#sessionCapturer.handleNetworkRequestStarted(event)
+      })
+
+      this.#browser.on('network.responseCompleted', (event: any) => {
+        log.info(`>>> BiDi responseCompleted - keys: ${Object.keys(event).join(', ')}`)
+        this.#sessionCapturer.handleNetworkResponseCompleted(event)
+      })
+
+      this.#browser.on('network.fetchError', (event: any) => {
+        log.info(`>>> BiDi fetchError - keys: ${Object.keys(event).join(', ')}`)
+        this.#sessionCapturer.handleNetworkFetchError(event)
+      })
+
+      log.info('✓ BiDi network event listeners registered')
+    }
+
     /**
      * propagate url change to devtools app
      */
@@ -316,6 +342,7 @@ export default class DevToolsHookService implements Services.ServiceInstance {
       mutations: this.#sessionCapturer.mutations,
       logs: this.#sessionCapturer.traceLogs,
       consoleLogs: this.#sessionCapturer.consoleLogs,
+      networkRequests: this.#sessionCapturer.networkRequests,
       metadata: {
         type: this.captureType,
         ...this.#sessionCapturer.metadata!,
diff --git a/packages/service/src/session.ts b/packages/service/src/session.ts
index 82f79d8..4f2dd41 100644
--- a/packages/service/src/session.ts
+++ b/packages/service/src/session.ts
@@ -28,6 +28,8 @@ export class SessionCapturer {
   mutations: TraceMutation[] = []
   traceLogs: string[] = []
   consoleLogs: ConsoleLogs[] = []
+  networkRequests: NetworkRequest[] = []
+  #pendingNetworkRequests = new Map<string, { url: string; method: string; timestamp: number; startTime: number; requestHeaders?: Record<string, string> }>()
   metadata?: {
     url: string
     viewport: VisualViewport
@@ -220,7 +222,7 @@ export class SessionCapturer {
         return
       }
 
-      const { mutations, traceLogs, consoleLogs, metadata } =
+      const { mutations, traceLogs, consoleLogs, networkRequests, metadata } =
         await browser.execute(() => window.wdioTraceCollector.getTraceData())
       this.metadata = metadata
 
@@ -238,6 +240,11 @@ export class SessionCapturer {
         this.consoleLogs.push(...browserLogs)
         this.sendUpstream('consoleLogs', browserLogs)
       }
+      if (Array.isArray(networkRequests)) {
+        const requests = networkRequests as NetworkRequest[]
+        this.networkRequests.push(...requests)
+        this.sendUpstream('networkRequests', requests)
+      }
 
       this.sendUpstream('metadata', metadata)
       log.info(`✓ Sent metadata upstream, WS state: ${this.#ws?.readyState}`)
@@ -246,6 +253,111 @@ export class SessionCapturer {
     }
   }
 
+  handleNetworkRequestStarted(event: { request: { request: string; url: string; method: string; headers?: { name: string; value: { type?: string; value?: string } | string }[] }; timestamp: number }) {
+    try {
+      const { request, timestamp } = event
+      const requestId = request.request
+      const requestHeaders: Record<string, string> = {}
+      if (request.headers) {
+        request.headers.forEach((h: { name: string; value: { type?: string; value?: string } | string }) => {
+          const name = typeof h.name === 'string' ? h.name.toLowerCase() : ''
+          const value = typeof h.value === 'string' ? h.value :
+                       (typeof h.value === 'object' && h.value?.value) ? h.value.value : ''
+          if (name) {
+            requestHeaders[name] = value
+          }
+        })
+      }
+
+      this.#pendingNetworkRequests.set(requestId, {
+        url: request.url,
+        method: request.method,
+        timestamp,
+        startTime: performance.now(),
+        requestHeaders
+      })
+    } catch (err) {
+      log.error(`handleNetworkRequestStarted error: ${err}`)
+    }
+  }
+
+handleNetworkResponseCompleted(event: { request: { request: string }; response: { status?: number; statusText?: string; headers?: { name: string; value: { type?: string; value?: string } | string }[]; bytesReceived?: number }; timestamp: number }) {
+    try {
+      const { request, response, timestamp } = event
+      const requestId = request.request
+      const pending = this.#pendingNetworkRequests.get(requestId)
+      if (!pending) {
+        return
+      }
+
+      this.#pendingNetworkRequests.delete(requestId)
+
+      const responseHeaders: Record<string, string> = {}
+      if (response.headers) {
+        response.headers.forEach((h: { name: string; value: { type?: string; value?: string } | string }) => {
+          const name = typeof h.name === 'string' ? h.name.toLowerCase() : ''
+          const value = typeof h.value === 'string' ? h.value :
+                       (typeof h.value === 'object' && h.value?.value) ? h.value.value : ''
+          if (name) {
+            responseHeaders[name] = value
+          }
+        })
+      }
+
+      const contentType = responseHeaders['content-type']?.trim()
+      if (!contentType || contentType === '-') {
+        return
+      }
+
+      const endTime = performance.now()
+      const networkRequest: NetworkRequest = {
+        id: `${timestamp}-${requestId}`,
+        url: pending.url,
+        method: pending.method,
+        status: response.status,
+        statusText: response.statusText,
+        type: this.#getRequestType(pending.url, contentType),
+        timestamp: pending.timestamp,
+        startTime: pending.startTime,
+        endTime,
+        time: endTime - pending.startTime,
+        requestHeaders: pending.requestHeaders,
+        responseHeaders,
+        size: response.bytesReceived
+      }
+
+      this.networkRequests.push(networkRequest)
+      this.sendUpstream('networkRequests', [networkRequest])
+    } catch (err) {
+      log.error(`handleNetworkResponseCompleted error: ${err}`)
+    }
+  }
+
+  handleNetworkFetchError(event: { request: { request: string } }) {
+    const requestId = event.request.request
+    this.#pendingNetworkRequests.delete(requestId)
+  }
+
+  #getRequestType(url: string, contentType?: string): string {
+    const urlLower = url.toLowerCase()
+    const ct = contentType?.toLowerCase() || ''
+
+    if (ct.includes('text/html')) return 'document'
+    if (ct.includes('text/css')) return 'stylesheet'
+    if (ct.includes('javascript') || ct.includes('ecmascript')) return 'script'
+    if (ct.includes('image/')) return 'image'
+    if (ct.includes('font/') || ct.includes('woff')) return 'font'
+    if (ct.includes('application/json')) return 'fetch'
+
+    if (urlLower.endsWith('.html') || urlLower.endsWith('.htm')) return 'document'
+    if (urlLower.endsWith('.css')) return 'stylesheet'
+    if (urlLower.endsWith('.js') || urlLower.endsWith('.mjs')) return 'script'
+    if (urlLower.match(/\.(png|jpg|jpeg|gif|svg|webp|ico)$/)) return 'image'
+    if (urlLower.match(/\.(woff|woff2|ttf|eot|otf)$/)) return 'font'
+
+    return 'xhr'
+  }
+
   sendUpstream<Scope extends keyof TraceLog>(
     scope: Scope,
     data: Partial<TraceLog[Scope]>
diff --git a/packages/service/src/types.ts b/packages/service/src/types.ts
index af48d7a..52bb103 100644
--- a/packages/service/src/types.ts
+++ b/packages/service/src/types.ts
@@ -29,6 +29,7 @@ export interface TraceLog {
   mutations: TraceMutation[]
   logs: string[]
   consoleLogs: ConsoleLogs[]
+  networkRequests: NetworkRequest[]
   metadata: Metadata
   commands: CommandLog[]
   sources: Record<string, string>
diff --git a/packages/service/tests/index.test.ts b/packages/service/tests/index.test.ts
index 24ad0c1..9d39c59 100644
--- a/packages/service/tests/index.test.ts
+++ b/packages/service/tests/index.test.ts
@@ -40,7 +40,9 @@ describe('DevtoolsService - Internal Command Filtering', () => {
       height: 800,
       offsetLeft: 0,
       offsetTop: 0
-    })
+    }),
+    on: vi.fn(), // Add event listener mock
+    emit: vi.fn() // Add emit mock
   } as any
 
   // Helper to execute a command (before + after)

From 9087aea1b3ec576419e5cb022ff9446170a9e727 Mon Sep 17 00:00:00 2001
From: Vishnu Vardhan <vishnu.p@browserstack.com>
Date: Wed, 14 Jan 2026 15:14:05 +0530
Subject: [PATCH 2/5] Eslint fix

---
 packages/app/src/components/workbench.ts      |   5 +-
 .../app/src/components/workbench/network.ts   | 117 +++++++++++-----
 packages/app/src/controller/DataManager.ts    |   4 +-
 .../script/src/collectors/networkRequests.ts  |  68 ++++++---
 packages/service/src/index.ts                 |   2 -
 packages/service/src/session.ts               | 130 ++++++++++++++----
 6 files changed, 243 insertions(+), 83 deletions(-)

diff --git a/packages/app/src/components/workbench.ts b/packages/app/src/components/workbench.ts
index a3868d5..90d7c53 100644
--- a/packages/app/src/components/workbench.ts
+++ b/packages/app/src/components/workbench.ts
@@ -4,7 +4,10 @@ import { customElement, query, state } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
 import { DragController, Direction } from '../utils/DragController.js'
-import { consoleLogContext, networkRequestContext } from '../controller/DataManager.js'
+import {
+  consoleLogContext,
+  networkRequestContext
+} from '../controller/DataManager.js'
 
 import '~icons/mdi/arrow-collapse-down.js'
 import '~icons/mdi/arrow-collapse-up.js'
diff --git a/packages/app/src/components/workbench/network.ts b/packages/app/src/components/workbench/network.ts
index 7175636..0789485 100644
--- a/packages/app/src/components/workbench/network.ts
+++ b/packages/app/src/components/workbench/network.ts
@@ -9,50 +9,96 @@ import '../placeholder.js'
 const COMPONENT = 'wdio-devtools-network'
 
 function formatBytes(bytes?: number): string {
-  if (!bytes || bytes === 0) return '-'
+  if (!bytes || bytes === 0) {
+    return '-'
+  }
   const k = 1024
   const sizes = ['B', 'KB', 'MB', 'GB']
   const i = Math.floor(Math.log(bytes) / Math.log(k))
   const size = bytes / Math.pow(k, i)
-  return size >= 10 ? `${size.toFixed(0)}${sizes[i]}` : `${size.toFixed(1)}${sizes[i]}`
+  return size >= 10
+    ? `${size.toFixed(0)}${sizes[i]}`
+    : `${size.toFixed(1)}${sizes[i]}`
 }
 
 function formatTime(ms?: number): string {
-  if (!ms) return '-'
-  if (ms < 1) return `${(ms * 1000).toFixed(0)}μs`
-  if (ms < 1000) return `${ms.toFixed(0)}ms`
+  if (ms === undefined || ms === null) {
+    return '-'
+  }
+  if (ms < 1) {
+    return `${ms.toFixed(2)}ms`
+  }
+  if (ms < 1000) {
+    return `${ms.toFixed(0)}ms`
+  }
   return `${(ms / 1000).toFixed(1)}s`
 }
 
 function getStatusClass(status?: number): string {
-  if (!status) return 'text-gray-500'
-  if (status >= 200 && status < 300) return 'text-green-500'
-  if (status >= 300 && status < 400) return 'text-yellow-500'
-  if (status >= 400) return 'text-red-500'
+  if (!status) {
+    return 'text-gray-500'
+  }
+  if (status >= 200 && status < 300) {
+    return 'text-green-500'
+  }
+  if (status >= 300 && status < 400) {
+    return 'text-yellow-500'
+  }
+  if (status >= 400) {
+    return 'text-red-500'
+  }
   return 'text-gray-500'
 }
 
 function getResourceType(request: NetworkRequest): string {
   const url = request.url.toLowerCase()
-  const contentType = request.responseHeaders?.['content-type']?.toLowerCase() || ''
+  const contentType =
+    request.responseHeaders?.['content-type']?.toLowerCase() || ''
 
   // Check by content-type first
-  if (contentType.includes('text/html')) return 'HTML'
-  if (contentType.includes('text/css')) return 'CSS'
-  if (contentType.includes('javascript') || contentType.includes('ecmascript')) return 'JS'
-  if (contentType.includes('image/')) return 'Image'
-  if (contentType.includes('font/') || contentType.includes('woff')) return 'Font'
-  if (contentType.includes('application/json')) return 'Fetch'
+  if (contentType.includes('text/html')) {
+    return 'HTML'
+  }
+  if (contentType.includes('text/css')) {
+    return 'CSS'
+  }
+  if (
+    contentType.includes('javascript') ||
+    contentType.includes('ecmascript')
+  ) {
+    return 'JS'
+  }
+  if (contentType.includes('image/')) {
+    return 'Image'
+  }
+  if (contentType.includes('font/') || contentType.includes('woff')) {
+    return 'Font'
+  }
+  if (contentType.includes('application/json')) {
+    return 'Fetch'
+  }
 
   // Fallback to URL extension
-  if (url.endsWith('.html') || url.endsWith('.htm')) return 'HTML'
-  if (url.endsWith('.css')) return 'CSS'
-  if (url.endsWith('.js') || url.endsWith('.mjs')) return 'JS'
-  if (url.match(/\.(png|jpg|jpeg|gif|svg|webp|ico)$/)) return 'Image'
-  if (url.match(/\.(woff|woff2|ttf|eot|otf)$/)) return 'Font'
+  if (url.endsWith('.html') || url.endsWith('.htm')) {
+    return 'HTML'
+  }
+  if (url.endsWith('.css')) {
+    return 'CSS'
+  }
+  if (url.endsWith('.js') || url.endsWith('.mjs')) {
+    return 'JS'
+  }
+  if (url.match(/\.(png|jpg|jpeg|gif|svg|webp|ico)$/)) {
+    return 'Image'
+  }
+  if (url.match(/\.(woff|woff2|ttf|eot|otf)$/)) {
+    return 'Font'
+  }
 
   // Check by request type
-  if (request.type === 'fetch' || request.method !== 'GET') return 'Fetch'
+  if (request.type === 'fetch' || request.method !== 'GET') {
+    return 'Fetch'
+  }
 
   return 'Other'
 }
@@ -105,7 +151,10 @@ export class DevtoolsNetwork extends Element {
     if (parentTab) {
       const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
-          if (mutation.type === 'attributes' && mutation.attributeName === 'active') {
+          if (
+            mutation.type === 'attributes' &&
+            mutation.attributeName === 'active'
+          ) {
             // Tab became inactive, clear selection
             if (!parentTab.hasAttribute('active')) {
               this.selectedRequest = undefined
@@ -332,7 +381,9 @@ export class DevtoolsNetwork extends Element {
 
     // Filter by resource type
     if (this.filterType !== 'All') {
-      filtered = filtered.filter((req) => getResourceType(req) === this.filterType)
+      filtered = filtered.filter(
+        (req) => getResourceType(req) === this.filterType
+      )
     }
 
     // Filter by search query
@@ -424,12 +475,16 @@ export class DevtoolsNetwork extends Element {
                       >${request.status || (request.error ? 'ERR' : '-')}</span
                     >
                     <span class="truncate text-muted"
-                      >${request.responseHeaders?.['content-type']?.split(';')[0] || '-'}</span
+                      >${request.responseHeaders?.['content-type']?.split(
+                        ';'
+                      )[0] || '-'}</span
                     >
                     <span>${formatTime(request.time)}</span>
                     <span>${formatBytes(request.size)}</span>
                     <span class="text-muted"
-                      >${request.startTime ? `${request.startTime.toFixed(1)}s` : '-'}</span
+                      >${request.startTime
+                        ? `${request.startTime.toFixed(1)}s`
+                        : '-'}</span
                     >
                   </div>
                 `
@@ -486,17 +541,14 @@ export class DevtoolsNetwork extends Element {
               ? html`
                   <div class="header-row">
                     <span class="header-key">Error:</span>
-                    <span class="header-value text-red-500"
-                      >${req.error}</span
-                    >
+                    <span class="header-value text-red-500">${req.error}</span>
                   </div>
                 `
               : nothing}
           </div>
         </div>
 
-        ${req.requestHeaders &&
-        Object.keys(req.requestHeaders).length > 0
+        ${req.requestHeaders && Object.keys(req.requestHeaders).length > 0
           ? html`
               <div class="detail-section">
                 <div class="detail-title">Request Headers</div>
@@ -523,8 +575,7 @@ export class DevtoolsNetwork extends Element {
               </div>
             `
           : nothing}
-        ${req.responseHeaders &&
-        Object.keys(req.responseHeaders).length > 0
+        ${req.responseHeaders && Object.keys(req.responseHeaders).length > 0
           ? html`
               <div class="detail-section">
                 <div class="detail-title">Response Headers</div>
diff --git a/packages/app/src/controller/DataManager.ts b/packages/app/src/controller/DataManager.ts
index 51b487d..e4c546d 100644
--- a/packages/app/src/controller/DataManager.ts
+++ b/packages/app/src/controller/DataManager.ts
@@ -580,7 +580,9 @@ export class DataManagerController implements ReactiveController {
     this.mutationsContextProvider.setValue(traceFile.mutations)
     this.logsContextProvider.setValue(traceFile.logs)
     this.consoleLogsContextProvider.setValue(traceFile.consoleLogs)
-    this.networkRequestsContextProvider.setValue(traceFile.networkRequests || [])
+    this.networkRequestsContextProvider.setValue(
+      traceFile.networkRequests || []
+    )
     this.metadataContextProvider.setValue(traceFile.metadata)
     this.commandsContextProvider.setValue(traceFile.commands)
     this.sourcesContextProvider.setValue(traceFile.sources)
diff --git a/packages/script/src/collectors/networkRequests.ts b/packages/script/src/collectors/networkRequests.ts
index d663153..21d8073 100644
--- a/packages/script/src/collectors/networkRequests.ts
+++ b/packages/script/src/collectors/networkRequests.ts
@@ -47,23 +47,41 @@ export class NetworkRequestCollector implements Collector<NetworkRequest> {
 
   #shouldIgnoreRequest(url: string): boolean {
     // Filter out internal URLs, data URLs, blob URLs, chrome extensions, etc.
-    if (!url) return true
+    if (!url) {
+      return true
+    }
 
     const urlLower = url.toLowerCase()
 
     // Ignore non-HTTP protocols
-    if (urlLower.startsWith('data:')) return true
-    if (urlLower.startsWith('blob:')) return true
-    if (urlLower.startsWith('chrome:')) return true
-    if (urlLower.startsWith('chrome-extension:')) return true
-    if (urlLower.startsWith('about:')) return true
+    if (urlLower.startsWith('data:')) {
+      return true
+    }
+    if (urlLower.startsWith('blob:')) {
+      return true
+    }
+    if (urlLower.startsWith('chrome:')) {
+      return true
+    }
+    if (urlLower.startsWith('chrome-extension:')) {
+      return true
+    }
+    if (urlLower.startsWith('about:')) {
+      return true
+    }
 
     // Ignore WebSocket connections
-    if (urlLower.startsWith('ws:') || urlLower.startsWith('wss:')) return true
+    if (urlLower.startsWith('ws:') || urlLower.startsWith('wss:')) {
+      return true
+    }
 
     // Ignore browser internal requests
-    if (urlLower.includes('/.well-known/')) return true
-    if (urlLower.includes('/favicon.ico')) return true
+    if (urlLower.includes('/.well-known/')) {
+      return true
+    }
+    if (urlLower.includes('/favicon.ico')) {
+      return true
+    }
 
     return false
   }
@@ -81,7 +99,12 @@ export class NetworkRequestCollector implements Collector<NetworkRequest> {
       init?: RequestInit
     ): Promise<Response> {
       const id = self.#generateId()
-      const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url
+      const url =
+        typeof input === 'string'
+          ? input
+          : input instanceof URL
+            ? input.href
+            : input.url
       const method = init?.method?.toUpperCase() || 'GET'
 
       // Skip internal/non-HTTP requests
@@ -120,10 +143,13 @@ export class NetworkRequestCollector implements Collector<NetworkRequest> {
 
         let responseBody: string | undefined
         try {
-          if (contentType.includes('application/json') || contentType.includes('text/')) {
+          if (
+            contentType.includes('application/json') ||
+            contentType.includes('text/')
+          ) {
             responseBody = await response.clone().text()
           }
-        } catch (e) {
+        } catch {
           // Ignore body read errors
         }
 
@@ -208,8 +234,11 @@ export class NetworkRequestCollector implements Collector<NetworkRequest> {
       )
     }
 
-    XMLHttpRequest.prototype.send = function (body?: Document | XMLHttpRequestBodyInit | null) {
-      const requestData = (this as any)._networkRequestData as Partial<NetworkRequest>
+    XMLHttpRequest.prototype.send = function (
+      body?: Document | XMLHttpRequestBodyInit | null
+    ) {
+      const requestData = (this as any)
+        ._networkRequestData as Partial<NetworkRequest>
 
       // If no request data, this request was filtered out - just send it
       if (!requestData) {
@@ -235,10 +264,13 @@ export class NetworkRequestCollector implements Collector<NetworkRequest> {
 
         let responseBody: string | undefined
         try {
-          if (contentType.includes('application/json') || contentType.includes('text/')) {
+          if (
+            contentType.includes('application/json') ||
+            contentType.includes('text/')
+          ) {
             responseBody = this.responseText
           }
-        } catch (e) {
+        } catch {
           // Ignore
         }
 
@@ -314,7 +346,9 @@ export class NetworkRequestCollector implements Collector<NetworkRequest> {
   }
 
   #estimateSize(body?: string): number {
-    if (!body) return 0
+    if (!body) {
+      return 0
+    }
     return new Blob([body]).size
   }
 }
diff --git a/packages/service/src/index.ts b/packages/service/src/index.ts
index a891ef6..c25a5b2 100644
--- a/packages/service/src/index.ts
+++ b/packages/service/src/index.ts
@@ -217,12 +217,10 @@ export default class DevToolsHookService implements Services.ServiceInstance {
 
       // Listen for network events
       this.#browser.on('network.beforeRequestSent', (event: any) => {
-        log.info(`>>> BiDi beforeRequestSent - keys: ${Object.keys(event).join(', ')}`)
         this.#sessionCapturer.handleNetworkRequestStarted(event)
       })
 
       this.#browser.on('network.responseCompleted', (event: any) => {
-        log.info(`>>> BiDi responseCompleted - keys: ${Object.keys(event).join(', ')}`)
         this.#sessionCapturer.handleNetworkResponseCompleted(event)
       })
 
diff --git a/packages/service/src/session.ts b/packages/service/src/session.ts
index 4f2dd41..68a6b2c 100644
--- a/packages/service/src/session.ts
+++ b/packages/service/src/session.ts
@@ -29,7 +29,16 @@ export class SessionCapturer {
   traceLogs: string[] = []
   consoleLogs: ConsoleLogs[] = []
   networkRequests: NetworkRequest[] = []
-  #pendingNetworkRequests = new Map<string, { url: string; method: string; timestamp: number; startTime: number; requestHeaders?: Record<string, string> }>()
+  #pendingNetworkRequests = new Map<
+    string,
+    {
+      url: string
+      method: string
+      timestamp: number
+      startTime: number
+      requestHeaders?: Record<string, string>
+    }
+  >()
   metadata?: {
     url: string
     viewport: VisualViewport
@@ -253,20 +262,40 @@ export class SessionCapturer {
     }
   }
 
-  handleNetworkRequestStarted(event: { request: { request: string; url: string; method: string; headers?: { name: string; value: { type?: string; value?: string } | string }[] }; timestamp: number }) {
+  handleNetworkRequestStarted(event: {
+    request: {
+      request: string
+      url: string
+      method: string
+      headers?: {
+        name: string
+        value: { type?: string; value?: string } | string
+      }[]
+    }
+    timestamp: number
+  }) {
     try {
       const { request, timestamp } = event
       const requestId = request.request
       const requestHeaders: Record<string, string> = {}
       if (request.headers) {
-        request.headers.forEach((h: { name: string; value: { type?: string; value?: string } | string }) => {
-          const name = typeof h.name === 'string' ? h.name.toLowerCase() : ''
-          const value = typeof h.value === 'string' ? h.value :
-                       (typeof h.value === 'object' && h.value?.value) ? h.value.value : ''
-          if (name) {
-            requestHeaders[name] = value
+        request.headers.forEach(
+          (h: {
+            name: string
+            value: { type?: string; value?: string } | string
+          }) => {
+            const name = typeof h.name === 'string' ? h.name.toLowerCase() : ''
+            const value =
+              typeof h.value === 'string'
+                ? h.value
+                : typeof h.value === 'object' && h.value?.value
+                  ? h.value.value
+                  : ''
+            if (name) {
+              requestHeaders[name] = value
+            }
           }
-        })
+        )
       }
 
       this.#pendingNetworkRequests.set(requestId, {
@@ -281,7 +310,19 @@ export class SessionCapturer {
     }
   }
 
-handleNetworkResponseCompleted(event: { request: { request: string }; response: { status?: number; statusText?: string; headers?: { name: string; value: { type?: string; value?: string } | string }[]; bytesReceived?: number }; timestamp: number }) {
+  handleNetworkResponseCompleted(event: {
+    request: { request: string }
+    response: {
+      status?: number
+      statusText?: string
+      headers?: {
+        name: string
+        value: { type?: string; value?: string } | string
+      }[]
+      bytesReceived?: number
+    }
+    timestamp: number
+  }) {
     try {
       const { request, response, timestamp } = event
       const requestId = request.request
@@ -294,14 +335,23 @@ handleNetworkResponseCompleted(event: { request: { request: string }; response:
 
       const responseHeaders: Record<string, string> = {}
       if (response.headers) {
-        response.headers.forEach((h: { name: string; value: { type?: string; value?: string } | string }) => {
-          const name = typeof h.name === 'string' ? h.name.toLowerCase() : ''
-          const value = typeof h.value === 'string' ? h.value :
-                       (typeof h.value === 'object' && h.value?.value) ? h.value.value : ''
-          if (name) {
-            responseHeaders[name] = value
+        response.headers.forEach(
+          (h: {
+            name: string
+            value: { type?: string; value?: string } | string
+          }) => {
+            const name = typeof h.name === 'string' ? h.name.toLowerCase() : ''
+            const value =
+              typeof h.value === 'string'
+                ? h.value
+                : typeof h.value === 'object' && h.value?.value
+                  ? h.value.value
+                  : ''
+            if (name) {
+              responseHeaders[name] = value
+            }
           }
-        })
+        )
       }
 
       const contentType = responseHeaders['content-type']?.trim()
@@ -342,18 +392,40 @@ handleNetworkResponseCompleted(event: { request: { request: string }; response:
     const urlLower = url.toLowerCase()
     const ct = contentType?.toLowerCase() || ''
 
-    if (ct.includes('text/html')) return 'document'
-    if (ct.includes('text/css')) return 'stylesheet'
-    if (ct.includes('javascript') || ct.includes('ecmascript')) return 'script'
-    if (ct.includes('image/')) return 'image'
-    if (ct.includes('font/') || ct.includes('woff')) return 'font'
-    if (ct.includes('application/json')) return 'fetch'
-
-    if (urlLower.endsWith('.html') || urlLower.endsWith('.htm')) return 'document'
-    if (urlLower.endsWith('.css')) return 'stylesheet'
-    if (urlLower.endsWith('.js') || urlLower.endsWith('.mjs')) return 'script'
-    if (urlLower.match(/\.(png|jpg|jpeg|gif|svg|webp|ico)$/)) return 'image'
-    if (urlLower.match(/\.(woff|woff2|ttf|eot|otf)$/)) return 'font'
+    if (ct.includes('text/html')) {
+      return 'document'
+    }
+    if (ct.includes('text/css')) {
+      return 'stylesheet'
+    }
+    if (ct.includes('javascript') || ct.includes('ecmascript')) {
+      return 'script'
+    }
+    if (ct.includes('image/')) {
+      return 'image'
+    }
+    if (ct.includes('font/') || ct.includes('woff')) {
+      return 'font'
+    }
+    if (ct.includes('application/json')) {
+      return 'fetch'
+    }
+
+    if (urlLower.endsWith('.html') || urlLower.endsWith('.htm')) {
+      return 'document'
+    }
+    if (urlLower.endsWith('.css')) {
+      return 'stylesheet'
+    }
+    if (urlLower.endsWith('.js') || urlLower.endsWith('.mjs')) {
+      return 'script'
+    }
+    if (urlLower.match(/\.(png|jpg|jpeg|gif|svg|webp|ico)$/)) {
+      return 'image'
+    }
+    if (urlLower.match(/\.(woff|woff2|ttf|eot|otf)$/)) {
+      return 'font'
+    }
 
     return 'xhr'
   }

From 587d437591dec986d2b467f142efc2637effadd6 Mon Sep 17 00:00:00 2001
From: Vishnu Vardhan <vishnu.p@browserstack.com>
Date: Wed, 14 Jan 2026 15:51:24 +0530
Subject: [PATCH 3/5] Unit test case for Network log capture

---
 packages/script/tests/networkRequests.test.ts |  40 +++++
 .../service/tests/session-network.test.ts     | 163 ++++++++++++++++++
 2 files changed, 203 insertions(+)
 create mode 100644 packages/script/tests/networkRequests.test.ts
 create mode 100644 packages/service/tests/session-network.test.ts

diff --git a/packages/script/tests/networkRequests.test.ts b/packages/script/tests/networkRequests.test.ts
new file mode 100644
index 0000000..96f64c2
--- /dev/null
+++ b/packages/script/tests/networkRequests.test.ts
@@ -0,0 +1,40 @@
+/** @vitest-environment happy-dom */
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { NetworkRequestCollector } from '../src/collectors/networkRequests.js'
+
+describe('NetworkRequestCollector', () => {
+  let collector: NetworkRequestCollector
+
+  beforeEach(() => {
+    collector = new NetworkRequestCollector()
+  })
+
+  afterEach(() => {
+    collector.clear()
+  })
+
+  it('should initialize, clear, and return artifacts correctly', () => {
+    // Test initialization
+    const artifacts = collector.getArtifacts()
+    expect(artifacts).toEqual([])
+    expect(Array.isArray(artifacts)).toBe(true)
+    expect(artifacts).toHaveLength(0)
+
+    // Test clear functionality
+    collector.clear()
+    const clearedArtifacts = collector.getArtifacts()
+    expect(clearedArtifacts).toEqual([])
+    expect(clearedArtifacts).toHaveLength(0)
+
+    // Test multiple clears are safe
+    collector.clear()
+    expect(collector.getArtifacts()).toEqual([])
+
+    // Test reference consistency
+    const artifacts1 = collector.getArtifacts()
+    const artifacts2 = collector.getArtifacts()
+    expect(artifacts1).toBe(artifacts2)
+    expect(artifacts1).toBeDefined()
+    expect(artifacts1).not.toBeNull()
+  })
+})
diff --git a/packages/service/tests/session-network.test.ts b/packages/service/tests/session-network.test.ts
new file mode 100644
index 0000000..20e1a20
--- /dev/null
+++ b/packages/service/tests/session-network.test.ts
@@ -0,0 +1,163 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { SessionCapturer } from '../src/session.js'
+
+describe('SessionCapturer - Network Request Capture', () => {
+  let capturer: SessionCapturer
+
+  // Helper to create request event
+  const createRequestEvent = (id: string, url: string, method = 'GET') => ({
+    request: {
+      request: id,
+      url,
+      method,
+      headers: [],
+      timings: { timeOrigin: 1000 }
+    }
+  })
+
+  // Helper to create response event
+  const createResponseEvent = (
+    id: string,
+    url: string,
+    options: {
+      status?: number
+      statusText?: string
+      contentType?: string
+      size?: number
+      timeOrigin?: number
+    } = {}
+  ) => {
+    const headers = options.contentType
+      ? [
+          {
+            name: 'Content-Type',
+            value: { type: 'string', value: options.contentType }
+          }
+        ]
+      : []
+
+    return {
+      request: { request: id },
+      response: {
+        url,
+        status: options.status ?? 200,
+        statusText: options.statusText ?? 'OK',
+        headers,
+        fromCache: false,
+        bytesReceived: options.size ?? 1024,
+        timings: { timeOrigin: options.timeOrigin ?? 1500 }
+      }
+    }
+  }
+
+  // Helper to verify request properties
+  const verifyRequest = (
+    req: any,
+    expected: {
+      url: string
+      method?: string
+      status?: number
+      contentType?: string
+      size?: number
+    }
+  ) => {
+    expect(req).toBeDefined()
+    expect(req.url).toBe(expected.url)
+    expect(req.method).toBe(expected.method ?? 'GET')
+    expect(req.status).toBe(expected.status ?? 200)
+    expect(req.statusText).toBe('OK')
+    if (expected.contentType) {
+      expect(req.responseHeaders).toBeDefined()
+      expect(req.responseHeaders?.['content-type']).toBe(expected.contentType)
+    }
+    if (expected.size) {
+      expect(req.size).toBe(expected.size)
+    }
+    expect(req.time).toBeDefined()
+    expect(typeof req.time).toBe('number')
+    expect(req.time).toBeGreaterThanOrEqual(0)
+  }
+
+  beforeEach(() => {
+    capturer = new SessionCapturer()
+  })
+
+  afterEach(() => {
+    capturer.networkRequests = []
+  })
+
+  it('should capture, merge, and filter network requests correctly', () => {
+    // Test 1: Successful request capture and merge
+    const req1 = createRequestEvent('1', 'https://api.example.com/users')
+    capturer.handleNetworkRequestStarted(req1 as any)
+
+    const res1 = createResponseEvent('1', 'https://api.example.com/users', {
+      contentType: 'application/json',
+      size: 1024
+    })
+    capturer.handleNetworkResponseCompleted(res1 as any)
+
+    expect(capturer.networkRequests).toHaveLength(1)
+    verifyRequest(capturer.networkRequests[0], {
+      url: 'https://api.example.com/users',
+      method: 'GET',
+      status: 200,
+      contentType: 'application/json',
+      size: 1024
+    })
+
+    // Test 2: Request without content-type should be filtered
+    const req2 = createRequestEvent('2', 'https://api.example.com/no-type')
+    capturer.handleNetworkRequestStarted(req2 as any)
+
+    const res2 = createResponseEvent('2', 'https://api.example.com/no-type', {})
+    capturer.handleNetworkResponseCompleted(res2 as any)
+
+    // Should still have only 1 request (the first one)
+    expect(capturer.networkRequests).toHaveLength(1)
+  })
+
+  it('should handle multiple concurrent requests', () => {
+    const endpoints = ['endpoint1', 'endpoint2', 'endpoint3']
+
+    // Start all requests
+    endpoints.forEach((endpoint, i) => {
+      const req = createRequestEvent(
+        String(i + 1),
+        `https://api.example.com/${endpoint}`
+      )
+      capturer.handleNetworkRequestStarted(req as any)
+    })
+
+    // Complete all requests
+    endpoints.forEach((endpoint, i) => {
+      const res = createResponseEvent(
+        String(i + 1),
+        `https://api.example.com/${endpoint}`,
+        { contentType: 'application/json', size: 1024 }
+      )
+      capturer.handleNetworkResponseCompleted(res as any)
+    })
+
+    expect(capturer.networkRequests).toHaveLength(3)
+
+    // Verify all URLs
+    const urls = capturer.networkRequests.map((r) => r.url)
+    expect(urls).toEqual([
+      'https://api.example.com/endpoint1',
+      'https://api.example.com/endpoint2',
+      'https://api.example.com/endpoint3'
+    ])
+
+    // Verify each request
+    capturer.networkRequests.forEach((req, index) => {
+      verifyRequest(req, {
+        url: `https://api.example.com/endpoint${index + 1}`,
+        method: 'GET',
+        status: 200,
+        contentType: 'application/json',
+        size: 1024
+      })
+    })
+  })
+})

From fa229e5c4f7f2f22fb2325e2952fe5cbca118c7b Mon Sep 17 00:00:00 2001
From: Vishnu Vardhan <vishnu.p@browserstack.com>
Date: Fri, 16 Jan 2026 16:32:07 +0530
Subject: [PATCH 4/5] Code refactor

---
 .../app/src/components/workbench/network.ts   | 132 +-------------
 packages/app/src/utils/network-constants.ts   |  42 +++++
 packages/app/src/utils/network-helpers.ts     | 111 ++++++++++++
 packages/service/src/types.ts                 |  22 ++-
 .../service/tests/session-network.test.ts     | 163 -----------------
 packages/service/tests/session.test.ts        | 167 +++++++++++++++++-
 6 files changed, 349 insertions(+), 288 deletions(-)
 create mode 100644 packages/app/src/utils/network-constants.ts
 create mode 100644 packages/app/src/utils/network-helpers.ts
 delete mode 100644 packages/service/tests/session-network.test.ts

diff --git a/packages/app/src/components/workbench/network.ts b/packages/app/src/components/workbench/network.ts
index 0789485..0c7b2c6 100644
--- a/packages/app/src/components/workbench/network.ts
+++ b/packages/app/src/components/workbench/network.ts
@@ -3,132 +3,19 @@ import { html, css, nothing } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 import { networkRequestContext } from '../../controller/DataManager.js'
+import { RESOURCE_TYPES } from '../../utils/network-constants.js'
+import {
+  formatBytes,
+  formatTime,
+  getStatusClass,
+  getResourceType,
+  getFileName
+} from '../../utils/network-helpers.js'
 
 import '../placeholder.js'
 
 const COMPONENT = 'wdio-devtools-network'
 
-function formatBytes(bytes?: number): string {
-  if (!bytes || bytes === 0) {
-    return '-'
-  }
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  const size = bytes / Math.pow(k, i)
-  return size >= 10
-    ? `${size.toFixed(0)}${sizes[i]}`
-    : `${size.toFixed(1)}${sizes[i]}`
-}
-
-function formatTime(ms?: number): string {
-  if (ms === undefined || ms === null) {
-    return '-'
-  }
-  if (ms < 1) {
-    return `${ms.toFixed(2)}ms`
-  }
-  if (ms < 1000) {
-    return `${ms.toFixed(0)}ms`
-  }
-  return `${(ms / 1000).toFixed(1)}s`
-}
-
-function getStatusClass(status?: number): string {
-  if (!status) {
-    return 'text-gray-500'
-  }
-  if (status >= 200 && status < 300) {
-    return 'text-green-500'
-  }
-  if (status >= 300 && status < 400) {
-    return 'text-yellow-500'
-  }
-  if (status >= 400) {
-    return 'text-red-500'
-  }
-  return 'text-gray-500'
-}
-
-function getResourceType(request: NetworkRequest): string {
-  const url = request.url.toLowerCase()
-  const contentType =
-    request.responseHeaders?.['content-type']?.toLowerCase() || ''
-
-  // Check by content-type first
-  if (contentType.includes('text/html')) {
-    return 'HTML'
-  }
-  if (contentType.includes('text/css')) {
-    return 'CSS'
-  }
-  if (
-    contentType.includes('javascript') ||
-    contentType.includes('ecmascript')
-  ) {
-    return 'JS'
-  }
-  if (contentType.includes('image/')) {
-    return 'Image'
-  }
-  if (contentType.includes('font/') || contentType.includes('woff')) {
-    return 'Font'
-  }
-  if (contentType.includes('application/json')) {
-    return 'Fetch'
-  }
-
-  // Fallback to URL extension
-  if (url.endsWith('.html') || url.endsWith('.htm')) {
-    return 'HTML'
-  }
-  if (url.endsWith('.css')) {
-    return 'CSS'
-  }
-  if (url.endsWith('.js') || url.endsWith('.mjs')) {
-    return 'JS'
-  }
-  if (url.match(/\.(png|jpg|jpeg|gif|svg|webp|ico)$/)) {
-    return 'Image'
-  }
-  if (url.match(/\.(woff|woff2|ttf|eot|otf)$/)) {
-    return 'Font'
-  }
-
-  // Check by request type
-  if (request.type === 'fetch' || request.method !== 'GET') {
-    return 'Fetch'
-  }
-
-  return 'Other'
-}
-
-function getFileName(url: string): string {
-  if (!url || url === '' || url === 'event') {
-    return '-'
-  }
-
-  try {
-    const urlObj = new URL(url)
-    const pathname = urlObj.pathname
-    const parts = pathname.split('/').filter(Boolean)
-    const fileName = parts[parts.length - 1]
-
-    // If there's a query string and no filename, show the host + path
-    if (!fileName || fileName === '' || pathname === '/') {
-      if (urlObj.search) {
-        return `${urlObj.hostname}${pathname.length > 1 ? pathname : ''}`
-      }
-      return urlObj.hostname
-    }
-
-    return fileName
-  } catch {
-    // If URL parsing fails, return a cleaned version
-    return url.slice(0, 50)
-  }
-}
-
 @customElement(COMPONENT)
 export class DevtoolsNetwork extends Element {
   @consume({ context: networkRequestContext, subscribe: true })
@@ -407,7 +294,6 @@ export class DevtoolsNetwork extends Element {
 
   render() {
     const filteredRequests = this.#filterRequests()
-    const resourceTypes = ['All', 'Fetch', 'HTML', 'JS', 'CSS', 'Font', 'Image']
 
     if (!this.networkRequests || this.networkRequests.length === 0) {
       return html`
@@ -430,7 +316,7 @@ export class DevtoolsNetwork extends Element {
             (this.searchQuery = (e.target as HTMLInputElement).value)}"
         />
         <div class="filter-tabs">
-          ${resourceTypes.map(
+          ${RESOURCE_TYPES.map(
             (type) => html`
               <button
                 class="filter-tab ${this.filterType === type ? 'active' : ''}"
diff --git a/packages/app/src/utils/network-constants.ts b/packages/app/src/utils/network-constants.ts
new file mode 100644
index 0000000..aef621e
--- /dev/null
+++ b/packages/app/src/utils/network-constants.ts
@@ -0,0 +1,42 @@
+/**
+ * Resource type patterns for network request classification
+ */
+export const RESOURCE_TYPE_PATTERNS = {
+  HTML: {
+    contentTypes: ['text/html'],
+    extensions: ['.html', '.htm']
+  },
+  CSS: {
+    contentTypes: ['text/css'],
+    extensions: ['.css']
+  },
+  JS: {
+    contentTypes: ['javascript', 'ecmascript'],
+    extensions: ['.js', '.mjs']
+  },
+  Image: {
+    contentTypes: ['image/'],
+    extensions: ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.ico']
+  },
+  Font: {
+    contentTypes: ['font/', 'woff'],
+    extensions: ['.woff', '.woff2', '.ttf', '.eot', '.otf']
+  },
+  Fetch: {
+    contentTypes: ['application/json'],
+    extensions: []
+  }
+} as const
+
+/**
+ * Available resource types for filtering
+ */
+export const RESOURCE_TYPES = [
+  'All',
+  'Fetch',
+  'HTML',
+  'JS',
+  'CSS',
+  'Font',
+  'Image'
+] as const
diff --git a/packages/app/src/utils/network-helpers.ts b/packages/app/src/utils/network-helpers.ts
new file mode 100644
index 0000000..d3e720b
--- /dev/null
+++ b/packages/app/src/utils/network-helpers.ts
@@ -0,0 +1,111 @@
+import { RESOURCE_TYPE_PATTERNS } from './network-constants.js'
+
+/**
+ * Format bytes to human-readable format
+ */
+export function formatBytes(bytes?: number): string {
+  if (!bytes || bytes === 0) {
+    return '-'
+  }
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  const size = bytes / Math.pow(k, i)
+  return size >= 10
+    ? `${size.toFixed(0)}${sizes[i]}`
+    : `${size.toFixed(1)}${sizes[i]}`
+}
+
+/**
+ * Format milliseconds to human-readable format
+ */
+export function formatTime(ms?: number): string {
+  if (ms === undefined || ms === null) {
+    return '-'
+  }
+  if (ms < 1) {
+    return `${ms.toFixed(2)}ms`
+  }
+  if (ms < 1000) {
+    return `${ms.toFixed(0)}ms`
+  }
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+/**
+ * Get CSS class based on HTTP status code
+ */
+export function getStatusClass(status?: number): string {
+  if (!status) {
+    return 'text-gray-500'
+  }
+  if (status >= 200 && status < 300) {
+    return 'text-green-500'
+  }
+  if (status >= 300 && status < 400) {
+    return 'text-yellow-500'
+  }
+  if (status >= 400) {
+    return 'text-red-500'
+  }
+  return 'text-gray-500'
+}
+
+/**
+ * Determine resource type from network request
+ */
+export function getResourceType(request: NetworkRequest): string {
+  const url = request.url.toLowerCase()
+  const contentType =
+    request.responseHeaders?.['content-type']?.toLowerCase() || ''
+
+  // Check by content-type first
+  for (const [type, patterns] of Object.entries(RESOURCE_TYPE_PATTERNS)) {
+    if (patterns.contentTypes.some((ct) => contentType.includes(ct))) {
+      return type
+    }
+  }
+
+  // Fallback to URL extension
+  for (const [type, patterns] of Object.entries(RESOURCE_TYPE_PATTERNS)) {
+    if (patterns.extensions.some((ext) => url.endsWith(ext))) {
+      return type
+    }
+  }
+
+  // Check by request type
+  if (request.type === 'fetch' || request.method !== 'GET') {
+    return 'Fetch'
+  }
+
+  return 'Other'
+}
+
+/**
+ * Extract filename from URL
+ */
+export function getFileName(url: string): string {
+  if (!url || url === '' || url === 'event') {
+    return '-'
+  }
+
+  try {
+    const urlObj = new URL(url)
+    const pathname = urlObj.pathname
+    const parts = pathname.split('/').filter(Boolean)
+    const fileName = parts[parts.length - 1]
+
+    // If there's a query string and no filename, show the host + path
+    if (!fileName || fileName === '' || pathname === '/') {
+      if (urlObj.search) {
+        return `${urlObj.hostname}${pathname.length > 1 ? pathname : ''}`
+      }
+      return urlObj.hostname
+    }
+
+    return fileName
+  } catch {
+    // If URL parsing fails, return a cleaned version
+    return url.slice(0, 50)
+  }
+}
diff --git a/packages/service/src/types.ts b/packages/service/src/types.ts
index 52bb103..0c90914 100644
--- a/packages/service/src/types.ts
+++ b/packages/service/src/types.ts
@@ -25,6 +25,26 @@ export interface Metadata {
   viewport: VisualViewport
 }
 
+export interface NetworkRequest {
+  id: string
+  url: string
+  method: string
+  status?: number
+  statusText?: string
+  type: string
+  initiator?: string
+  size?: number
+  time?: number
+  requestHeaders?: Record<string, string>
+  responseHeaders?: Record<string, string>
+  requestBody?: string
+  responseBody?: string
+  timestamp: number
+  startTime: number
+  endTime?: number
+  error?: string
+}
+
 export interface TraceLog {
   mutations: TraceMutation[]
   logs: string[]
@@ -64,7 +84,7 @@ export interface ServiceOptions {
   devtoolsCapabilities?: WebdriverIO.Capabilities
 }
 
-declare module WebdriverIO {
+declare namespace WebdriverIO {
   interface ServiceOption extends ServiceOptions {}
   interface Capabilities {}
 }
diff --git a/packages/service/tests/session-network.test.ts b/packages/service/tests/session-network.test.ts
deleted file mode 100644
index 20e1a20..0000000
--- a/packages/service/tests/session-network.test.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { SessionCapturer } from '../src/session.js'
-
-describe('SessionCapturer - Network Request Capture', () => {
-  let capturer: SessionCapturer
-
-  // Helper to create request event
-  const createRequestEvent = (id: string, url: string, method = 'GET') => ({
-    request: {
-      request: id,
-      url,
-      method,
-      headers: [],
-      timings: { timeOrigin: 1000 }
-    }
-  })
-
-  // Helper to create response event
-  const createResponseEvent = (
-    id: string,
-    url: string,
-    options: {
-      status?: number
-      statusText?: string
-      contentType?: string
-      size?: number
-      timeOrigin?: number
-    } = {}
-  ) => {
-    const headers = options.contentType
-      ? [
-          {
-            name: 'Content-Type',
-            value: { type: 'string', value: options.contentType }
-          }
-        ]
-      : []
-
-    return {
-      request: { request: id },
-      response: {
-        url,
-        status: options.status ?? 200,
-        statusText: options.statusText ?? 'OK',
-        headers,
-        fromCache: false,
-        bytesReceived: options.size ?? 1024,
-        timings: { timeOrigin: options.timeOrigin ?? 1500 }
-      }
-    }
-  }
-
-  // Helper to verify request properties
-  const verifyRequest = (
-    req: any,
-    expected: {
-      url: string
-      method?: string
-      status?: number
-      contentType?: string
-      size?: number
-    }
-  ) => {
-    expect(req).toBeDefined()
-    expect(req.url).toBe(expected.url)
-    expect(req.method).toBe(expected.method ?? 'GET')
-    expect(req.status).toBe(expected.status ?? 200)
-    expect(req.statusText).toBe('OK')
-    if (expected.contentType) {
-      expect(req.responseHeaders).toBeDefined()
-      expect(req.responseHeaders?.['content-type']).toBe(expected.contentType)
-    }
-    if (expected.size) {
-      expect(req.size).toBe(expected.size)
-    }
-    expect(req.time).toBeDefined()
-    expect(typeof req.time).toBe('number')
-    expect(req.time).toBeGreaterThanOrEqual(0)
-  }
-
-  beforeEach(() => {
-    capturer = new SessionCapturer()
-  })
-
-  afterEach(() => {
-    capturer.networkRequests = []
-  })
-
-  it('should capture, merge, and filter network requests correctly', () => {
-    // Test 1: Successful request capture and merge
-    const req1 = createRequestEvent('1', 'https://api.example.com/users')
-    capturer.handleNetworkRequestStarted(req1 as any)
-
-    const res1 = createResponseEvent('1', 'https://api.example.com/users', {
-      contentType: 'application/json',
-      size: 1024
-    })
-    capturer.handleNetworkResponseCompleted(res1 as any)
-
-    expect(capturer.networkRequests).toHaveLength(1)
-    verifyRequest(capturer.networkRequests[0], {
-      url: 'https://api.example.com/users',
-      method: 'GET',
-      status: 200,
-      contentType: 'application/json',
-      size: 1024
-    })
-
-    // Test 2: Request without content-type should be filtered
-    const req2 = createRequestEvent('2', 'https://api.example.com/no-type')
-    capturer.handleNetworkRequestStarted(req2 as any)
-
-    const res2 = createResponseEvent('2', 'https://api.example.com/no-type', {})
-    capturer.handleNetworkResponseCompleted(res2 as any)
-
-    // Should still have only 1 request (the first one)
-    expect(capturer.networkRequests).toHaveLength(1)
-  })
-
-  it('should handle multiple concurrent requests', () => {
-    const endpoints = ['endpoint1', 'endpoint2', 'endpoint3']
-
-    // Start all requests
-    endpoints.forEach((endpoint, i) => {
-      const req = createRequestEvent(
-        String(i + 1),
-        `https://api.example.com/${endpoint}`
-      )
-      capturer.handleNetworkRequestStarted(req as any)
-    })
-
-    // Complete all requests
-    endpoints.forEach((endpoint, i) => {
-      const res = createResponseEvent(
-        String(i + 1),
-        `https://api.example.com/${endpoint}`,
-        { contentType: 'application/json', size: 1024 }
-      )
-      capturer.handleNetworkResponseCompleted(res as any)
-    })
-
-    expect(capturer.networkRequests).toHaveLength(3)
-
-    // Verify all URLs
-    const urls = capturer.networkRequests.map((r) => r.url)
-    expect(urls).toEqual([
-      'https://api.example.com/endpoint1',
-      'https://api.example.com/endpoint2',
-      'https://api.example.com/endpoint3'
-    ])
-
-    // Verify each request
-    capturer.networkRequests.forEach((req, index) => {
-      verifyRequest(req, {
-        url: `https://api.example.com/endpoint${index + 1}`,
-        method: 'GET',
-        status: 200,
-        contentType: 'application/json',
-        size: 1024
-      })
-    })
-  })
-})
diff --git a/packages/service/tests/session.test.ts b/packages/service/tests/session.test.ts
index a793b6e..39afd8f 100644
--- a/packages/service/tests/session.test.ts
+++ b/packages/service/tests/session.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { SessionCapturer } from '../src/session.js'
 import { WebSocket } from 'ws'
 import fs from 'node:fs/promises'
@@ -386,4 +386,169 @@ describe('SessionCapturer', () => {
       expect(mockBrowser.takeScreenshot).toHaveBeenCalledTimes(3)
     })
   })
+
+  describe('Network Request Capture', () => {
+    let capturer: SessionCapturer
+
+    // Helper to create request event
+    const createRequestEvent = (id: string, url: string, method = 'GET') => ({
+      request: {
+        request: id,
+        url,
+        method,
+        headers: [],
+        timings: { timeOrigin: 1000 }
+      }
+    })
+
+    // Helper to create response event
+    const createResponseEvent = (
+      id: string,
+      url: string,
+      options: {
+        status?: number
+        statusText?: string
+        contentType?: string
+        size?: number
+        timeOrigin?: number
+      } = {}
+    ) => {
+      const headers = options.contentType
+        ? [
+            {
+              name: 'Content-Type',
+              value: { type: 'string', value: options.contentType }
+            }
+          ]
+        : []
+
+      return {
+        request: { request: id },
+        response: {
+          url,
+          status: options.status ?? 200,
+          statusText: options.statusText ?? 'OK',
+          headers,
+          fromCache: false,
+          bytesReceived: options.size ?? 1024,
+          timings: { timeOrigin: options.timeOrigin ?? 1500 }
+        }
+      }
+    }
+
+    // Helper to verify request properties
+    const verifyRequest = (
+      req: any,
+      expected: {
+        url: string
+        method?: string
+        status?: number
+        contentType?: string
+        size?: number
+      }
+    ) => {
+      expect(req).toBeDefined()
+      expect(req.url).toBe(expected.url)
+      expect(req.method).toBe(expected.method ?? 'GET')
+      expect(req.status).toBe(expected.status ?? 200)
+      expect(req.statusText).toBe('OK')
+      if (expected.contentType) {
+        expect(req.responseHeaders).toBeDefined()
+        expect(req.responseHeaders?.['content-type']).toBe(expected.contentType)
+      }
+      if (expected.size) {
+        expect(req.size).toBe(expected.size)
+      }
+      expect(req.time).toBeDefined()
+      expect(typeof req.time).toBe('number')
+      expect(req.time).toBeGreaterThanOrEqual(0)
+    }
+
+    beforeEach(() => {
+      capturer = new SessionCapturer()
+    })
+
+    afterEach(() => {
+      capturer.networkRequests = []
+    })
+
+    it('should capture, merge, and filter network requests correctly', () => {
+      // Test 1: Successful request capture and merge
+      const req1 = createRequestEvent('1', 'https://api.example.com/users')
+      capturer.handleNetworkRequestStarted(req1 as any)
+
+      const res1 = createResponseEvent('1', 'https://api.example.com/users', {
+        contentType: 'application/json',
+        size: 1024
+      })
+      capturer.handleNetworkResponseCompleted(res1 as any)
+
+      expect(capturer.networkRequests).toHaveLength(1)
+      verifyRequest(capturer.networkRequests[0], {
+        url: 'https://api.example.com/users',
+        method: 'GET',
+        status: 200,
+        contentType: 'application/json',
+        size: 1024
+      })
+
+      // Test 2: Request without content-type should be filtered
+      const req2 = createRequestEvent('2', 'https://api.example.com/no-type')
+      capturer.handleNetworkRequestStarted(req2 as any)
+
+      const res2 = createResponseEvent(
+        '2',
+        'https://api.example.com/no-type',
+        {}
+      )
+      capturer.handleNetworkResponseCompleted(res2 as any)
+
+      // Should still have only 1 request (the first one)
+      expect(capturer.networkRequests).toHaveLength(1)
+    })
+
+    it('should handle multiple concurrent requests', () => {
+      const endpoints = ['endpoint1', 'endpoint2', 'endpoint3']
+
+      // Start all requests
+      endpoints.forEach((endpoint, i) => {
+        const req = createRequestEvent(
+          String(i + 1),
+          `https://api.example.com/${endpoint}`
+        )
+        capturer.handleNetworkRequestStarted(req as any)
+      })
+
+      // Complete all requests
+      endpoints.forEach((endpoint, i) => {
+        const res = createResponseEvent(
+          String(i + 1),
+          `https://api.example.com/${endpoint}`,
+          { contentType: 'application/json', size: 1024 }
+        )
+        capturer.handleNetworkResponseCompleted(res as any)
+      })
+
+      expect(capturer.networkRequests).toHaveLength(3)
+
+      // Verify all URLs
+      const urls = capturer.networkRequests.map((r) => r.url)
+      expect(urls).toEqual([
+        'https://api.example.com/endpoint1',
+        'https://api.example.com/endpoint2',
+        'https://api.example.com/endpoint3'
+      ])
+
+      // Verify each request
+      capturer.networkRequests.forEach((req, index) => {
+        verifyRequest(req, {
+          url: `https://api.example.com/endpoint${index + 1}`,
+          method: 'GET',
+          status: 200,
+          contentType: 'application/json',
+          size: 1024
+        })
+      })
+    })
+  })
 })

From 765a76a5be97d61e0e96d567c9fdd1c08c50d736 Mon Sep 17 00:00:00 2001
From: Vishnu Vardhan <vishnu.p@browserstack.com>
Date: Fri, 16 Jan 2026 16:47:33 +0530
Subject: [PATCH 5/5] Code refactor

---
 .../script/src/collectors/networkRequests.ts  | 21 +----------------
 packages/script/types.d.ts                    | 23 +++++++++++++++++--
 packages/service/src/types.ts                 | 20 ----------------
 3 files changed, 22 insertions(+), 42 deletions(-)

diff --git a/packages/script/src/collectors/networkRequests.ts b/packages/script/src/collectors/networkRequests.ts
index 21d8073..42a91a4 100644
--- a/packages/script/src/collectors/networkRequests.ts
+++ b/packages/script/src/collectors/networkRequests.ts
@@ -1,24 +1,5 @@
 import type { Collector } from './collector.js'
-
-export interface NetworkRequest {
-  id: string
-  url: string
-  method: string
-  status?: number
-  statusText?: string
-  type: string
-  initiator?: string
-  size?: number
-  time?: number
-  requestHeaders?: Record<string, string>
-  responseHeaders?: Record<string, string>
-  requestBody?: string
-  responseBody?: string
-  timestamp: number
-  startTime: number
-  endTime?: number
-  error?: string
-}
+import type { NetworkRequest } from '../../types.js'
 
 export class NetworkRequestCollector implements Collector<NetworkRequest> {
   #requests: NetworkRequest[] = []
diff --git a/packages/script/types.d.ts b/packages/script/types.d.ts
index 434d38b..04b3244 100644
--- a/packages/script/types.d.ts
+++ b/packages/script/types.d.ts
@@ -1,6 +1,25 @@
 import type { DataCollectorType } from './src/collector.ts'
 import type { ConsoleLog as ConsoleLogImport } from './src/collectors/consoleLogs.ts'
-import type { NetworkRequest as NetworkRequestImport } from './src/collectors/networkRequests.ts'
+
+export interface NetworkRequest {
+  id: string
+  url: string
+  method: string
+  status?: number
+  statusText?: string
+  type: string
+  initiator?: string
+  size?: number
+  time?: number
+  requestHeaders?: Record<string, string>
+  responseHeaders?: Record<string, string>
+  requestBody?: string
+  responseBody?: string
+  timestamp: number
+  startTime: number
+  endTime?: number
+  error?: string
+}
 
 export interface TraceMetadata {
   url: string
@@ -16,7 +35,7 @@ export interface SimplifiedVNode {
 
 declare global {
   type ConsoleLogs = ConsoleLogImport
-  type NetworkRequest = NetworkRequestImport
+  type NetworkRequest = NetworkRequest
 
   interface Element {
     'wdio-ref': string
diff --git a/packages/service/src/types.ts b/packages/service/src/types.ts
index 0c90914..02c99f9 100644
--- a/packages/service/src/types.ts
+++ b/packages/service/src/types.ts
@@ -25,26 +25,6 @@ export interface Metadata {
   viewport: VisualViewport
 }
 
-export interface NetworkRequest {
-  id: string
-  url: string
-  method: string
-  status?: number
-  statusText?: string
-  type: string
-  initiator?: string
-  size?: number
-  time?: number
-  requestHeaders?: Record<string, string>
-  responseHeaders?: Record<string, string>
-  requestBody?: string
-  responseBody?: string
-  timestamp: number
-  startTime: number
-  endTime?: number
-  error?: string
-}
-
 export interface TraceLog {
   mutations: TraceMutation[]
   logs: string[]