chore: restart browser if page closed manually (#19)

Fixes https://github.com/microsoft/playwright-mcp/issues/18
This commit is contained in:
Pavel Feldman 2025-03-25 13:05:28 -07:00 committed by GitHub
parent f98d5d2e31
commit a392ba2f41
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 143 additions and 47 deletions

View File

@ -18,6 +18,7 @@ import * as playwright from 'playwright';
export class Context { export class Context {
private _launchOptions: playwright.LaunchOptions; private _launchOptions: playwright.LaunchOptions;
private _browser: playwright.Browser | undefined;
private _page: playwright.Page | undefined; private _page: playwright.Page | undefined;
private _console: playwright.ConsoleMessage[] = []; private _console: playwright.ConsoleMessage[] = [];
private _initializePromise: Promise<void> | undefined; private _initializePromise: Promise<void> | undefined;
@ -39,30 +40,39 @@ export class Context {
async close() { async close() {
const page = await this.ensurePage(); const page = await this.ensurePage();
await page.close(); await page.close();
this._initializePromise = undefined;
} }
private async _initialize() { private async _initialize() {
if (this._initializePromise) if (this._initializePromise)
return this._initializePromise; return this._initializePromise;
this._initializePromise = (async () => { this._initializePromise = (async () => {
const browser = await this._createBrowser(); this._browser = await createBrowser(this._launchOptions);
this._page = await browser.newPage(); this._page = await this._browser.newPage();
this._page.on('console', event => this._console.push(event)); this._page.on('console', event => this._console.push(event));
this._page.on('framenavigated', frame => { this._page.on('framenavigated', frame => {
if (!frame.parentFrame()) if (!frame.parentFrame())
this._console.length = 0; this._console.length = 0;
}); });
this._page.on('close', () => this._reset());
})(); })();
return this._initializePromise; return this._initializePromise;
} }
private async _createBrowser(): Promise<playwright.Browser> { private _reset() {
if (process.env.PLAYWRIGHT_WS_ENDPOINT) { const browser = this._browser;
const url = new URL(process.env.PLAYWRIGHT_WS_ENDPOINT); this._initializePromise = undefined;
url.searchParams.set('launch-options', JSON.stringify(this._launchOptions)); this._browser = undefined;
return await playwright.chromium.connect(String(url)); this._page = undefined;
} this._console.length = 0;
return await playwright.chromium.launch({ channel: 'chrome', ...this._launchOptions }); void browser?.close();
} }
} }
async function createBrowser(launchOptions: playwright.LaunchOptions): Promise<playwright.Browser> {
if (process.env.PLAYWRIGHT_WS_ENDPOINT) {
const url = new URL(process.env.PLAYWRIGHT_WS_ENDPOINT);
url.searchParams.set('launch-options', JSON.stringify(launchOptions));
return await playwright.chromium.connect(String(url));
}
return await playwright.chromium.launch({ channel: 'chrome', ...launchOptions });
}

View File

@ -17,7 +17,6 @@
import { Server as MCPServer } from '@modelcontextprotocol/sdk/server/index.js'; import { Server as MCPServer } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'; import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { CallToolRequestSchema, ListResourcesRequestSchema, ListToolsRequestSchema, ReadResourceRequestSchema } from '@modelcontextprotocol/sdk/types.js'; import { CallToolRequestSchema, ListResourcesRequestSchema, ListToolsRequestSchema, ReadResourceRequestSchema } from '@modelcontextprotocol/sdk/types.js';
import * as playwright from 'playwright';
import { Context } from './context'; import { Context } from './context';
@ -31,7 +30,6 @@ export type LaunchOptions = {
export class Server { export class Server {
private _server: MCPServer; private _server: MCPServer;
private _tools: Tool[]; private _tools: Tool[];
private _page: playwright.Page | undefined;
private _context: Context; private _context: Context;
constructor(options: { name: string, version: string, tools: Tool[], resources: Resource[] }, launchOptions: LaunchOptions) { constructor(options: { name: string, version: string, tools: Tool[], resources: Resource[] }, launchOptions: LaunchOptions) {
@ -90,6 +88,6 @@ export class Server {
async stop() { async stop() {
await this._server.close(); await this._server.close();
await this._page?.context()?.browser()?.close(); await this._context.close();
} }
} }

View File

@ -161,3 +161,69 @@ test('test browser_click', async ({ server }) => {
}, },
})); }));
}); });
test('test reopen browser', async ({ server }) => {
const response2 = await server.send({
jsonrpc: '2.0',
id: 2,
method: 'tools/call',
params: {
name: 'browser_navigate',
arguments: {
url: 'data:text/html,<html><title>Title</title><body>Hello, world!</body></html>',
},
},
});
expect(response2).toEqual(expect.objectContaining({
id: 2,
}));
const response3 = await server.send({
jsonrpc: '2.0',
id: 3,
method: 'tools/call',
params: {
name: 'browser_close',
},
});
expect(response3).toEqual(expect.objectContaining({
id: 3,
result: {
content: [{
text: 'Page closed',
type: 'text',
}],
},
}));
const response4 = await server.send({
jsonrpc: '2.0',
id: 4,
method: 'tools/call',
params: {
name: 'browser_navigate',
arguments: {
url: 'data:text/html,<html><title>Title</title><body>Hello, world!</body></html>',
},
},
});
expect(response4).toEqual(expect.objectContaining({
id: 4,
result: {
content: [{
type: 'text',
text: `
- Page URL: data:text/html,<html><title>Title</title><body>Hello, world!</body></html>
- Page Title: Title
- Page Snapshot
\`\`\`yaml
- document [ref=s1e2]: Hello, world!
\`\`\`
`,
}],
},
}));
});

