Removed duplicates when importing trace file

Author: vishnuv688

packages/app/src/components/sidebar/explorer.ts

@@ -3,7 +3,7 @@ import { html, css, nothing, type TemplateResult } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 import type { TestStats, SuiteStats } from '@wdio/reporter'
-
+import { repeat } from 'lit/directives/repeat.js'
 import { TestState } from './test-suite.js'
 import { suiteContext } from '../../controller/DataManager.js'
 
@@ -20,6 +20,7 @@ import type { DevtoolsSidebarFilter } from './filter.js'
 const EXPLORER = 'wdio-devtools-sidebar-explorer'
 
 interface TestEntry {
+  uid: string
   state?: string
   label: string
   children: TestEntry[]
@@ -53,10 +54,16 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     return html`
       <wdio-test-entry state="${entry.state as any}">
         <label slot="label">${entry.label}</label>
-        ${entry.children && entry.children.length ?
-          html`
-            <wdio-test-suite slot="children">${entry.children.map(this.#renderEntry.bind(this))}</wdio-test-suite>
-          `
+        ${entry.children && entry.children.length
+          ? html`
+              <wdio-test-suite slot="children">
+                ${repeat(
+                  entry.children,
+                  child => child.uid,
+                  child => this.#renderEntry(child)
+                )}
+              </wdio-test-suite>
+            `
           : nothing
         }
       </wdio-test-entry>
@@ -88,6 +95,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     if ('tests' in entry) {
       const entries = [...entry.tests, ...entry.suites]
       return {
+        uid: entry.uid,
         label: entry.title,
         state: entry.tests.some((t) => !t.end)
           ? TestState.RUNNING
@@ -100,6 +108,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       }
     }
     return {
+      uid: entry.uid,
       label: entry.title,
       state: !entry.end
         ? TestState.RUNNING
@@ -114,7 +123,18 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     if (!this.suites) {
       return
     }
-    const suites = Object.values(this.suites[0])
+
+    // ✅ Only root suites (no parent = true top-level suite)
+    const rootSuites = this.suites
+      .flatMap(s => Object.values(s))
+      .filter(suite => !suite.parent)
+
+    // Deduplicate by uid (in case some frameworks still push duplicates)
+    const uniqueSuites = Array.from(
+      new Map(rootSuites.map(suite => [suite.uid, suite])).values()
+    )
+
+    const suites = uniqueSuites
       .map(this.#getTestEntry.bind(this))
       .filter(this.#filterEntry.bind(this))
 
@@ -132,7 +152,11 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       </header>
       <wdio-test-suite>
         ${suites.length
-          ? suites.map(this.#renderEntry.bind(this))
+          ? repeat(
+              suites,
+              suite => suite.uid,
+              suite => this.#renderEntry(suite)
+            )
           : html`<p class="text-disabledForeground text-sm px-4 py-2">No tests found</p>`
         }
       </wdio-test-suite>

packages/app/src/components/workbench/actions.ts

@@ -76,13 +76,17 @@ export class DevtoolsActions extends Element {
     const allSuites = this.suites ? Object.values(this.suites).flatMap(s => Object.values(s)) : []
     const allItems = this._getActionItems(allSuites)
 
-    if (allItems.length === 0) {
+    // Remove duplicates based on uid
+    // Assuming each TestStats has a unique 'uid' property
+    const uniqueItems = Array.from(new Map(allItems.map(item => [item.uid, item])).values())
+
+    if (uniqueItems.length === 0) {
       return html`<wdio-devtools-placeholder>No actions recorded.</wdio-devtools-placeholder>`
     }
 
     return html`
       <div class="action-list">
-        ${allItems.map(item => this._renderStep(item as TestStats))}
+        ${uniqueItems.map(item => this._renderStep(item as TestStats))}
       </div>
     `
   }

packages/service/src/index.ts

@@ -112,7 +112,6 @@ export default class DevToolsHookService implements Services.ServiceInstance {
         if (isMultiRemote) {
             throw new SevereServiceError('The DevTools hook does not support multiremote yet')
         }
-        // this.#sessionCapturer.readStepDefinitions(config)
 
         if ('reporters' in config) {
             const self = this