update docs
This commit is contained in:
Chris Tate
@@ -479,6 +479,113 @@ This enables control of:
|
||||
- WebView2 applications
|
||||
- Any browser exposing a CDP endpoint
|
||||
|
||||
## Streaming (Browser Preview)
|
||||
|
||||
Stream the browser viewport via WebSocket for live preview or "pair browsing" where a human can watch and interact alongside an AI agent.
|
||||
|
||||
### Enable Streaming
|
||||
|
||||
Set the `AGENT_BROWSER_STREAM_PORT` environment variable:
|
||||
|
||||
```bash
|
||||
AGENT_BROWSER_STREAM_PORT=9223 agent-browser open example.com
|
||||
```
|
||||
|
||||
This starts a WebSocket server on the specified port that streams the browser viewport and accepts input events.
|
||||
|
||||
### WebSocket Protocol
|
||||
|
||||
Connect to `ws://localhost:9223` to receive frames and send input:
|
||||
|
||||
**Receive frames:**
|
||||
```json
|
||||
{
|
||||
"type": "frame",
|
||||
"data": "<base64-encoded-jpeg>",
|
||||
"metadata": {
|
||||
"deviceWidth": 1280,
|
||||
"deviceHeight": 720,
|
||||
"pageScaleFactor": 1,
|
||||
"offsetTop": 0,
|
||||
"scrollOffsetX": 0,
|
||||
"scrollOffsetY": 0
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Send mouse events:**
|
||||
```json
|
||||
{
|
||||
"type": "input_mouse",
|
||||
"eventType": "mousePressed",
|
||||
"x": 100,
|
||||
"y": 200,
|
||||
"button": "left",
|
||||
"clickCount": 1
|
||||
}
|
||||
```
|
||||
|
||||
**Send keyboard events:**
|
||||
```json
|
||||
{
|
||||
"type": "input_keyboard",
|
||||
"eventType": "keyDown",
|
||||
"key": "Enter",
|
||||
"code": "Enter"
|
||||
}
|
||||
```
|
||||
|
||||
**Send touch events:**
|
||||
```json
|
||||
{
|
||||
"type": "input_touch",
|
||||
"eventType": "touchStart",
|
||||
"touchPoints": [{ "x": 100, "y": 200 }]
|
||||
}
|
||||
```
|
||||
|
||||
### Programmatic API
|
||||
|
||||
For advanced use, control streaming directly via the protocol:
|
||||
|
||||
```typescript
|
||||
import { BrowserManager } from 'agent-browser';
|
||||
|
||||
const browser = new BrowserManager();
|
||||
await browser.launch({ headless: true });
|
||||
await browser.navigate('https://example.com');
|
||||
|
||||
// Start screencast
|
||||
await browser.startScreencast((frame) => {
|
||||
// frame.data is base64-encoded image
|
||||
// frame.metadata contains viewport info
|
||||
console.log('Frame received:', frame.metadata.deviceWidth, 'x', frame.metadata.deviceHeight);
|
||||
}, {
|
||||
format: 'jpeg',
|
||||
quality: 80,
|
||||
maxWidth: 1280,
|
||||
maxHeight: 720,
|
||||
});
|
||||
|
||||
// Inject mouse events
|
||||
await browser.injectMouseEvent({
|
||||
type: 'mousePressed',
|
||||
x: 100,
|
||||
y: 200,
|
||||
button: 'left',
|
||||
});
|
||||
|
||||
// Inject keyboard events
|
||||
await browser.injectKeyboardEvent({
|
||||
type: 'keyDown',
|
||||
key: 'Enter',
|
||||
code: 'Enter',
|
||||
});
|
||||
|
||||
// Stop when done
|
||||
await browser.stopScreencast();
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
agent-browser uses a client-daemon architecture:
|
||||
|
||||
@@ -1197,6 +1197,11 @@ Options:
|
||||
--cdp <port> Connect via CDP (Chrome DevTools Protocol)
|
||||
--debug Debug output
|
||||
|
||||
Environment:
|
||||
AGENT_BROWSER_SESSION Session name (default: "default")
|
||||
AGENT_BROWSER_EXECUTABLE_PATH Custom browser executable path
|
||||
AGENT_BROWSER_STREAM_PORT Enable WebSocket streaming on port (e.g., 9223)
|
||||
|
||||
Examples:
|
||||
agent-browser open example.com
|
||||
agent-browser snapshot -i # Interactive elements only
|
||||
|
||||
@@ -0,0 +1,217 @@
|
||||
import { CodeBlock } from "@/components/code-block";
|
||||
|
||||
export default function Streaming() {
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
|
||||
<div className="prose">
|
||||
<h1>Streaming</h1>
|
||||
<p>
|
||||
Stream the browser viewport via WebSocket for live preview or "pair browsing"
|
||||
where a human can watch and interact alongside an AI agent.
|
||||
</p>
|
||||
|
||||
<h2>Enable streaming</h2>
|
||||
<p>
|
||||
Set the <code>AGENT_BROWSER_STREAM_PORT</code> environment variable to start
|
||||
a WebSocket server:
|
||||
</p>
|
||||
<CodeBlock code={`AGENT_BROWSER_STREAM_PORT=9223 agent-browser open example.com`} />
|
||||
|
||||
<p>
|
||||
The server streams viewport frames and accepts input events (mouse, keyboard, touch).
|
||||
</p>
|
||||
|
||||
<h2>WebSocket protocol</h2>
|
||||
<p>Connect to <code>ws://localhost:9223</code> to receive frames and send input.</p>
|
||||
|
||||
<h3>Frame messages</h3>
|
||||
<p>The server sends frame messages with base64-encoded images:</p>
|
||||
<CodeBlock code={`{
|
||||
"type": "frame",
|
||||
"data": "<base64-encoded-jpeg>",
|
||||
"metadata": {
|
||||
"deviceWidth": 1280,
|
||||
"deviceHeight": 720,
|
||||
"pageScaleFactor": 1,
|
||||
"offsetTop": 0,
|
||||
"scrollOffsetX": 0,
|
||||
"scrollOffsetY": 0
|
||||
}
|
||||
}`} />
|
||||
|
||||
<h3>Status messages</h3>
|
||||
<p>Connection and screencast status:</p>
|
||||
<CodeBlock code={`{
|
||||
"type": "status",
|
||||
"connected": true,
|
||||
"screencasting": true,
|
||||
"viewportWidth": 1280,
|
||||
"viewportHeight": 720
|
||||
}`} />
|
||||
|
||||
<h2>Input injection</h2>
|
||||
<p>Send input events to control the browser remotely.</p>
|
||||
|
||||
<h3>Mouse events</h3>
|
||||
<CodeBlock code={`// Click
|
||||
{
|
||||
"type": "input_mouse",
|
||||
"eventType": "mousePressed",
|
||||
"x": 100,
|
||||
"y": 200,
|
||||
"button": "left",
|
||||
"clickCount": 1
|
||||
}
|
||||
|
||||
// Release
|
||||
{
|
||||
"type": "input_mouse",
|
||||
"eventType": "mouseReleased",
|
||||
"x": 100,
|
||||
"y": 200,
|
||||
"button": "left"
|
||||
}
|
||||
|
||||
// Move
|
||||
{
|
||||
"type": "input_mouse",
|
||||
"eventType": "mouseMoved",
|
||||
"x": 150,
|
||||
"y": 250
|
||||
}
|
||||
|
||||
// Scroll
|
||||
{
|
||||
"type": "input_mouse",
|
||||
"eventType": "mouseWheel",
|
||||
"x": 100,
|
||||
"y": 200,
|
||||
"deltaX": 0,
|
||||
"deltaY": 100
|
||||
}`} />
|
||||
|
||||
<h3>Keyboard events</h3>
|
||||
<CodeBlock code={`// Key down
|
||||
{
|
||||
"type": "input_keyboard",
|
||||
"eventType": "keyDown",
|
||||
"key": "Enter",
|
||||
"code": "Enter"
|
||||
}
|
||||
|
||||
// Key up
|
||||
{
|
||||
"type": "input_keyboard",
|
||||
"eventType": "keyUp",
|
||||
"key": "Enter",
|
||||
"code": "Enter"
|
||||
}
|
||||
|
||||
// Type character
|
||||
{
|
||||
"type": "input_keyboard",
|
||||
"eventType": "char",
|
||||
"text": "a"
|
||||
}
|
||||
|
||||
// With modifiers (1=Alt, 2=Ctrl, 4=Meta, 8=Shift)
|
||||
{
|
||||
"type": "input_keyboard",
|
||||
"eventType": "keyDown",
|
||||
"key": "c",
|
||||
"code": "KeyC",
|
||||
"modifiers": 2
|
||||
}`} />
|
||||
|
||||
<h3>Touch events</h3>
|
||||
<CodeBlock code={`// Touch start
|
||||
{
|
||||
"type": "input_touch",
|
||||
"eventType": "touchStart",
|
||||
"touchPoints": [{ "x": 100, "y": 200 }]
|
||||
}
|
||||
|
||||
// Touch move
|
||||
{
|
||||
"type": "input_touch",
|
||||
"eventType": "touchMove",
|
||||
"touchPoints": [{ "x": 150, "y": 250 }]
|
||||
}
|
||||
|
||||
// Touch end
|
||||
{
|
||||
"type": "input_touch",
|
||||
"eventType": "touchEnd",
|
||||
"touchPoints": []
|
||||
}
|
||||
|
||||
// Multi-touch (pinch zoom)
|
||||
{
|
||||
"type": "input_touch",
|
||||
"eventType": "touchStart",
|
||||
"touchPoints": [
|
||||
{ "x": 100, "y": 200, "id": 0 },
|
||||
{ "x": 200, "y": 200, "id": 1 }
|
||||
]
|
||||
}`} />
|
||||
|
||||
<h2>Programmatic API</h2>
|
||||
<p>For advanced use, control streaming directly via the TypeScript API:</p>
|
||||
<CodeBlock code={`import { BrowserManager } from 'agent-browser';
|
||||
|
||||
const browser = new BrowserManager();
|
||||
await browser.launch({ headless: true });
|
||||
await browser.navigate('https://example.com');
|
||||
|
||||
// Start screencast with callback
|
||||
await browser.startScreencast((frame) => {
|
||||
console.log('Frame:', frame.metadata.deviceWidth, 'x', frame.metadata.deviceHeight);
|
||||
// frame.data is base64-encoded image
|
||||
}, {
|
||||
format: 'jpeg', // or 'png'
|
||||
quality: 80, // 0-100, jpeg only
|
||||
maxWidth: 1280,
|
||||
maxHeight: 720,
|
||||
everyNthFrame: 1
|
||||
});
|
||||
|
||||
// Inject mouse event
|
||||
await browser.injectMouseEvent({
|
||||
type: 'mousePressed',
|
||||
x: 100,
|
||||
y: 200,
|
||||
button: 'left',
|
||||
clickCount: 1
|
||||
});
|
||||
|
||||
// Inject keyboard event
|
||||
await browser.injectKeyboardEvent({
|
||||
type: 'keyDown',
|
||||
key: 'Enter',
|
||||
code: 'Enter'
|
||||
});
|
||||
|
||||
// Inject touch event
|
||||
await browser.injectTouchEvent({
|
||||
type: 'touchStart',
|
||||
touchPoints: [{ x: 100, y: 200 }]
|
||||
});
|
||||
|
||||
// Check if screencasting
|
||||
console.log('Active:', browser.isScreencasting());
|
||||
|
||||
// Stop screencast
|
||||
await browser.stopScreencast();`} />
|
||||
|
||||
<h2>Use cases</h2>
|
||||
<ul>
|
||||
<li><strong>Pair browsing</strong> - Human watches and assists AI agent in real-time</li>
|
||||
<li><strong>Remote preview</strong> - View browser output in a separate UI</li>
|
||||
<li><strong>Recording</strong> - Capture frames for video generation</li>
|
||||
<li><strong>Mobile testing</strong> - Inject touch events for mobile emulation</li>
|
||||
<li><strong>Accessibility testing</strong> - Manual interaction during automated tests</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -12,6 +12,7 @@ const navigation = [
|
||||
{ name: "Selectors", href: "/selectors" },
|
||||
{ name: "Sessions", href: "/sessions" },
|
||||
{ name: "Snapshots", href: "/snapshots" },
|
||||
{ name: "Streaming", href: "/streaming" },
|
||||
{ name: "Agent Mode", href: "/agent-mode" },
|
||||
{ name: "CDP Mode", href: "/cdp-mode" },
|
||||
];
|
||||
|
||||
+1
-1
@@ -709,7 +709,7 @@ async function handleTabSwitch(
|
||||
command: TabSwitchCommand,
|
||||
browser: BrowserManager
|
||||
): Promise<Response<TabSwitchData>> {
|
||||
const result = browser.switchTo(command.index);
|
||||
const result = await browser.switchTo(command.index);
|
||||
const page = browser.getPage();
|
||||
return successResponse(command.id, {
|
||||
...result,
|
||||
|
||||
@@ -378,4 +378,256 @@ describe('BrowserManager', () => {
|
||||
await expect(browser.clearScopedHeaders('https://never-set.com')).resolves.not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('CDP session', () => {
|
||||
it('should create CDP session on demand', async () => {
|
||||
const cdp = await browser.getCDPSession();
|
||||
expect(cdp).toBeDefined();
|
||||
});
|
||||
|
||||
it('should reuse existing CDP session', async () => {
|
||||
const cdp1 = await browser.getCDPSession();
|
||||
const cdp2 = await browser.getCDPSession();
|
||||
expect(cdp1).toBe(cdp2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('screencast', () => {
|
||||
it('should report screencasting state correctly', () => {
|
||||
expect(browser.isScreencasting()).toBe(false);
|
||||
});
|
||||
|
||||
it('should start screencast', async () => {
|
||||
const frames: Array<{ data: string }> = [];
|
||||
await browser.startScreencast((frame) => {
|
||||
frames.push(frame);
|
||||
});
|
||||
expect(browser.isScreencasting()).toBe(true);
|
||||
|
||||
// Wait a bit for at least one frame
|
||||
await new Promise((resolve) => setTimeout(resolve, 200));
|
||||
|
||||
await browser.stopScreencast();
|
||||
expect(browser.isScreencasting()).toBe(false);
|
||||
expect(frames.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should start screencast with custom options', async () => {
|
||||
const frames: Array<{ data: string }> = [];
|
||||
await browser.startScreencast(
|
||||
(frame) => {
|
||||
frames.push(frame);
|
||||
},
|
||||
{
|
||||
format: 'png',
|
||||
quality: 100,
|
||||
maxWidth: 800,
|
||||
maxHeight: 600,
|
||||
everyNthFrame: 1,
|
||||
}
|
||||
);
|
||||
expect(browser.isScreencasting()).toBe(true);
|
||||
|
||||
// Wait for a frame
|
||||
await new Promise((resolve) => setTimeout(resolve, 200));
|
||||
|
||||
await browser.stopScreencast();
|
||||
expect(frames.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should throw when starting screencast twice', async () => {
|
||||
await browser.startScreencast(() => {});
|
||||
await expect(browser.startScreencast(() => {})).rejects.toThrow('Screencast already active');
|
||||
await browser.stopScreencast();
|
||||
});
|
||||
|
||||
it('should handle stop when not screencasting', async () => {
|
||||
// Should not throw
|
||||
await expect(browser.stopScreencast()).resolves.not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('tab switch invalidates CDP session', () => {
|
||||
// Clean up any extra tabs before each test
|
||||
beforeEach(async () => {
|
||||
// Close all tabs except the first one
|
||||
const tabs = await browser.listTabs();
|
||||
for (let i = tabs.length - 1; i > 0; i--) {
|
||||
await browser.closeTab(i);
|
||||
}
|
||||
// Ensure we're on tab 0
|
||||
await browser.switchTo(0);
|
||||
// Stop any active screencast
|
||||
if (browser.isScreencasting()) {
|
||||
await browser.stopScreencast();
|
||||
}
|
||||
});
|
||||
|
||||
it('should not invalidate CDP when switching to same tab', async () => {
|
||||
// Get CDP session for current tab
|
||||
const cdp1 = await browser.getCDPSession();
|
||||
|
||||
// Switch to same tab - should NOT invalidate
|
||||
await browser.switchTo(0);
|
||||
|
||||
// Should be the same session
|
||||
const cdp2 = await browser.getCDPSession();
|
||||
expect(cdp2).toBe(cdp1);
|
||||
});
|
||||
|
||||
it('should invalidate CDP session on tab switch', async () => {
|
||||
// Get CDP session for tab 0
|
||||
const cdp1 = await browser.getCDPSession();
|
||||
expect(cdp1).toBeDefined();
|
||||
|
||||
// Create new tab - this switches to the new tab automatically
|
||||
await browser.newTab();
|
||||
|
||||
// Get CDP session - should be different since we're on a new page
|
||||
const cdp2 = await browser.getCDPSession();
|
||||
expect(cdp2).toBeDefined();
|
||||
|
||||
// Sessions should be different objects (different pages have different CDP sessions)
|
||||
expect(cdp2).not.toBe(cdp1);
|
||||
});
|
||||
|
||||
it('should stop screencast on tab switch', async () => {
|
||||
// Start screencast on tab 0
|
||||
await browser.startScreencast(() => {});
|
||||
expect(browser.isScreencasting()).toBe(true);
|
||||
|
||||
// Create new tab and switch
|
||||
await browser.newTab();
|
||||
await browser.switchTo(1);
|
||||
|
||||
// Screencast should be stopped (it's page-specific)
|
||||
expect(browser.isScreencasting()).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('input injection', () => {
|
||||
it('should inject mouse move event', async () => {
|
||||
await expect(
|
||||
browser.injectMouseEvent({
|
||||
type: 'mouseMoved',
|
||||
x: 100,
|
||||
y: 100,
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
});
|
||||
|
||||
it('should inject mouse click events', async () => {
|
||||
await expect(
|
||||
browser.injectMouseEvent({
|
||||
type: 'mousePressed',
|
||||
x: 100,
|
||||
y: 100,
|
||||
button: 'left',
|
||||
clickCount: 1,
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
|
||||
await expect(
|
||||
browser.injectMouseEvent({
|
||||
type: 'mouseReleased',
|
||||
x: 100,
|
||||
y: 100,
|
||||
button: 'left',
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
});
|
||||
|
||||
it('should inject mouse wheel event', async () => {
|
||||
await expect(
|
||||
browser.injectMouseEvent({
|
||||
type: 'mouseWheel',
|
||||
x: 100,
|
||||
y: 100,
|
||||
deltaX: 0,
|
||||
deltaY: 100,
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
});
|
||||
|
||||
it('should inject keyboard events', async () => {
|
||||
await expect(
|
||||
browser.injectKeyboardEvent({
|
||||
type: 'keyDown',
|
||||
key: 'a',
|
||||
code: 'KeyA',
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
|
||||
await expect(
|
||||
browser.injectKeyboardEvent({
|
||||
type: 'keyUp',
|
||||
key: 'a',
|
||||
code: 'KeyA',
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
});
|
||||
|
||||
it('should inject char event', async () => {
|
||||
// CDP char events only accept single characters
|
||||
await expect(
|
||||
browser.injectKeyboardEvent({
|
||||
type: 'char',
|
||||
text: 'h',
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
});
|
||||
|
||||
it('should inject keyboard with modifiers', async () => {
|
||||
await expect(
|
||||
browser.injectKeyboardEvent({
|
||||
type: 'keyDown',
|
||||
key: 'c',
|
||||
code: 'KeyC',
|
||||
modifiers: 2, // Ctrl
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
});
|
||||
|
||||
it('should inject touch events', async () => {
|
||||
await expect(
|
||||
browser.injectTouchEvent({
|
||||
type: 'touchStart',
|
||||
touchPoints: [{ x: 100, y: 100 }],
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
|
||||
await expect(
|
||||
browser.injectTouchEvent({
|
||||
type: 'touchMove',
|
||||
touchPoints: [{ x: 150, y: 150 }],
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
|
||||
await expect(
|
||||
browser.injectTouchEvent({
|
||||
type: 'touchEnd',
|
||||
touchPoints: [],
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
});
|
||||
|
||||
it('should inject multi-touch events', async () => {
|
||||
await expect(
|
||||
browser.injectTouchEvent({
|
||||
type: 'touchStart',
|
||||
touchPoints: [
|
||||
{ x: 100, y: 100, id: 0 },
|
||||
{ x: 200, y: 200, id: 1 },
|
||||
],
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
|
||||
await expect(
|
||||
browser.injectTouchEvent({
|
||||
type: 'touchEnd',
|
||||
touchPoints: [],
|
||||
})
|
||||
).resolves.not.toThrow();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
+31
-1
@@ -782,6 +782,9 @@ export class BrowserManager {
|
||||
throw new Error('Browser not launched');
|
||||
}
|
||||
|
||||
// Invalidate CDP session since we're switching to a new page
|
||||
await this.invalidateCDPSession();
|
||||
|
||||
const context = this.contexts[0]; // Use first context for tabs
|
||||
const page = await context.newPage();
|
||||
this.pages.push(page);
|
||||
@@ -820,14 +823,36 @@ export class BrowserManager {
|
||||
return { index: this.activePageIndex, total: this.pages.length };
|
||||
}
|
||||
|
||||
/**
|
||||
* Invalidate the current CDP session (must be called before switching pages)
|
||||
* This ensures screencast and input injection work correctly after tab switch
|
||||
*/
|
||||
private async invalidateCDPSession(): Promise<void> {
|
||||
// Stop screencast if active (it's tied to the current page's CDP session)
|
||||
if (this.screencastActive) {
|
||||
await this.stopScreencast();
|
||||
}
|
||||
|
||||
// Detach and clear the CDP session
|
||||
if (this.cdpSession) {
|
||||
await this.cdpSession.detach().catch(() => {});
|
||||
this.cdpSession = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Switch to a specific tab/page by index
|
||||
*/
|
||||
switchTo(index: number): { index: number; url: string; title: string } {
|
||||
async switchTo(index: number): Promise<{ index: number; url: string; title: string }> {
|
||||
if (index < 0 || index >= this.pages.length) {
|
||||
throw new Error(`Invalid tab index: ${index}. Available: 0-${this.pages.length - 1}`);
|
||||
}
|
||||
|
||||
// Invalidate CDP session before switching (it's page-specific)
|
||||
if (index !== this.activePageIndex) {
|
||||
await this.invalidateCDPSession();
|
||||
}
|
||||
|
||||
this.activePageIndex = index;
|
||||
const page = this.pages[index];
|
||||
|
||||
@@ -852,6 +877,11 @@ export class BrowserManager {
|
||||
throw new Error('Cannot close the last tab. Use "close" to close the browser.');
|
||||
}
|
||||
|
||||
// If closing the active tab, invalidate CDP session first
|
||||
if (targetIndex === this.activePageIndex) {
|
||||
await this.invalidateCDPSession();
|
||||
}
|
||||
|
||||
const page = this.pages[targetIndex];
|
||||
await page.close();
|
||||
this.pages.splice(targetIndex, 1);
|
||||
|
||||
@@ -620,6 +620,391 @@ describe('parseCommand', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('screencast', () => {
|
||||
it('should parse screencast_start with defaults', () => {
|
||||
const result = parseCommand(cmd({ id: '1', action: 'screencast_start' }));
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.action).toBe('screencast_start');
|
||||
}
|
||||
});
|
||||
|
||||
it('should parse screencast_start with all options', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'screencast_start',
|
||||
format: 'png',
|
||||
quality: 90,
|
||||
maxWidth: 1920,
|
||||
maxHeight: 1080,
|
||||
everyNthFrame: 2,
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.format).toBe('png');
|
||||
expect(result.command.quality).toBe(90);
|
||||
expect(result.command.maxWidth).toBe(1920);
|
||||
expect(result.command.maxHeight).toBe(1080);
|
||||
expect(result.command.everyNthFrame).toBe(2);
|
||||
}
|
||||
});
|
||||
|
||||
it('should reject screencast_start with invalid format', () => {
|
||||
const result = parseCommand(cmd({ id: '1', action: 'screencast_start', format: 'gif' }));
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it('should reject screencast_start with quality out of range', () => {
|
||||
const result = parseCommand(cmd({ id: '1', action: 'screencast_start', quality: 150 }));
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it('should reject screencast_start with negative maxWidth', () => {
|
||||
const result = parseCommand(cmd({ id: '1', action: 'screencast_start', maxWidth: -100 }));
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it('should parse screencast_stop', () => {
|
||||
const result = parseCommand(cmd({ id: '1', action: 'screencast_stop' }));
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.action).toBe('screencast_stop');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('input injection', () => {
|
||||
describe('input_mouse', () => {
|
||||
it('should parse mousePressed event', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_mouse',
|
||||
type: 'mousePressed',
|
||||
x: 100,
|
||||
y: 200,
|
||||
button: 'left',
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.action).toBe('input_mouse');
|
||||
expect(result.command.type).toBe('mousePressed');
|
||||
expect(result.command.x).toBe(100);
|
||||
expect(result.command.y).toBe(200);
|
||||
expect(result.command.button).toBe('left');
|
||||
}
|
||||
});
|
||||
|
||||
it('should parse mouseReleased event', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_mouse',
|
||||
type: 'mouseReleased',
|
||||
x: 100,
|
||||
y: 200,
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it('should parse mouseMoved event', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_mouse',
|
||||
type: 'mouseMoved',
|
||||
x: 150,
|
||||
y: 250,
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it('should parse mouseWheel event with deltas', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_mouse',
|
||||
type: 'mouseWheel',
|
||||
x: 100,
|
||||
y: 200,
|
||||
deltaX: 0,
|
||||
deltaY: 100,
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.deltaX).toBe(0);
|
||||
expect(result.command.deltaY).toBe(100);
|
||||
}
|
||||
});
|
||||
|
||||
it('should parse mouse event with modifiers', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_mouse',
|
||||
type: 'mousePressed',
|
||||
x: 100,
|
||||
y: 200,
|
||||
modifiers: 6, // Ctrl + Meta
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.modifiers).toBe(6);
|
||||
}
|
||||
});
|
||||
|
||||
it('should parse mouse event with clickCount', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_mouse',
|
||||
type: 'mousePressed',
|
||||
x: 100,
|
||||
y: 200,
|
||||
clickCount: 2,
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.clickCount).toBe(2);
|
||||
}
|
||||
});
|
||||
|
||||
it('should reject input_mouse with invalid type', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_mouse',
|
||||
type: 'invalid',
|
||||
x: 100,
|
||||
y: 200,
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it('should reject input_mouse without x coordinate', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_mouse',
|
||||
type: 'mousePressed',
|
||||
y: 200,
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it('should reject input_mouse without y coordinate', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_mouse',
|
||||
type: 'mousePressed',
|
||||
x: 100,
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('input_keyboard', () => {
|
||||
it('should parse keyDown event', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_keyboard',
|
||||
type: 'keyDown',
|
||||
key: 'Enter',
|
||||
code: 'Enter',
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.action).toBe('input_keyboard');
|
||||
expect(result.command.type).toBe('keyDown');
|
||||
expect(result.command.key).toBe('Enter');
|
||||
expect(result.command.code).toBe('Enter');
|
||||
}
|
||||
});
|
||||
|
||||
it('should parse keyUp event', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_keyboard',
|
||||
type: 'keyUp',
|
||||
key: 'a',
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it('should parse char event with text', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_keyboard',
|
||||
type: 'char',
|
||||
text: 'hello',
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.text).toBe('hello');
|
||||
}
|
||||
});
|
||||
|
||||
it('should parse keyboard event with modifiers', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_keyboard',
|
||||
type: 'keyDown',
|
||||
key: 'c',
|
||||
modifiers: 2, // Ctrl
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.modifiers).toBe(2);
|
||||
}
|
||||
});
|
||||
|
||||
it('should reject input_keyboard with invalid type', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_keyboard',
|
||||
type: 'invalid',
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('input_touch', () => {
|
||||
it('should parse touchStart event', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_touch',
|
||||
type: 'touchStart',
|
||||
touchPoints: [{ x: 100, y: 200 }],
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.action).toBe('input_touch');
|
||||
expect(result.command.type).toBe('touchStart');
|
||||
expect(result.command.touchPoints).toHaveLength(1);
|
||||
expect(result.command.touchPoints[0].x).toBe(100);
|
||||
expect(result.command.touchPoints[0].y).toBe(200);
|
||||
}
|
||||
});
|
||||
|
||||
it('should parse touchEnd event', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_touch',
|
||||
type: 'touchEnd',
|
||||
touchPoints: [],
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it('should parse touchMove event', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_touch',
|
||||
type: 'touchMove',
|
||||
touchPoints: [{ x: 150, y: 250 }],
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it('should parse touchCancel event', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_touch',
|
||||
type: 'touchCancel',
|
||||
touchPoints: [],
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
});
|
||||
|
||||
it('should parse multi-touch event', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_touch',
|
||||
type: 'touchStart',
|
||||
touchPoints: [
|
||||
{ x: 100, y: 200, id: 0 },
|
||||
{ x: 300, y: 400, id: 1 },
|
||||
],
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.touchPoints).toHaveLength(2);
|
||||
}
|
||||
});
|
||||
|
||||
it('should parse touch event with modifiers', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_touch',
|
||||
type: 'touchStart',
|
||||
touchPoints: [{ x: 100, y: 200 }],
|
||||
modifiers: 8, // Shift
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(true);
|
||||
if (result.success) {
|
||||
expect(result.command.modifiers).toBe(8);
|
||||
}
|
||||
});
|
||||
|
||||
it('should reject input_touch with invalid type', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_touch',
|
||||
type: 'invalid',
|
||||
touchPoints: [],
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
|
||||
it('should reject input_touch without touchPoints', () => {
|
||||
const result = parseCommand(
|
||||
cmd({
|
||||
id: '1',
|
||||
action: 'input_touch',
|
||||
type: 'touchStart',
|
||||
})
|
||||
);
|
||||
expect(result.success).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('invalid commands', () => {
|
||||
it('should reject unknown action', () => {
|
||||
const result = parseCommand(cmd({ id: '1', action: 'unknown' }));
|
||||
|
||||
Reference in New Issue
Block a user