chore: include page errors in console messages (#671)

Fixes https://github.com/microsoft/playwright-mcp/issues/669
This commit is contained in:
Pavel Feldman 2025-07-15 15:46:09 -07:00 committed by GitHub
parent be8adb1866
commit a5a57df105
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 68 additions and 15 deletions

View File

@ -17,14 +17,14 @@
import * as playwright from 'playwright';
import { PageSnapshot } from './pageSnapshot.js';
import { callOnPageNoTrace } from './tools/utils.js';
import type { Context } from './context.js';
import { callOnPageNoTrace } from './tools/utils.js';
export class Tab {
readonly context: Context;
readonly page: playwright.Page;
private _consoleMessages: playwright.ConsoleMessage[] = [];
private _consoleMessages: ConsoleMessage[] = [];
private _requests: Map<playwright.Request, playwright.Response | null> = new Map();
private _snapshot: PageSnapshot | undefined;
private _onPageClose: (tab: Tab) => void;
@ -33,7 +33,8 @@ export class Tab {
this.context = context;
this.page = page;
this._onPageClose = onPageClose;
page.on('console', event => this._consoleMessages.push(event));
page.on('console', event => this._consoleMessages.push(messageToConsoleMessage(event)));
page.on('pageerror', error => this._consoleMessages.push(pageErrorToConsoleMessage(error)));
page.on('request', request => this._requests.set(request, null));
page.on('response', response => this._requests.set(response.request(), response));
page.on('close', () => this._onClose());
@ -106,7 +107,7 @@ export class Tab {
return this._snapshot;
}
consoleMessages(): playwright.ConsoleMessage[] {
consoleMessages(): ConsoleMessage[] {
return this._consoleMessages;
}
@ -118,3 +119,32 @@ export class Tab {
this._snapshot = await PageSnapshot.create(this.page);
}
}
export type ConsoleMessage = {
type: ReturnType<playwright.ConsoleMessage['type']> | undefined;
text: string;
toString(): string;
};
function messageToConsoleMessage(message: playwright.ConsoleMessage): ConsoleMessage {
return {
type: message.type(),
text: message.text(),
toString: () => `[${message.type().toUpperCase()}] ${message.text()} @ ${message.location().url}:${message.location().lineNumber}`,
};
}
function pageErrorToConsoleMessage(errorOrValue: Error | any): ConsoleMessage {
if (errorOrValue instanceof Error) {
return {
type: undefined,
text: errorOrValue.message,
toString: () => errorOrValue.stack || errorOrValue.message,
};
}
return {
type: undefined,
text: String(errorOrValue),
toString: () => String(errorOrValue),
};
}

View File

@ -28,7 +28,7 @@ const console = defineTool({
},
handle: async context => {
const messages = context.currentTabOrDie().consoleMessages();
const log = messages.map(message => `[${message.type().toUpperCase()}] ${message.text()}`).join('\n');
const log = messages.map(message => message.toString()).join('\n');
return {
code: [`// <internal code to get console messages>`],
action: async () => {

View File

@ -38,7 +38,31 @@ test('browser_console_messages', async ({ client, server }) => {
name: 'browser_console_messages',
});
expect(resource).toHaveTextContent([
'[LOG] Hello, world!',
'[ERROR] Error',
`[LOG] Hello, world! @ ${server.PREFIX}:4`,
`[ERROR] Error @ ${server.PREFIX}:5`,
].join('\n'));
});
test('browser_console_messages (page error)', async ({ client, server }) => {
server.setContent('/', `
<!DOCTYPE html>
<html>
<script>
throw new Error("Error in script");
</script>
</html>
`, 'text/html');
await client.callTool({
name: 'browser_navigate',
arguments: {
url: server.PREFIX,
},
});
const resource = await client.callTool({
name: 'browser_console_messages',
});
expect(resource).toHaveTextContent(/Error: Error in script/);
expect(resource).toHaveTextContent(new RegExp(server.PREFIX));
});

View File

@ -214,7 +214,7 @@ test('browser_type', async ({ client, server }) => {
});
expect(await client.callTool({
name: 'browser_console_messages',
})).toHaveTextContent('[LOG] Key pressed: Enter , Text: Hi!');
})).toHaveTextContent(/\[LOG\] Key pressed: Enter , Text: Hi!/);
});
test('browser_type (slowly)', async ({ client, server }) => {
@ -238,14 +238,13 @@ test('browser_type (slowly)', async ({ client, server }) => {
slowly: true,
},
});
expect(await client.callTool({
const response = await client.callTool({
name: 'browser_console_messages',
})).toHaveTextContent([
'[LOG] Key pressed: H Text: ',
'[LOG] Key pressed: i Text: H',
'[LOG] Key pressed: ! Text: Hi',
'[LOG] Key pressed: Enter Text: Hi!',
].join('\n'));
});
expect(response).toHaveTextContent(/\[LOG\] Key pressed: H Text: /);
expect(response).toHaveTextContent(/\[LOG\] Key pressed: i Text: H/);
expect(response).toHaveTextContent(/\[LOG\] Key pressed: ! Text: Hi/);
expect(response).toHaveTextContent(/\[LOG\] Key pressed: Enter Text: Hi!/);
});
test('browser_resize', async ({ client, server }) => {