Skip to content

Reverted sse support, as its breaking the existing flow #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 12, 2025
Merged

Reverted sse support, as its breaking the existing flow #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4aa6a31
Fixed code by removing the SSE Support
kartmcad May 12, 2025
c76f148
chore: Bump version to 1.0.5 and remove SSE support, including relate…
kartmcad May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 1 addition & 32 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Using Smithery
To install Playwright MCP for Claude Desktop automatically via [Smithery](https://smithery.ai/server/@executeautomation/playwright-mcp-server):

```bash
npx -y @smithery/cli install @executeautomation/playwright-mcp-server --client claude
npx @smithery/cli install @executeautomation/playwright-mcp-server --client claude
```
#### Installation in VS Code

Expand Down Expand Up @@ -88,36 +88,6 @@ Here's the Claude Desktop configuration to use the Playwright server:
}
```

## SSE (Server-Sent Events) Support

Playwright MCP Server now supports real-time event streaming via Server-Sent Events (SSE).

### How to Use

- The server exposes an SSE endpoint at `http://localhost:3001/events`.
- You can connect to this endpoint using any SSE-compatible client (such as EventSource in the browser or curl).
- Events are sent in real-time as they occur (e.g., new console logs, screenshots, etc.).

### Example (JavaScript)
```js
const evtSource = new EventSource('http://localhost:3001/events');
evtSource.addEventListener('console_log_entry', (event) => {
const data = JSON.parse(event.data);
console.log('Console log:', data.log);
});
evtSource.addEventListener('screenshot', (event) => {
const data = JSON.parse(event.data);
console.log('Screenshot event:', data);
});
```

### Available Events
- `console_log_entry`: Fired when a new console log is captured.
- `console_logs`: Fired when all logs are requested.
- `screenshot`: Fired when a screenshot is taken or requested.

This allows you to build real-time dashboards, monitoring tools, or simply observe browser activity as it happens.

## Testing

This project uses Jest for testing. The tests are located in the `src/__tests__` directory.
Expand All @@ -138,7 +108,6 @@ npm run test:custom # Run tests with custom script (same as node run-tests.cj

The test coverage report will be generated in the `coverage` directory.


### Running evals