View File

@ -17,6 +17,7 @@
import path from 'path'; import path from 'path';
import { spawn } from 'child_process'; import { spawn } from 'child_process';
import EventEmitter from 'events'; import EventEmitter from 'events';
import { chromium } from 'playwright';
import { test as baseTest, expect } from '@playwright/test'; import { test as baseTest, expect } from '@playwright/test';
@ -30,10 +31,11 @@ class MCPServer extends EventEmitter {
private _messageResolvers: ((value: any) => void)[] = []; private _messageResolvers: ((value: any) => void)[] = [];
private _buffer: string = ''; private _buffer: string = '';
constructor(command: string, args: string[]) { constructor(command: string, args: string[], options?: { env?: NodeJS.ProcessEnv }) {
super(); super();
this._child = spawn(command, args, { this._child = spawn(command, args, {
stdio: ['pipe', 'pipe', 'pipe'], stdio: ['pipe', 'pipe', 'pipe'],
env: { ...process.env, ...options?.env },
}); });
this._child.stdout?.on('data', data => { this._child.stdout?.on('data', data => {
@ -108,44 +110,64 @@ class MCPServer extends EventEmitter {
} }
} }
export const test = baseTest.extend<{ server: MCPServer }>({ type Fixtures = {
server: async ({}, use) => { server: MCPServer;
const server = new MCPServer('node', [path.join(__dirname, '../cli.js'), '--headless']); startServer: (options?: { env?: NodeJS.ProcessEnv }) => Promise<MCPServer>;
const initialize = await server.send({ wsEndpoint: string;
jsonrpc: '2.0', };
id: 0,
method: 'initialize',
params: {
protocolVersion: '2024-11-05',
capabilities: {},
clientInfo: {
name: 'Playwright Test',
version: '0.0.0',
},
},
});
expect(initialize).toEqual(expect.objectContaining({ export const test = baseTest.extend<Fixtures>({
id: 0, server: async ({ startServer }, use) => {
result: expect.objectContaining({ await use(await startServer());
protocolVersion: '2024-11-05', },
capabilities: {
tools: {}, startServer: async ({ }, use) => {
resources: {}, let server: MCPServer | undefined;
use(async options => {
server = new MCPServer('node', [path.join(__dirname, '../cli.js'), '--headless'], options);
const initialize = await server.send({
jsonrpc: '2.0',
id: 0,
method: 'initialize',
params: {
protocolVersion: '2024-11-05',
capabilities: {},
clientInfo: {
name: 'Playwright Test',
version: '0.0.0',
},
}, },
serverInfo: expect.objectContaining({ });
name: 'Playwright',
version: expect.any(String), expect(initialize).toEqual(expect.objectContaining({
id: 0,
result: expect.objectContaining({
protocolVersion: '2024-11-05',
capabilities: {
tools: {},
resources: {},
},
serverInfo: expect.objectContaining({
name: 'Playwright',
version: expect.any(String),
}),
}), }),
}), }));
}));
await server.sendNoReply({ await server.sendNoReply({
jsonrpc: '2.0', jsonrpc: '2.0',
method: 'notifications/initialized', method: 'notifications/initialized',
});
return server;
}); });
await use(server); await server?.close();
await server.close(); },
wsEndpoint: async ({ }, use) => {
const browserServer = await chromium.launchServer();
await use(browserServer.wsEndpoint());
await browserServer.close();
}, },
}); });