Fix streamable HTTP transport connection cleanup

Co-authored-by: pavelfeldman <883973+pavelfeldman@users.noreply.github.com>

README.md

@@ -99,13 +99,7 @@ Click <code>Save</code>.
 <details>
 <summary>VS Code</summary>
 
-#### Click the button to install:
+You can also install the Playwright MCP server using the VS Code CLI:
-
-[<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code">](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D) [<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D)
-
-#### Or install manually:
-
-Follow the MCP install [guide](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server), use the standard config above. You can also install the Playwright MCP server using the VS Code CLI:
 
 ```bash
 # For VS Code
@@ -303,24 +297,26 @@ npx @playwright/mcp@latest --config path/to/config.json
 ### Standalone MCP server
 
 When running headed browser on system w/o display or from worker processes of the IDEs,
-run the MCP server from environment with the DISPLAY and pass the `--port` flag to enable SSE transport.
+run the MCP server from environment with the DISPLAY and pass the `--port` flag to enable HTTP transport.
 
 ```bash
 npx @playwright/mcp@latest --port 8931
 ```
 
-And then in MCP client config, set the `url` to the SSE endpoint:
+And then in MCP client config, set the `url` to the MCP endpoint:
 
 ```js
 {
   "mcpServers": {
     "playwright": {
-      "url": "http://localhost:8931/sse"
+      "url": "http://localhost:8931/mcp"
     }
   }
 }
 ```
 
+For legacy SSE transport support, you can use `/sse` instead of `/mcp` in the URL.
+
 <details>
 <summary><b>Docker</b></summary>
 

src/transport.ts

@@ -88,7 +88,14 @@ async function handleStreamable(server: Server, req: http.IncomingMessage, res:
       if (transport.sessionId)
         sessions.delete(transport.sessionId);
     };
-    await server.createConnection(transport);
+    const connection = await server.createConnection(transport);
+    // Ensure connection is closed when transport closes
+    transport.onclose = () => {
+      if (transport.sessionId)
+        sessions.delete(transport.sessionId);
+      // eslint-disable-next-line no-console
+      void connection.close().catch(e => console.error(e));
+    };
     await transport.handleRequest(req, res);
     return;
   }
@@ -115,10 +122,10 @@ export function startHttpTransport(httpServer: http.Server, mcpServer: Server) {
   const streamableSessions = new Map<string, StreamableHTTPServerTransport>();
   httpServer.on('request', async (req, res) => {
     const url = new URL(`http://localhost${req.url}`);
-    if (url.pathname.startsWith('/mcp'))
+    if (url.pathname.startsWith('/sse'))
-      await handleStreamable(mcpServer, req, res, streamableSessions);
-    else
       await handleSSE(mcpServer, req, res, url, sseSessions);
+    else
+      await handleStreamable(mcpServer, req, res, streamableSessions);
   });
   const url = httpAddressToString(httpServer.address());
   const message = [
@@ -127,11 +134,11 @@ export function startHttpTransport(httpServer: http.Server, mcpServer: Server) {
     JSON.stringify({
       'mcpServers': {
         'playwright': {
-          'url': `${url}/sse`
+          'url': `${url}/mcp`
         }
       }
     }, undefined, 2),
-    'If your client supports streamable HTTP, you can use the /mcp endpoint instead.',
+    'For legacy SSE transport support, you can use the /sse endpoint instead.',
   ].join('\n');
     // eslint-disable-next-line no-console
   console.error(message);

tests/evaluate.spec.ts

@@ -49,24 +49,3 @@ test('browser_evaluate (element)', async ({ client, server }) => {
     },
   })).toContainTextContent(`- Result: "red"`);
 });
-
-test('browser_evaluate (error)', async ({ client, server }) => {
-  expect(await client.callTool({
-    name: 'browser_navigate',
-    arguments: { url: server.HELLO_WORLD },
-  })).toContainTextContent(`- Page Title: Title`);
-
-  // Test with a bogus expression that will cause a JavaScript error
-  const result = await client.callTool({
-    name: 'browser_evaluate',
-    arguments: {
-      function: '() => { undefinedVariable.nonExistentMethod(); }',
-    },
-  });
-
-  // Check that error MCP response is returned
-  expect(result.isError).toBe(true);
-
-  // Check that JavaScript error details are contained in the response
-  expect(result.content?.[0].text).toContain('undefinedVariable is not defined');
-});