The evals package loads an mcp client that then runs the index.ts file, so there is no need to rebuild between tests. You can load environment variables by prefixing the npx command. Full documentation can be found [here](https://www.mcpevals.io/docs).
Expand Down
28 changes: 0 additions & 28 deletions docs/docs/intro.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,31 +70,3 @@ Modify your `claude-desktop-config.json` file as shown below
This video should give you an high level overview of what Claude's MCP is and how helpful it will soon become for AI agents

<YouTubeVideoEmbed videoId="hGJQMbpsTi4" />

## 🟢 Real-Time Event Streaming (SSE)

Playwright MCP Server now supports real-time event streaming via Server-Sent Events (SSE).

- The server exposes an SSE endpoint at `http://localhost:3001/events`.
- You can connect to this endpoint using any SSE-compatible client (such as EventSource in the browser or curl).
- Events are sent in real-time as they occur (e.g., new console logs, screenshots, etc.).

**Example (JavaScript):**
```js
const evtSource = new EventSource('http://localhost:3001/events');
evtSource.addEventListener('console_log_entry', (event) => {
const data = JSON.parse(event.data);
console.log('Console log:', data.log);
});
evtSource.addEventListener('screenshot', (event) => {
const data = JSON.parse(event.data);
console.log('Screenshot event:', data);
});
```

**Available Events:**
- `console_log_entry`: Fired when a new console log is captured.
- `console_logs`: Fired when all logs are requested.
- `screenshot`: Fired when a screenshot is taken or requested.

This allows you to build real-time dashboards, monitoring tools, or simply observe browser activity as it happens.
8 changes: 1 addition & 7 deletions docs/docs/playwright-web/Supported-Tools.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,7 @@ sidebar_position: 1

import YouTubeVideoEmbed from '@site/src/components/HomepageFeatures/YouTubeVideoEmbed';

# 🛠️ Supported Tools

> **🟢 Real-Time Event Streaming (SSE) is now supported!**
>
> - Connect to `http://localhost:3001/events` for real-time updates (console logs, screenshots, etc.).
> - Use any SSE-compatible client (e.g., EventSource in the browser).
> - Events: `console_log_entry`, `console_logs`, `screenshot`.
# ��️ Supported Tools

Playwright MCP for Browser automation has following key features
- Console log monitoring
Expand Down
13 changes: 6 additions & 7 deletions docs/docs/release.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,12 @@ import YouTubeVideoEmbed from '@site/src/components/HomepageFeatures/YouTubeVide

# Release Notes

## Version 1.0.4
- **SSE (Server-Sent Events) Support**: Added real-time event streaming via SSE
- New SSE server runs on `http://localhost:3001/events`
- Real-time streaming of browser console logs and screenshots to any SSE-compatible client
- Example usage and event types (`console_log_entry`, `console_logs`, `screenshot`) documented in README and docs
- Enables building real-time dashboards, monitoring tools, or observing browser activity as it happens
## Version 1.0.5
- **Removed SSE (Server-Sent Events) Support**: All SSE-related code, endpoints, and documentation have been fully removed. The server now only supports STDIO transport for communication with clients.
- **Codebase Cleanup**: Removed all references to SseServer, /events endpoint, and related event streaming features from the code and documentation.
- **Version bump**: Incremented version to 1.0.5.

## Version 1.0.4
- **New Tool: `playwright_iframe_fill`**
- Fill input fields inside iframes using CSS selectors

Expand All @@ -22,7 +21,7 @@ import YouTubeVideoEmbed from '@site/src/components/HomepageFeatures/YouTubeVide
- Captures uncaught exceptions and unhandled Promise rejections in browser logs for better debugging

- **Documentation Updates**
- Added/updated documentation for new tools, SSE support, and improved installation/configuration instructions
- Added/updated documentation for new tools and improved installation/configuration instructions

- **Test Coverage**
- Added and updated tests for new tools and features
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@executeautomation/playwright-mcp-server",
"version": "1.0.4",
"version": "1.0.5",
"description": "Model Context Protocol servers for Playwright",
"license": "MIT",
"author": "ExecuteAutomation, Ltd (https://executeautomation.com)",
Expand Down
43 changes: 14 additions & 29 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,55 +4,40 @@ import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { createToolDefinitions } from "./tools.js";
import { setupRequestHandlers } from "./requestHandler.js";
import { SseServer } from './sseServer.js';
import http from 'http';

export const SSE_SERVER_SYMBOL = Symbol('sseServer');

// Custom interface to allow symbol property
interface McpServerWithSSE extends Server {
[key: symbol]: any;
}

async function runServer() {
const server: McpServerWithSSE = new Server(
const server = new Server(
{
name: "executeautomation/playwright-mcp-server",
version: "1.0.4",
version: "1.0.5",
},
{
capabilities: {
resources: {},
tools: {},
},
}
) as McpServerWithSSE;
);

// Create tool definitions
const TOOLS = createToolDefinitions();

// Setup request handlers
setupRequestHandlers(server, TOOLS);

// Start HTTP server for SSE only if not in test environment
let sseServer;
if (process.env.NODE_ENV !== 'test') {
let httpServer;
try {
httpServer = http.createServer();
sseServer = new SseServer();
sseServer.attachToServer(httpServer);
httpServer.listen(3001, () => {
console.log('SSE server listening on http://localhost:3001/events');
});
} catch (err) {
console.error('Failed to initialize SSE server:', err);
}
if (sseServer) {
server[SSE_SERVER_SYMBOL] = sseServer;
}
// Graceful shutdown logic
function shutdown() {
console.log('Shutdown signal received');
process.exit(0);
}

process.on('SIGINT', shutdown);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Description: The shutdown function is called for both graceful shutdown and process exit, which may lead to confusion. Consider separating the graceful shutdown logic from the process exit handling.

Severity: Medium

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fix separates the graceful shutdown logic from the process exit handling. A new gracefulShutdown function is introduced to handle SIGINT and SIGTERM signals, which initiates a graceful shutdown by disconnecting the server before exiting. The handleExit function is added to handle the 'exit' event separately. This separation provides clearer distinction between graceful shutdown and immediate process exit scenarios.

Suggested change
process.on('SIGINT', shutdown);
setupRequestHandlers(server, TOOLS);
// Graceful shutdown logic
function gracefulShutdown() {
console.log('Graceful shutdown initiated');
server.disconnect().then(() => {
console.log('Server disconnected');
process.exit(0);
});
}
// Process exit handling
function handleExit() {
console.log('Process exit');
}
process.on('SIGINT', gracefulShutdown);
process.on('SIGTERM', gracefulShutdown);
process.on('exit', handleExit);
process.on('uncaughtException', (err) => {
console.error('Uncaught Exception:', err);
});

process.on('SIGTERM', shutdown);
process.on('exit', shutdown);
process.on('uncaughtException', (err) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning

Description: The uncaughtException handler logs the error but doesn't terminate the process, potentially leaving it in an unstable state. Consider terminating the process after logging the uncaught exception.

Severity: High

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fix addresses the issue of potential instability after an uncaught exception by adding process.exit(1) to the uncaughtException handler. This ensures that the process terminates after logging the error, preventing the application from continuing in an unstable state. The exit code 1 indicates an abnormal termination due to an error.

Suggested change
process.on('uncaughtException', (err) => {
process.on('exit', shutdown);
process.on('uncaughtException', (err) => {
console.error('Uncaught Exception:', err);
process.exit(1);
});
// Create transport and connect

console.error('Uncaught Exception:', err);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning

Description: Log Injection occurs when untrusted user input is directly written to log files without proper sanitization. This can allow attackers to manipulate log entries, potentially leading to security issues like log forging or cross-site scripting. To prevent this, always sanitize user input before logging by removing or encoding newline characters, using string encoding functions, and leveraging built-in sanitization features of logging libraries when available. Learn more - https://cwe.mitre.org/data/definitions/117.html

Severity: High

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fix involves using a sanitization function (sanitizeLog) to clean the error message before logging it, preventing potential log injection vulnerabilities.

Suggested change
console.error('Uncaught Exception:', err);
process.on('SIGTERM', shutdown);
process.on('exit', shutdown);
process.on('uncaughtException', (err) => {
// Use a sanitization function to prevent log injection
console.error('Uncaught Exception:', sanitizeLog(err.toString())); // import { sanitizeLog } from './logUtils';
});
// Create transport and connect

});

// Create transport and connect
const transport = new StdioServerTransport();
await server.connect(transport);
Expand Down
19 changes: 0 additions & 19 deletions src/requestHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
Tool
} from "@modelcontextprotocol/sdk/types.js";
import { handleToolCall, getConsoleLogs, getScreenshots } from "./toolHandler.js";
import { SSE_SERVER_SYMBOL } from './index.js';

export function setupRequestHandlers(server: Server, tools: Tool[]) {
// List resources handler
Expand All @@ -32,15 +31,6 @@ export function setupRequestHandlers(server: Server, tools: Tool[]) {

if (uri === "console://logs") {
const logs = getConsoleLogs().join("\n");
// Broadcast logs to SSE clients
try {
const sseServer = (server as any)[SSE_SERVER_SYMBOL];
if (sseServer) {
sseServer.broadcast('console_logs', { logs });
}
} catch (err) {
console.error('Failed to broadcast console logs via SSE:', err);
}
return {
contents: [{
uri,
Expand All @@ -54,15 +44,6 @@ export function setupRequestHandlers(server: Server, tools: Tool[]) {
const name = uri.split("://")[1];
const screenshot = getScreenshots().get(name);
if (screenshot) {
// Broadcast screenshot event to SSE clients
try {
const sseServer = (server as any)[SSE_SERVER_SYMBOL];
if (sseServer) {
sseServer.broadcast('screenshot', { name, screenshot });
}
} catch (err) {
console.error('Failed to broadcast screenshot via SSE:', err);
}
return {
contents: [{
uri,
Expand Down
41 changes: 0 additions & 41 deletions src/sseServer.ts
View file
Open in desktop

This file was deleted.

6 changes: 0 additions & 6 deletions src/tools/browser/console.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { BrowserToolBase } from './base.js';
import { ToolContext, ToolResponse, createSuccessResponse } from '../common/types.js';
import { SSE_SERVER_SYMBOL } from '../../index.js';

/**
* Tool for retrieving and filtering console logs from the browser
Expand All @@ -16,11 +15,6 @@ export class ConsoleLogsTool extends BrowserToolBase {
registerConsoleMessage(type: string, text: string): void {
const logEntry = `[${type}] ${text}`;
this.consoleLogs.push(logEntry);
// Broadcast new log entry to SSE clients
const sseServer = (this.server as any)[SSE_SERVER_SYMBOL];
if (sseServer) {
sseServer.broadcast('console_log_entry', { log: logEntry });
}
}

/**
Expand Down
Loading