diff --git a/example/features/step-definitions/steps.ts b/example/features/step-definitions/steps.ts index 2a386b0..3252298 100644 --- a/example/features/step-definitions/steps.ts +++ b/example/features/step-definitions/steps.ts @@ -13,16 +13,22 @@ After(async () => { }) Given(/^I am on the (\w+) page$/, async (page: keyof typeof pages) => { + console.log(`[TEST] Navigating to ${page} page`) await pages[page].open() + console.log(`[TEST] Successfully opened ${page} page`) }) When(/^I login with (\w+) and (.+)$/, async (username, password) => { + console.log(`[TEST] Attempting login with username: ${username}`) await LoginPage.login(username, password) + console.info(`[TEST] Login submitted for user: ${username}`) }) Then(/^I should see a flash message saying (.*)$/, async (message) => { + console.log(`[TEST] Verifying flash message: ${message}`) const el = await SecurePage.flashAlert await expect(el).toBeExisting() await expect(el).toHaveText(expect.stringContaining(message)) + console.log('[TEST] Flash message verified successfully') // await browser.pause(15000) }) diff --git a/packages/app/src/components/tabs.ts b/packages/app/src/components/tabs.ts index 4a5ca62..b49c863 100644 --- a/packages/app/src/components/tabs.ts +++ b/packages/app/src/components/tabs.ts @@ -7,6 +7,7 @@ const TABS_COMPONENT = 'wdio-devtools-tabs' export class DevtoolsTabs extends Element { #activeTab: string | undefined #tabList: string[] = [] + #badgeCheckInterval?: number @property({ type: String }) cacheId?: string @@ -27,15 +28,28 @@ export class DevtoolsTabs extends Element { ] #getTabButton(tabId: string) { + const tabElement = this.tabs.find( + (el) => el.getAttribute('label') === tabId + ) + const badge = (tabElement as any)?.badge + const showBadge = badge && badge > 0 + return html` ` } @@ -112,9 +126,21 @@ export class DevtoolsTabs extends Element { } this.requestUpdate() + + // Check for badge changes periodically + this.#badgeCheckInterval = window.setInterval(() => { + this.requestUpdate() + }, 250) }) } + disconnectedCallback() { + super.disconnectedCallback() + if (this.#badgeCheckInterval) { + clearInterval(this.#badgeCheckInterval) + } + } + render() { return html` ${this.#tabList.length @@ -133,6 +159,9 @@ export class DevtoolsTabs extends Element { const TAB_COMPONENT = 'wdio-devtools-tab' @customElement(TAB_COMPONENT) export class DevtoolsTab extends Element { + @property({ type: Number }) + badge?: number + static styles = [ ...Element.styles, css` diff --git a/packages/app/src/components/workbench.ts b/packages/app/src/components/workbench.ts index d0e64d2..afbd6b4 100644 --- a/packages/app/src/components/workbench.ts +++ b/packages/app/src/components/workbench.ts @@ -1,8 +1,10 @@ import { Element } from '@core/element' import { html, css, nothing } from 'lit' -import { customElement, query } from 'lit/decorators.js' +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 '~icons/mdi/arrow-collapse-down.js' import '~icons/mdi/arrow-collapse-up.js' @@ -28,6 +30,10 @@ export class DevtoolsWorkbench extends Element { #workbenchSidebarCollapsed = localStorage.getItem('workbenchSidebar') === 'true' + @consume({ context: consoleLogContext, subscribe: true }) + @state() + consoleLogs: ConsoleLogs[] | undefined = undefined + static styles = [ ...Element.styles, css` @@ -186,8 +192,13 @@ export class DevtoolsWorkbench extends Element { - - + +
= { - warn: 'editorOverviewRulerWarningForeground', - info: 'editorOverviewRulerInfoForeground', - error: 'editorOverviewRulerErrorForeground', - log: 'panelBorder' +const LOG_ICONS: Record = { + log: '📄', + info: 'ℹī¸', + warn: '⚠ī¸', + error: '❌' } const SOURCE_COMPONENT = 'wdio-devtools-console-logs' @@ -23,11 +20,122 @@ export class DevtoolsConsoleLogs extends Element { css` :host { display: flex; - width: 100%; - height: 100%; + flex: 1; flex-direction: column; - padding: 5px; - min-height: 200px; + background-color: var(--vscode-editor-background); + min-height: 0; + position: relative; + } + + .console-container { + flex: 1; + overflow-y: auto; + font-family: + 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, + 'Courier New', monospace; + font-size: 13px; + line-height: 1.6; + } + + .log-entry { + display: flex; + align-items: flex-start; + padding: 2px 8px; + border-bottom: 1px solid rgba(128, 128, 128, 0.05); + min-height: 22px; + } + + .log-entry:hover { + background-color: rgba(255, 255, 255, 0.02); + } + + .log-entry.log-type-error { + background-color: rgba(244, 135, 113, 0.03); + } + + .log-entry.log-type-warn { + background-color: rgba(205, 151, 49, 0.03); + } + + .log-entry.log-type-info { + background-color: rgba(14, 99, 156, 0.03); + } + + .log-time, + .log-icon { + flex-shrink: 0; + } + + .log-time { + width: 45px; + text-align: right; + margin-right: 12px; + font-size: 11px; + opacity: 0.5; + user-select: none; + color: var(--vscode-editorLineNumber-foreground); + line-height: 18px; + } + + .log-icon { + margin-right: 8px; + font-size: 14px; + line-height: 18px; + } + + .log-prefix { + flex-shrink: 0; + color: var(--vscode-foreground); + opacity: 0.8; + margin-right: 4px; + } + + .log-content { + flex: 1; + min-width: 0; + word-break: break-word; + line-height: 18px; + display: flex; + align-items: baseline; + } + + .log-message { + color: var(--vscode-foreground); + white-space: pre-wrap; + word-break: break-word; + } + + .log-entry.log-type-error .log-message { + color: #f48771; + } + + .log-entry.log-type-warn .log-message { + color: #cd9731; + } + + .log-entry.log-type-info .log-message { + color: #75beff; + } + + .empty-state { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 12px; + color: var(--vscode-descriptionForeground); + } + + .empty-state-icon { + font-size: 48px; + opacity: 0.3; + } + + .empty-state-text { + font-size: 14px; + opacity: 0.6; } ` ] @@ -35,34 +143,79 @@ export class DevtoolsConsoleLogs extends Element { @consume({ context: consoleLogContext, subscribe: true }) logs: ConsoleLogs[] | undefined = undefined + get logCount(): number { + return this.logs?.length || 0 + } + + #startTime?: number + + #formatElapsedTime(timestamp: number): string { + if (this.#startTime === undefined) { + this.#startTime = this.logs?.[0]?.timestamp ?? timestamp + } + const elapsed = (timestamp - this.#startTime!) / 1000 + return `${elapsed.toFixed(1)}s` + } + + #formatArgs(args: any[]): string { + if (Array.isArray(args)) { + return args + .map((arg) => { + if (typeof arg === 'string') { + return arg + } + try { + return JSON.stringify(arg, null, 2) + } catch { + return String(arg) + } + }) + .join(' ') + } + return String(args) + } + render() { - if (!this.logs) { - return html`` + if (!this.logs || this.logs.length === 0) { + return html` +
+
📋
+
No console logs captured yet
+
+ ` } - const logs = this.logs.length === 0 ? [{ args: '' }] : this.logs + if (this.logs.length === 0) { + return html` +
+
📋
+
No console logs captured yet
+
+ ` + } return html` - ${Object.values(logs).map( - (log: any) => html` -
-
- - ${log.type - ? html`${log.type}` +
+ ${this.logs.map((log: any) => { + const icon = LOG_ICONS[log.type] || LOG_ICONS.log + return html` +
+ ${log.timestamp + ? html`
+ ${this.#formatElapsedTime(log.timestamp)} +
` : nothing} -
-
${log.args}
-
- ` - )} +
${icon}
+
+ ${log.source === 'test' + ? html`>>>` + : nothing} + ${this.#formatArgs(log.args)} +
+ + ` + })} + ` } } diff --git a/packages/script/src/collectors/consoleLogs.ts b/packages/script/src/collectors/consoleLogs.ts index 6443f5c..d8b6f64 100644 --- a/packages/script/src/collectors/consoleLogs.ts +++ b/packages/script/src/collectors/consoleLogs.ts @@ -5,6 +5,7 @@ export interface ConsoleLogs { type: 'log' | 'info' | 'warn' | 'error' args: any[] timestamp: number + source?: 'browser' | 'test' } export class ConsoleLogCollector implements Collector { diff --git a/packages/service/src/constants.ts b/packages/service/src/constants.ts index cd7be9c..0c4704b 100644 --- a/packages/service/src/constants.ts +++ b/packages/service/src/constants.ts @@ -1,7 +1,8 @@ export const PAGE_TRANSITION_COMMANDS: string[] = [ 'url', 'navigateTo', - 'elementClick' + 'elementClick', + 'click' ] export const DEFAULT_LAUNCH_CAPS: WebdriverIO.Capabilities = { diff --git a/packages/service/src/index.ts b/packages/service/src/index.ts index 947fef9..ff2b0c7 100644 --- a/packages/service/src/index.ts +++ b/packages/service/src/index.ts @@ -333,6 +333,9 @@ export default class DevToolsHookService implements Services.ServiceInstance { ) await fs.writeFile(traceFilePath, JSON.stringify(traceLog)) log.info(`DevTools trace saved to ${traceFilePath}`) + + // Clean up console patching + this.#sessionCapturer.cleanup() } /** diff --git a/packages/service/src/session.ts b/packages/service/src/session.ts index c2043ba..82f79d8 100644 --- a/packages/service/src/session.ts +++ b/packages/service/src/session.ts @@ -17,6 +17,12 @@ const log = logger('@wdio/devtools-service:SessionCapturer') export class SessionCapturer { #ws: WebSocket | undefined #isInjected = false + #originalConsoleMethods: { + log: typeof console.log + info: typeof console.info + warn: typeof console.warn + error: typeof console.error + } commandsLog: CommandLog[] = [] sources = new Map() mutations: TraceMutation[] = [] @@ -37,6 +43,60 @@ export class SessionCapturer { ) ) } + + // Store original console methods + this.#originalConsoleMethods = { + log: console.log, + info: console.info, + warn: console.warn, + error: console.error + } + + // Patch console methods to capture test logs + this.#patchConsole() + } + + #patchConsole() { + const consoleMethods = ['log', 'info', 'warn', 'error'] as const + + consoleMethods.forEach((method) => { + const originalMethod = this.#originalConsoleMethods[method] + console[method] = (...args: any[]) => { + const logEntry: ConsoleLogs = { + timestamp: Date.now(), + type: method, + args: args.map((arg) => + typeof arg === 'object' && arg !== null + ? (() => { + try { + return JSON.stringify(arg) + } catch { + return String(arg) + } + })() + : String(arg) + ), + source: 'test' + } + this.consoleLogs.push(logEntry) + this.sendUpstream('consoleLogs', [logEntry]) + return originalMethod.apply(console, args) + } + }) + } + + #restoreConsole() { + console.log = this.#originalConsoleMethods.log + console.info = this.#originalConsoleMethods.info + console.warn = this.#originalConsoleMethods.warn + console.error = this.#originalConsoleMethods.error + } + + cleanup() { + this.#restoreConsole() + if (this.#ws) { + this.#ws.close() + } } get isReportingUpstream() { @@ -173,8 +233,10 @@ export class SessionCapturer { this.sendUpstream('logs', traceLogs) } if (Array.isArray(consoleLogs)) { - this.consoleLogs.push(...(consoleLogs as ConsoleLogs[])) - this.sendUpstream('consoleLogs', consoleLogs) + const browserLogs = consoleLogs as ConsoleLogs[] + browserLogs.forEach((log) => (log.source = 'browser')) + this.consoleLogs.push(...browserLogs) + this.sendUpstream('consoleLogs', browserLogs) } this.sendUpstream('metadata', metadata) diff --git a/packages/service/tests/session.test.ts b/packages/service/tests/session.test.ts index 6aa3630..a793b6e 100644 --- a/packages/service/tests/session.test.ts +++ b/packages/service/tests/session.test.ts @@ -189,6 +189,181 @@ describe('SessionCapturer', () => { }) }) + describe('console log capture', () => { + /** + * Test: All console methods (log, info, warn, error) are properly captured + * Validates: method type, arguments, source attribution, and timestamp + */ + it('should capture all console methods from test code', () => { + const capturer = new SessionCapturer() + const initialLength = capturer.consoleLogs.length + + // Execute all console methods with different argument patterns + console.log('Log message') + console.info('Info message', 'with multiple', 'arguments') + console.warn('Warning message') + console.error('Error message') + + // Verify all 4 logs were captured + expect(capturer.consoleLogs).toHaveLength(initialLength + 4) + + // Validate console.log capture + const logEntry = capturer.consoleLogs[initialLength] + expect(logEntry.type).toBe('log') + expect(logEntry.args).toEqual(['Log message']) + expect(logEntry.source).toBe('test') + expect(logEntry.timestamp).toBeDefined() + + // Validate console.info capture with multiple arguments + const infoEntry = capturer.consoleLogs[initialLength + 1] + expect(infoEntry.type).toBe('info') + expect(infoEntry.args).toEqual([ + 'Info message', + 'with multiple', + 'arguments' + ]) + expect(infoEntry.source).toBe('test') + + // Validate console.warn capture + const warnEntry = capturer.consoleLogs[initialLength + 2] + expect(warnEntry.type).toBe('warn') + expect(warnEntry.args).toEqual(['Warning message']) + expect(warnEntry.source).toBe('test') + + // Validate console.error capture + const errorEntry = capturer.consoleLogs[initialLength + 3] + expect(errorEntry.type).toBe('error') + expect(errorEntry.args).toEqual(['Error message']) + expect(errorEntry.source).toBe('test') + }) + + /** + * Test: Complex argument types are handled correctly + * Validates: object serialization, circular reference handling, null/undefined conversion + */ + it('should handle various argument types', () => { + const capturer = new SessionCapturer() + const initialLength = capturer.consoleLogs.length + + // Create test data: object, circular reference + const testObject = { foo: 'bar', nested: { value: 42 } } + const circular: any = { a: 1 } + circular.self = circular + + // Log various argument types in sequence + console.log('Object:', testObject) + console.log('Circular:', circular) + console.log('Values:', null, undefined) + + expect(capturer.consoleLogs).toHaveLength(initialLength + 3) + + // Verify object is stringified to JSON + const objLog = capturer.consoleLogs[initialLength] + expect(objLog.args[0]).toBe('Object:') + expect(objLog.args[1]).toBe(JSON.stringify(testObject)) + + // Verify circular references don't crash and fallback to [object Object] + const circularLog = capturer.consoleLogs[initialLength + 1] + expect(circularLog.args[1]).toBe('[object Object]') + + // Verify null and undefined are converted to strings + const nullLog = capturer.consoleLogs[initialLength + 2] + expect(nullLog.args).toEqual(['Values:', 'null', 'undefined']) + }) + + /** + * Test: Integration scenarios - cleanup, WebSocket transmission, browser source attribution + * Validates: console restoration on cleanup, upstream WebSocket communication, source distinction + */ + it('should handle cleanup, upstream transmission, and browser source attribution', async () => { + // Part 1: Test console restoration on cleanup + const originalLog = console.log + const originalInfo = console.info + const originalWarn = console.warn + const originalError = console.error + + let capturer = new SessionCapturer() + expect(console.log).not.toBe(originalLog) + + capturer.cleanup() + expect(console.log).toBe(originalLog) + expect(console.info).toBe(originalInfo) + expect(console.warn).toBe(originalWarn) + expect(console.error).toBe(originalError) + + // Part 2: Test WebSocket upstream transmission + const mockWs = { + readyState: WebSocket.OPEN, + send: vi.fn(), + on: vi.fn(), + close: vi.fn() + } + + vi.mocked(WebSocket).mockImplementation(function (this: any) { + return mockWs + } as any) + + capturer = new SessionCapturer({ + hostname: 'localhost', + port: 3000 + }) + + console.log('Test message') + + expect(mockWs.send).toHaveBeenCalled() + const sentData = JSON.parse( + mockWs.send.mock.calls[mockWs.send.mock.calls.length - 1][0] + ) + expect(sentData.scope).toBe('consoleLogs') + expect(sentData.data).toHaveLength(1) + expect(sentData.data[0].args).toEqual(['Test message']) + expect(sentData.data[0].source).toBe('test') + + capturer.cleanup() + + // Part 3: Test browser console logs source attribution + capturer = new SessionCapturer() + const mockBrowserLogs = [ + { + timestamp: Date.now(), + type: 'log' as const, + args: ['Browser log 1'] + }, + { + timestamp: Date.now(), + type: 'warn' as const, + args: ['Browser warning'] + } + ] + + const mockExecuteResult = { + mutations: [], + traceLogs: [], + consoleLogs: mockBrowserLogs, + metadata: { url: 'http://test.com', viewport: {} as VisualViewport } + } + + mockBrowser.execute = vi.fn().mockResolvedValue(mockExecuteResult) + mockBrowser.scriptAddPreloadScript = vi.fn().mockResolvedValue(undefined) + mockBrowser.isBidi = true + await capturer.injectScript(mockBrowser) + await capturer.afterCommand( + mockBrowser, + 'url' as any, + ['http://test.com'], + undefined, + undefined + ) + + const browserLogs = capturer.consoleLogs.filter( + (log) => log.source === 'browser' + ) + expect(browserLogs).toHaveLength(2) + expect(browserLogs[0].source).toBe('browser') + expect(browserLogs[1].source).toBe('browser') + }) + }) + describe('integration', () => { it('should handle complete session capture workflow', async () => { const capturer = new SessionCapturer()