tests/http.spec.ts

@@ -66,15 +66,16 @@ const test = baseTest.extend<{ serverEndpoint: (options?: { args?: string[], noP
   },
 });
 
-test('sse transport', async ({ serverEndpoint }) => {
+test('http transport', async ({ serverEndpoint }) => {
   const { url } = await serverEndpoint();
-  const transport = new SSEClientTransport(url);
+  const transport = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client = new Client({ name: 'test', version: '1.0.0' });
   await client.connect(transport);
   await client.ping();
+  expect(transport.sessionId, 'has session support').toBeDefined();
 });
 
-test('sse transport (config)', async ({ serverEndpoint }) => {
+test('http transport (config)', async ({ serverEndpoint }) => {
   const config: Config = {
     server: {
       port: 0,
@@ -84,16 +85,16 @@ test('sse transport (config)', async ({ serverEndpoint }) => {
   await fs.promises.writeFile(configFile, JSON.stringify(config, null, 2));
 
   const { url } = await serverEndpoint({ noPort: true, args: ['--config=' + configFile] });
-  const transport = new SSEClientTransport(url);
+  const transport = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client = new Client({ name: 'test', version: '1.0.0' });
   await client.connect(transport);
   await client.ping();
 });
 
-test('sse transport browser lifecycle (isolated)', async ({ serverEndpoint, server }) => {
+test('http transport browser lifecycle (isolated)', async ({ serverEndpoint, server }) => {
   const { url, stderr } = await serverEndpoint({ args: ['--isolated'] });
 
-  const transport1 = new SSEClientTransport(url);
+  const transport1 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client1 = new Client({ name: 'test', version: '1.0.0' });
   await client1.connect(transport1);
   await client1.callTool({
@@ -102,7 +103,7 @@ test('sse transport browser lifecycle (isolated)', async ({ serverEndpoint, serv
   });
   await client1.close();
 
-  const transport2 = new SSEClientTransport(url);
+  const transport2 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client2 = new Client({ name: 'test', version: '1.0.0' });
   await client2.connect(transport2);
   await client2.callTool({
@@ -113,9 +114,6 @@ test('sse transport browser lifecycle (isolated)', async ({ serverEndpoint, serv
 
   await expect(async () => {
     const lines = stderr().split('\n');
-    expect(lines.filter(line => line.match(/create SSE session/)).length).toBe(2);
-    expect(lines.filter(line => line.match(/delete SSE session/)).length).toBe(2);
-
     expect(lines.filter(line => line.match(/create context/)).length).toBe(2);
     expect(lines.filter(line => line.match(/close context/)).length).toBe(2);
 
@@ -127,10 +125,10 @@ test('sse transport browser lifecycle (isolated)', async ({ serverEndpoint, serv
   }).toPass();
 });
 
-test('sse transport browser lifecycle (isolated, multiclient)', async ({ serverEndpoint, server }) => {
+test('http transport browser lifecycle (isolated, multiclient)', async ({ serverEndpoint, server }) => {
   const { url, stderr } = await serverEndpoint({ args: ['--isolated'] });
 
-  const transport1 = new SSEClientTransport(url);
+  const transport1 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client1 = new Client({ name: 'test', version: '1.0.0' });
   await client1.connect(transport1);
   await client1.callTool({
@@ -138,7 +136,7 @@ test('sse transport browser lifecycle (isolated, multiclient)', async ({ serverE
     arguments: { url: server.HELLO_WORLD },
   });
 
-  const transport2 = new SSEClientTransport(url);
+  const transport2 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client2 = new Client({ name: 'test', version: '1.0.0' });
   await client2.connect(transport2);
   await client2.callTool({
@@ -147,7 +145,7 @@ test('sse transport browser lifecycle (isolated, multiclient)', async ({ serverE
   });
   await client1.close();
 
-  const transport3 = new SSEClientTransport(url);
+  const transport3 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client3 = new Client({ name: 'test', version: '1.0.0' });
   await client3.connect(transport3);
   await client3.callTool({
@@ -160,9 +158,6 @@ test('sse transport browser lifecycle (isolated, multiclient)', async ({ serverE
 
   await expect(async () => {
     const lines = stderr().split('\n');
-    expect(lines.filter(line => line.match(/create SSE session/)).length).toBe(3);
-    expect(lines.filter(line => line.match(/delete SSE session/)).length).toBe(3);
-
     expect(lines.filter(line => line.match(/create context/)).length).toBe(3);
     expect(lines.filter(line => line.match(/close context/)).length).toBe(3);
 
@@ -174,10 +169,10 @@ test('sse transport browser lifecycle (isolated, multiclient)', async ({ serverE
   }).toPass();
 });
 
-test('sse transport browser lifecycle (persistent)', async ({ serverEndpoint, server }) => {
+test('http transport browser lifecycle (persistent)', async ({ serverEndpoint, server }) => {
   const { url, stderr } = await serverEndpoint();
 
-  const transport1 = new SSEClientTransport(url);
+  const transport1 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client1 = new Client({ name: 'test', version: '1.0.0' });
   await client1.connect(transport1);
   await client1.callTool({
@@ -186,7 +181,7 @@ test('sse transport browser lifecycle (persistent)', async ({ serverEndpoint, se
   });
   await client1.close();
 
-  const transport2 = new SSEClientTransport(url);
+  const transport2 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client2 = new Client({ name: 'test', version: '1.0.0' });
   await client2.connect(transport2);
   await client2.callTool({
@@ -197,9 +192,6 @@ test('sse transport browser lifecycle (persistent)', async ({ serverEndpoint, se
 
   await expect(async () => {
     const lines = stderr().split('\n');
-    expect(lines.filter(line => line.match(/create SSE session/)).length).toBe(2);
-    expect(lines.filter(line => line.match(/delete SSE session/)).length).toBe(2);
-
     expect(lines.filter(line => line.match(/create context/)).length).toBe(2);
     expect(lines.filter(line => line.match(/close context/)).length).toBe(2);
 
@@ -211,10 +203,10 @@ test('sse transport browser lifecycle (persistent)', async ({ serverEndpoint, se
   }).toPass();
 });
 
-test('sse transport browser lifecycle (persistent, multiclient)', async ({ serverEndpoint, server }) => {
+test('http transport browser lifecycle (persistent, multiclient)', async ({ serverEndpoint, server }) => {
   const { url } = await serverEndpoint();
 
-  const transport1 = new SSEClientTransport(url);
+  const transport1 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client1 = new Client({ name: 'test', version: '1.0.0' });
   await client1.connect(transport1);
   await client1.callTool({
@@ -222,7 +214,7 @@ test('sse transport browser lifecycle (persistent, multiclient)', async ({ serve
     arguments: { url: server.HELLO_WORLD },
   });
 
-  const transport2 = new SSEClientTransport(url);
+  const transport2 = new StreamableHTTPClientTransport(new URL('/mcp', url));
   const client2 = new Client({ name: 'test', version: '1.0.0' });
   await client2.connect(transport2);
   const response = await client2.callTool({
@@ -236,9 +228,17 @@ test('sse transport browser lifecycle (persistent, multiclient)', async ({ serve
   await client2.close();
 });
 
-test('streamable http transport', async ({ serverEndpoint }) => {
+test('sse transport', async ({ serverEndpoint }) => {
   const { url } = await serverEndpoint();
-  const transport = new StreamableHTTPClientTransport(new URL('/mcp', url));
+  const transport = new SSEClientTransport(new URL('/sse', url));
+  const client = new Client({ name: 'test', version: '1.0.0' });
+  await client.connect(transport);
+  await client.ping();
+});
+
+test('http transport (default)', async ({ serverEndpoint }) => {
+  const { url } = await serverEndpoint();
+  const transport = new StreamableHTTPClientTransport(url);
   const client = new Client({ name: 'test', version: '1.0.0' });
   await client.connect(transport);
   await client.ping();