diff --git a/playwriter/src/extension/cdp-relay.ts b/playwriter/src/extension/cdp-relay.ts index 905f084..d34900b 100644 --- a/playwriter/src/extension/cdp-relay.ts +++ b/playwriter/src/extension/cdp-relay.ts @@ -29,7 +29,54 @@ export async function startRelayServer({ port = 9988 }: { port?: number } = {}) }>() let extensionMessageId = 0 - function sendToPlaywright(message: CDPResponse | CDPEvent, source: 'extension' | 'server' = 'extension') { + function logCdpMessage({ + direction, + method, + sessionId, + params, + id, + source + }: { + direction: 'to-playwright' | 'from-playwright' | 'from-extension' + method: string + sessionId?: string + params?: any + id?: number + source?: 'extension' | 'server' + }) { + const details: string[] = [] + + if (id !== undefined) { + details.push(`id=${id}`) + } + + if (sessionId) { + details.push(`sessionId=${sessionId}`) + } + + if (params) { + if (params.targetId) { + details.push(`targetId=${params.targetId}`) + } + if (params.sessionId && params.sessionId !== sessionId) { + details.push(`sessionIdParam=${params.sessionId}`) + } + } + + const detailsStr = details.length > 0 ? ` ${chalk.gray(details.join(', '))}` : '' + + if (direction === 'from-playwright') { + console.log(chalk.cyan('← Playwright:'), method + detailsStr) + } else if (direction === 'from-extension') { + console.log(chalk.yellow('← Extension:'), method + detailsStr) + } else if (direction === 'to-playwright') { + const color = source === 'server' ? chalk.magenta : chalk.green + const sourceLabel = source === 'server' ? chalk.gray(' (server-generated)') : '' + console.log(color('→ Playwright:'), method + detailsStr + sourceLabel) + } + } + + function sendToPlaywright({ message, source = 'extension' }: { message: CDPResponse | CDPEvent; source?: 'extension' | 'server' }) { if (!playwrightWs) { return } @@ -39,8 +86,13 @@ export async function startRelayServer({ port = 9988 }: { port?: number } = {}) : message if ('method' in message) { - const color = source === 'server' ? chalk.magenta : chalk.green - console.log(color('→ Playwright:'), message.method, source === 'server' ? chalk.gray('(server-generated)') : '') + logCdpMessage({ + direction: 'to-playwright', + method: message.method, + sessionId: 'sessionId' in message ? message.sessionId : undefined, + params: 'params' in message ? message.params : undefined, + source + }) } playwrightWs.send(JSON.stringify(messageToSend)) @@ -53,7 +105,7 @@ export async function startRelayServer({ port = 9988 }: { port?: number } = {}) const id = ++extensionMessageId const message = { id, method, params } - + extensionWs.send(JSON.stringify(message)) return new Promise((resolve, reject) => { @@ -155,15 +207,22 @@ export async function startRelayServer({ port = 9988 }: { port?: number } = {}) return } - console.log(chalk.cyan('← Playwright:'), `${message.method} (id=${message.id})`) - const { id, sessionId, method, params } = message + logCdpMessage({ + direction: 'from-playwright', + method, + sessionId, + id + }) + if (!extensionWs) { sendToPlaywright({ - id, - sessionId, - error: { message: 'Extension not connected' } + message: { + id, + sessionId, + error: { message: 'Extension not connected' } + } }) return } @@ -174,26 +233,31 @@ export async function startRelayServer({ port = 9988 }: { port?: number } = {}) if (method === 'Target.setAutoAttach' && !sessionId) { for (const target of connectedTargets.values()) { sendToPlaywright({ - method: 'Target.attachedToTarget', - params: { - sessionId: target.sessionId, - targetInfo: { - ...target.targetInfo, - attached: true - }, - waitingForDebugger: false - } - } satisfies CDPEvent, 'server') + message: { + method: 'Target.attachedToTarget', + params: { + sessionId: target.sessionId, + targetInfo: { + ...target.targetInfo, + attached: true + }, + waitingForDebugger: false + } + } satisfies CDPEvent, + source: 'server' + }) } } - sendToPlaywright({ id, sessionId, result }) + sendToPlaywright({ message: { id, sessionId, result } }) } catch (e) { console.error('Error handling CDP command:', e) sendToPlaywright({ - id, - sessionId, - error: { message: (e as Error).message } + message: { + id, + sessionId, + error: { message: (e as Error).message } + } }) } }, @@ -251,14 +315,19 @@ export async function startRelayServer({ port = 9988 }: { port?: number } = {}) } } else { const extensionEvent = message as ExtensionEventMessage - + if (extensionEvent.method !== 'forwardCDPEvent') { return } const { method, params, sessionId } = extensionEvent.params - console.log(chalk.yellow('← Extension:'), method) + logCdpMessage({ + direction: 'from-extension', + method, + sessionId, + params + }) if (method === 'Target.attachedToTarget') { const targetParams = params as Protocol.Target.AttachedToTargetEvent @@ -269,23 +338,32 @@ export async function startRelayServer({ port = 9988 }: { port?: number } = {}) }) sendToPlaywright({ - method: 'Target.attachedToTarget', - params: targetParams - } as CDPEvent, 'extension') + message: { + method: 'Target.attachedToTarget', + params: targetParams + } as CDPEvent, + source: 'extension' + }) } else if (method === 'Target.detachedFromTarget') { const detachParams = params as Protocol.Target.DetachedFromTargetEvent connectedTargets.delete(detachParams.sessionId) sendToPlaywright({ - method: 'Target.detachedFromTarget', - params: detachParams - } as CDPEvent, 'extension') + message: { + method: 'Target.detachedFromTarget', + params: detachParams + } as CDPEvent, + source: 'extension' + }) } else { sendToPlaywright({ - sessionId, - method, - params - } as CDPEvent, 'extension') + message: { + sessionId, + method, + params + } as CDPEvent, + source: 'extension' + }) } } },