Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
447e6ece0b | ||
|
|
d86de0e736 | ||
|
|
673e2e266e |
@@ -270,6 +270,30 @@ Each session has its own:
|
|||||||
- Navigation history
|
- Navigation history
|
||||||
- Authentication state
|
- Authentication state
|
||||||
|
|
||||||
|
## Persistent Profiles
|
||||||
|
|
||||||
|
By default, browser state (cookies, localStorage, login sessions) is ephemeral and lost when the browser closes. Use `--profile` to persist state across browser restarts:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Use a persistent profile directory
|
||||||
|
agent-browser --profile ~/.myapp-profile open myapp.com
|
||||||
|
|
||||||
|
# Login once, then reuse the authenticated session
|
||||||
|
agent-browser --profile ~/.myapp-profile open myapp.com/dashboard
|
||||||
|
|
||||||
|
# Or via environment variable
|
||||||
|
AGENT_BROWSER_PROFILE=~/.myapp-profile agent-browser open myapp.com
|
||||||
|
```
|
||||||
|
|
||||||
|
The profile directory stores:
|
||||||
|
- Cookies and localStorage
|
||||||
|
- IndexedDB data
|
||||||
|
- Service workers
|
||||||
|
- Browser cache
|
||||||
|
- Login sessions
|
||||||
|
|
||||||
|
**Tip**: Use different profile paths for different projects to keep their browser state isolated.
|
||||||
|
|
||||||
## Snapshot Options
|
## Snapshot Options
|
||||||
|
|
||||||
The `snapshot` command supports filtering to reduce output size:
|
The `snapshot` command supports filtering to reduce output size:
|
||||||
@@ -295,6 +319,7 @@ agent-browser snapshot -i -c -d 5 # Combine options
|
|||||||
| Option | Description |
|
| Option | Description |
|
||||||
|--------|-------------|
|
|--------|-------------|
|
||||||
| `--session <name>` | Use isolated session (or `AGENT_BROWSER_SESSION` env) |
|
| `--session <name>` | Use isolated session (or `AGENT_BROWSER_SESSION` env) |
|
||||||
|
| `--profile <path>` | Persistent browser profile directory (or `AGENT_BROWSER_PROFILE` env) |
|
||||||
| `--headers <json>` | Set HTTP headers scoped to the URL's origin |
|
| `--headers <json>` | Set HTTP headers scoped to the URL's origin |
|
||||||
| `--executable-path <path>` | Custom browser executable (or `AGENT_BROWSER_EXECUTABLE_PATH` env) |
|
| `--executable-path <path>` | Custom browser executable (or `AGENT_BROWSER_EXECUTABLE_PATH` env) |
|
||||||
| `--json` | JSON output (for agents) |
|
| `--json` | JSON output (for agents) |
|
||||||
@@ -479,113 +504,6 @@ This enables control of:
|
|||||||
- WebView2 applications
|
- WebView2 applications
|
||||||
- Any browser exposing a CDP endpoint
|
- 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
|
## Architecture
|
||||||
|
|
||||||
agent-browser uses a client-daemon architecture:
|
agent-browser uses a client-daemon architecture:
|
||||||
|
|||||||
@@ -901,6 +901,7 @@ mod tests {
|
|||||||
debug: false,
|
debug: false,
|
||||||
headers: None,
|
headers: None,
|
||||||
executable_path: None,
|
executable_path: None,
|
||||||
|
extensions: Vec::new(),
|
||||||
cdp: None,
|
cdp: None,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+17
-2
@@ -159,9 +159,16 @@ pub struct DaemonResult {
|
|||||||
pub already_running: bool,
|
pub already_running: bool,
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn ensure_daemon(session: &str, headed: bool, executable_path: Option<&str>) -> Result<DaemonResult, String> {
|
pub fn ensure_daemon(
|
||||||
|
session: &str,
|
||||||
|
headed: bool,
|
||||||
|
executable_path: Option<&str>,
|
||||||
|
extensions: &[String],
|
||||||
|
) -> Result<DaemonResult, String> {
|
||||||
if is_daemon_running(session) && daemon_ready(session) {
|
if is_daemon_running(session) && daemon_ready(session) {
|
||||||
return Ok(DaemonResult { already_running: true });
|
return Ok(DaemonResult {
|
||||||
|
already_running: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
let exe_path = env::current_exe().map_err(|e| e.to_string())?;
|
let exe_path = env::current_exe().map_err(|e| e.to_string())?;
|
||||||
@@ -196,6 +203,10 @@ pub fn ensure_daemon(session: &str, headed: bool, executable_path: Option<&str>)
|
|||||||
cmd.env("AGENT_BROWSER_EXECUTABLE_PATH", path);
|
cmd.env("AGENT_BROWSER_EXECUTABLE_PATH", path);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if !extensions.is_empty() {
|
||||||
|
cmd.env("AGENT_BROWSER_EXTENSIONS", extensions.join(","));
|
||||||
|
}
|
||||||
|
|
||||||
// Create new process group and session to fully detach
|
// Create new process group and session to fully detach
|
||||||
unsafe {
|
unsafe {
|
||||||
cmd.pre_exec(|| {
|
cmd.pre_exec(|| {
|
||||||
@@ -234,6 +245,10 @@ pub fn ensure_daemon(session: &str, headed: bool, executable_path: Option<&str>)
|
|||||||
cmd.env("AGENT_BROWSER_EXECUTABLE_PATH", path);
|
cmd.env("AGENT_BROWSER_EXECUTABLE_PATH", path);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if !extensions.is_empty() {
|
||||||
|
cmd.env("AGENT_BROWSER_EXTENSIONS", extensions.join(","));
|
||||||
|
}
|
||||||
|
|
||||||
// CREATE_NEW_PROCESS_GROUP | DETACHED_PROCESS
|
// CREATE_NEW_PROCESS_GROUP | DETACHED_PROCESS
|
||||||
const CREATE_NEW_PROCESS_GROUP: u32 = 0x00000200;
|
const CREATE_NEW_PROCESS_GROUP: u32 = 0x00000200;
|
||||||
const DETACHED_PROCESS: u32 = 0x00000008;
|
const DETACHED_PROCESS: u32 = 0x00000008;
|
||||||
|
|||||||
+23
-2
@@ -9,9 +9,16 @@ pub struct Flags {
|
|||||||
pub headers: Option<String>,
|
pub headers: Option<String>,
|
||||||
pub executable_path: Option<String>,
|
pub executable_path: Option<String>,
|
||||||
pub cdp: Option<String>,
|
pub cdp: Option<String>,
|
||||||
|
pub extensions: Vec<String>,
|
||||||
|
pub profile: Option<String>,
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn parse_flags(args: &[String]) -> Flags {
|
pub fn parse_flags(args: &[String]) -> Flags {
|
||||||
|
let extensions_env = env::var("AGENT_BROWSER_EXTENSIONS")
|
||||||
|
.ok()
|
||||||
|
.map(|s| s.split(',').map(|p| p.trim().to_string()).filter(|p| !p.is_empty()).collect::<Vec<_>>())
|
||||||
|
.unwrap_or_default();
|
||||||
|
|
||||||
let mut flags = Flags {
|
let mut flags = Flags {
|
||||||
json: false,
|
json: false,
|
||||||
full: false,
|
full: false,
|
||||||
@@ -21,6 +28,8 @@ pub fn parse_flags(args: &[String]) -> Flags {
|
|||||||
headers: None,
|
headers: None,
|
||||||
executable_path: env::var("AGENT_BROWSER_EXECUTABLE_PATH").ok(),
|
executable_path: env::var("AGENT_BROWSER_EXECUTABLE_PATH").ok(),
|
||||||
cdp: None,
|
cdp: None,
|
||||||
|
extensions: extensions_env,
|
||||||
|
profile: env::var("AGENT_BROWSER_PROFILE").ok(),
|
||||||
};
|
};
|
||||||
|
|
||||||
let mut i = 0;
|
let mut i = 0;
|
||||||
@@ -47,13 +56,25 @@ pub fn parse_flags(args: &[String]) -> Flags {
|
|||||||
flags.executable_path = Some(s.clone());
|
flags.executable_path = Some(s.clone());
|
||||||
i += 1;
|
i += 1;
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
"--extension" => {
|
||||||
|
if let Some(s) = args.get(i + 1) {
|
||||||
|
flags.extensions.push(s.clone());
|
||||||
|
i += 1;
|
||||||
|
}
|
||||||
|
},
|
||||||
"--cdp" => {
|
"--cdp" => {
|
||||||
if let Some(s) = args.get(i + 1) {
|
if let Some(s) = args.get(i + 1) {
|
||||||
flags.cdp = Some(s.clone());
|
flags.cdp = Some(s.clone());
|
||||||
i += 1;
|
i += 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
"--profile" => {
|
||||||
|
if let Some(s) = args.get(i + 1) {
|
||||||
|
flags.profile = Some(s.clone());
|
||||||
|
i += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
_ => {}
|
_ => {}
|
||||||
}
|
}
|
||||||
i += 1;
|
i += 1;
|
||||||
@@ -68,7 +89,7 @@ pub fn clean_args(args: &[String]) -> Vec<String> {
|
|||||||
// Global flags that should be stripped from command args
|
// Global flags that should be stripped from command args
|
||||||
const GLOBAL_FLAGS: &[&str] = &["--json", "--full", "--headed", "--debug"];
|
const GLOBAL_FLAGS: &[&str] = &["--json", "--full", "--headed", "--debug"];
|
||||||
// Global flags that take a value (need to skip the next arg too)
|
// Global flags that take a value (need to skip the next arg too)
|
||||||
const GLOBAL_FLAGS_WITH_VALUE: &[&str] = &["--session", "--headers", "--executable-path", "--cdp"];
|
const GLOBAL_FLAGS_WITH_VALUE: &[&str] = &["--session", "--headers", "--executable-path", "--cdp", "--extension", "--profile"];
|
||||||
|
|
||||||
for arg in args.iter() {
|
for arg in args.iter() {
|
||||||
if skip_next {
|
if skip_next {
|
||||||
|
|||||||
+22
-8
@@ -149,7 +149,7 @@ fn main() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let daemon_result = match ensure_daemon(&flags.session, flags.headed, flags.executable_path.as_deref()) {
|
let daemon_result = match ensure_daemon(&flags.session, flags.headed, flags.executable_path.as_deref(), &flags.extensions) {
|
||||||
Ok(result) => result,
|
Ok(result) => result,
|
||||||
Err(e) => {
|
Err(e) => {
|
||||||
if flags.json {
|
if flags.json {
|
||||||
@@ -161,10 +161,18 @@ fn main() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Warn if executable_path was specified but daemon was already running
|
// Warn if executable_path, profile, or extensions were specified but daemon was already running
|
||||||
if daemon_result.already_running && flags.executable_path.is_some() {
|
if daemon_result.already_running && (flags.executable_path.is_some() || !flags.extensions.is_empty() || flags.profile.is_some()) {
|
||||||
if !flags.json {
|
if !flags.json {
|
||||||
eprintln!("\x1b[33m⚠\x1b[0m --executable-path ignored: daemon already running. Use 'agent-browser close' first to restart with new path.");
|
if flags.executable_path.is_some() {
|
||||||
|
eprintln!("\x1b[33m⚠\x1b[0m --executable-path ignored: daemon already running. Use 'agent-browser close' first to restart with new path.");
|
||||||
|
}
|
||||||
|
if !flags.extensions.is_empty() {
|
||||||
|
eprintln!("\x1b[33m⚠\x1b[0m --extension ignored: daemon already running. Use 'agent-browser close' first to restart with extensions.");
|
||||||
|
}
|
||||||
|
if flags.profile.is_some() {
|
||||||
|
eprintln!("\x1b[33m⚠\x1b[0m --profile ignored: daemon already running. Use 'agent-browser close' first to restart with profile.");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -224,16 +232,22 @@ fn main() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Launch headed browser if --headed flag is set (without CDP)
|
// Launch headed browser if --headed flag is set (without CDP)
|
||||||
if flags.headed && flags.cdp.is_none() {
|
// Also launch with profile if --profile is set
|
||||||
let launch_cmd = json!({
|
if (flags.headed || flags.profile.is_some()) && flags.cdp.is_none() {
|
||||||
|
let mut launch_cmd = json!({
|
||||||
"id": gen_id(),
|
"id": gen_id(),
|
||||||
"action": "launch",
|
"action": "launch",
|
||||||
"headless": false
|
"headless": !flags.headed
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Add profile path if specified
|
||||||
|
if let Some(ref profile_path) = flags.profile {
|
||||||
|
launch_cmd["profile"] = json!(profile_path);
|
||||||
|
}
|
||||||
|
|
||||||
if let Err(e) = send_command(launch_cmd, &flags.session) {
|
if let Err(e) = send_command(launch_cmd, &flags.session) {
|
||||||
if !flags.json {
|
if !flags.json {
|
||||||
eprintln!("\x1b[33m⚠\x1b[0m Could not launch headed browser: {}", e);
|
eprintln!("\x1b[33m⚠\x1b[0m Could not launch browser: {}", e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+3
-5
@@ -1189,19 +1189,16 @@ Snapshot Options:
|
|||||||
|
|
||||||
Options:
|
Options:
|
||||||
--session <name> Isolated session (or AGENT_BROWSER_SESSION env)
|
--session <name> Isolated session (or AGENT_BROWSER_SESSION env)
|
||||||
|
--profile <path> Persistent browser profile (or AGENT_BROWSER_PROFILE env)
|
||||||
--headers <json> HTTP headers scoped to URL's origin (for auth)
|
--headers <json> HTTP headers scoped to URL's origin (for auth)
|
||||||
--executable-path <path> Custom browser executable (or AGENT_BROWSER_EXECUTABLE_PATH)
|
--executable-path <path> Custom browser executable (or AGENT_BROWSER_EXECUTABLE_PATH)
|
||||||
|
--extension <path> Load browser extensions (repeatable).
|
||||||
--json JSON output
|
--json JSON output
|
||||||
--full, -f Full page screenshot
|
--full, -f Full page screenshot
|
||||||
--headed Show browser window (not headless)
|
--headed Show browser window (not headless)
|
||||||
--cdp <port> Connect via CDP (Chrome DevTools Protocol)
|
--cdp <port> Connect via CDP (Chrome DevTools Protocol)
|
||||||
--debug Debug output
|
--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:
|
Examples:
|
||||||
agent-browser open example.com
|
agent-browser open example.com
|
||||||
agent-browser snapshot -i # Interactive elements only
|
agent-browser snapshot -i # Interactive elements only
|
||||||
@@ -1211,6 +1208,7 @@ Examples:
|
|||||||
agent-browser get text @e1
|
agent-browser get text @e1
|
||||||
agent-browser screenshot --full
|
agent-browser screenshot --full
|
||||||
agent-browser --cdp 9222 snapshot # Connect via CDP port
|
agent-browser --cdp 9222 snapshot # Connect via CDP port
|
||||||
|
agent-browser --profile ~/.myapp open example.com # Persistent profile
|
||||||
"#
|
"#
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,217 +0,0 @@
|
|||||||
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,7 +12,6 @@ const navigation = [
|
|||||||
{ name: "Selectors", href: "/selectors" },
|
{ name: "Selectors", href: "/selectors" },
|
||||||
{ name: "Sessions", href: "/sessions" },
|
{ name: "Sessions", href: "/sessions" },
|
||||||
{ name: "Snapshots", href: "/snapshots" },
|
{ name: "Snapshots", href: "/snapshots" },
|
||||||
{ name: "Streaming", href: "/streaming" },
|
|
||||||
{ name: "Agent Mode", href: "/agent-mode" },
|
{ name: "Agent Mode", href: "/agent-mode" },
|
||||||
{ name: "CDP Mode", href: "/cdp-mode" },
|
{ name: "CDP Mode", href: "/cdp-mode" },
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -53,12 +53,10 @@
|
|||||||
"homepage": "https://github.com/vercel-labs/agent-browser#readme",
|
"homepage": "https://github.com/vercel-labs/agent-browser#readme",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"playwright-core": "^1.57.0",
|
"playwright-core": "^1.57.0",
|
||||||
"ws": "^8.19.0",
|
|
||||||
"zod": "^3.22.4"
|
"zod": "^3.22.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^20.10.0",
|
"@types/node": "^20.10.0",
|
||||||
"@types/ws": "^8.18.1",
|
|
||||||
"husky": "^9.1.7",
|
"husky": "^9.1.7",
|
||||||
"lint-staged": "^15.2.11",
|
"lint-staged": "^15.2.11",
|
||||||
"playwright": "^1.57.0",
|
"playwright": "^1.57.0",
|
||||||
|
|||||||
Generated
-27
@@ -11,9 +11,6 @@ importers:
|
|||||||
playwright-core:
|
playwright-core:
|
||||||
specifier: ^1.57.0
|
specifier: ^1.57.0
|
||||||
version: 1.57.0
|
version: 1.57.0
|
||||||
ws:
|
|
||||||
specifier: ^8.19.0
|
|
||||||
version: 8.19.0
|
|
||||||
zod:
|
zod:
|
||||||
specifier: ^3.22.4
|
specifier: ^3.22.4
|
||||||
version: 3.25.76
|
version: 3.25.76
|
||||||
@@ -21,9 +18,6 @@ importers:
|
|||||||
'@types/node':
|
'@types/node':
|
||||||
specifier: ^20.10.0
|
specifier: ^20.10.0
|
||||||
version: 20.19.28
|
version: 20.19.28
|
||||||
'@types/ws':
|
|
||||||
specifier: ^8.18.1
|
|
||||||
version: 8.18.1
|
|
||||||
husky:
|
husky:
|
||||||
specifier: ^9.1.7
|
specifier: ^9.1.7
|
||||||
version: 9.1.7
|
version: 9.1.7
|
||||||
@@ -347,9 +341,6 @@ packages:
|
|||||||
'@types/node@20.19.28':
|
'@types/node@20.19.28':
|
||||||
resolution: {integrity: sha512-VyKBr25BuFDzBFCK5sUM6ZXiWfqgCTwTAOK8qzGV/m9FCirXYDlmczJ+d5dXBAQALGCdRRdbteKYfJ84NGEusw==}
|
resolution: {integrity: sha512-VyKBr25BuFDzBFCK5sUM6ZXiWfqgCTwTAOK8qzGV/m9FCirXYDlmczJ+d5dXBAQALGCdRRdbteKYfJ84NGEusw==}
|
||||||
|
|
||||||
'@types/ws@8.18.1':
|
|
||||||
resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
|
|
||||||
|
|
||||||
'@vitest/expect@4.0.16':
|
'@vitest/expect@4.0.16':
|
||||||
resolution: {integrity: sha512-eshqULT2It7McaJkQGLkPjPjNph+uevROGuIMJdG3V+0BSR2w9u6J9Lwu+E8cK5TETlfou8GRijhafIMhXsimA==}
|
resolution: {integrity: sha512-eshqULT2It7McaJkQGLkPjPjNph+uevROGuIMJdG3V+0BSR2w9u6J9Lwu+E8cK5TETlfou8GRijhafIMhXsimA==}
|
||||||
|
|
||||||
@@ -814,18 +805,6 @@ packages:
|
|||||||
resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
|
resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
|
||||||
engines: {node: '>=18'}
|
engines: {node: '>=18'}
|
||||||
|
|
||||||
ws@8.19.0:
|
|
||||||
resolution: {integrity: sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==}
|
|
||||||
engines: {node: '>=10.0.0'}
|
|
||||||
peerDependencies:
|
|
||||||
bufferutil: ^4.0.1
|
|
||||||
utf-8-validate: '>=5.0.2'
|
|
||||||
peerDependenciesMeta:
|
|
||||||
bufferutil:
|
|
||||||
optional: true
|
|
||||||
utf-8-validate:
|
|
||||||
optional: true
|
|
||||||
|
|
||||||
yaml@2.8.2:
|
yaml@2.8.2:
|
||||||
resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
|
resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
|
||||||
engines: {node: '>= 14.6'}
|
engines: {node: '>= 14.6'}
|
||||||
@@ -1006,10 +985,6 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
undici-types: 6.21.0
|
undici-types: 6.21.0
|
||||||
|
|
||||||
'@types/ws@8.18.1':
|
|
||||||
dependencies:
|
|
||||||
'@types/node': 20.19.28
|
|
||||||
|
|
||||||
'@vitest/expect@4.0.16':
|
'@vitest/expect@4.0.16':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@standard-schema/spec': 1.1.0
|
'@standard-schema/spec': 1.1.0
|
||||||
@@ -1452,8 +1427,6 @@ snapshots:
|
|||||||
string-width: 7.2.0
|
string-width: 7.2.0
|
||||||
strip-ansi: 7.1.2
|
strip-ansi: 7.1.2
|
||||||
|
|
||||||
ws@8.19.0: {}
|
|
||||||
|
|
||||||
yaml@2.8.2: {}
|
yaml@2.8.2: {}
|
||||||
|
|
||||||
zod@3.25.76: {}
|
zod@3.25.76: {}
|
||||||
|
|||||||
+2
-109
@@ -1,5 +1,5 @@
|
|||||||
import type { Page, Frame } from 'playwright-core';
|
import type { Page, Frame } from 'playwright-core';
|
||||||
import type { BrowserManager, ScreencastFrame } from './browser.js';
|
import type { BrowserManager } from './browser.js';
|
||||||
import type {
|
import type {
|
||||||
Command,
|
Command,
|
||||||
Response,
|
Response,
|
||||||
@@ -94,11 +94,6 @@ import type {
|
|||||||
MultiSelectCommand,
|
MultiSelectCommand,
|
||||||
WaitForDownloadCommand,
|
WaitForDownloadCommand,
|
||||||
ResponseBodyCommand,
|
ResponseBodyCommand,
|
||||||
ScreencastStartCommand,
|
|
||||||
ScreencastStopCommand,
|
|
||||||
InputMouseCommand,
|
|
||||||
InputKeyboardCommand,
|
|
||||||
InputTouchCommand,
|
|
||||||
NavigateData,
|
NavigateData,
|
||||||
ScreenshotData,
|
ScreenshotData,
|
||||||
EvaluateData,
|
EvaluateData,
|
||||||
@@ -107,25 +102,9 @@ import type {
|
|||||||
TabNewData,
|
TabNewData,
|
||||||
TabSwitchData,
|
TabSwitchData,
|
||||||
TabCloseData,
|
TabCloseData,
|
||||||
ScreencastStartData,
|
|
||||||
ScreencastStopData,
|
|
||||||
InputEventData,
|
|
||||||
} from './types.js';
|
} from './types.js';
|
||||||
import { successResponse, errorResponse } from './protocol.js';
|
import { successResponse, errorResponse } from './protocol.js';
|
||||||
|
|
||||||
// Callback for screencast frames - will be set by the daemon when streaming is active
|
|
||||||
let screencastFrameCallback: ((frame: ScreencastFrame) => void) | null = null;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set the callback for screencast frames
|
|
||||||
* This is called by the daemon to set up frame streaming
|
|
||||||
*/
|
|
||||||
export function setScreencastFrameCallback(
|
|
||||||
callback: ((frame: ScreencastFrame) => void) | null
|
|
||||||
): void {
|
|
||||||
screencastFrameCallback = callback;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Snapshot response type
|
// Snapshot response type
|
||||||
interface SnapshotData {
|
interface SnapshotData {
|
||||||
snapshot: string;
|
snapshot: string;
|
||||||
@@ -407,16 +386,6 @@ export async function executeCommand(command: Command, browser: BrowserManager):
|
|||||||
return await handleWaitForDownload(command, browser);
|
return await handleWaitForDownload(command, browser);
|
||||||
case 'responsebody':
|
case 'responsebody':
|
||||||
return await handleResponseBody(command, browser);
|
return await handleResponseBody(command, browser);
|
||||||
case 'screencast_start':
|
|
||||||
return await handleScreencastStart(command, browser);
|
|
||||||
case 'screencast_stop':
|
|
||||||
return await handleScreencastStop(command, browser);
|
|
||||||
case 'input_mouse':
|
|
||||||
return await handleInputMouse(command, browser);
|
|
||||||
case 'input_keyboard':
|
|
||||||
return await handleInputKeyboard(command, browser);
|
|
||||||
case 'input_touch':
|
|
||||||
return await handleInputTouch(command, browser);
|
|
||||||
default: {
|
default: {
|
||||||
// TypeScript narrows to never here, but we handle it for safety
|
// TypeScript narrows to never here, but we handle it for safety
|
||||||
const unknownCommand = command as { id: string; action: string };
|
const unknownCommand = command as { id: string; action: string };
|
||||||
@@ -709,7 +678,7 @@ async function handleTabSwitch(
|
|||||||
command: TabSwitchCommand,
|
command: TabSwitchCommand,
|
||||||
browser: BrowserManager
|
browser: BrowserManager
|
||||||
): Promise<Response<TabSwitchData>> {
|
): Promise<Response<TabSwitchData>> {
|
||||||
const result = await browser.switchTo(command.index);
|
const result = browser.switchTo(command.index);
|
||||||
const page = browser.getPage();
|
const page = browser.getPage();
|
||||||
return successResponse(command.id, {
|
return successResponse(command.id, {
|
||||||
...result,
|
...result,
|
||||||
@@ -1800,79 +1769,3 @@ async function handleResponseBody(
|
|||||||
body: parsed,
|
body: parsed,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Screencast and input injection handlers
|
|
||||||
|
|
||||||
async function handleScreencastStart(
|
|
||||||
command: ScreencastStartCommand,
|
|
||||||
browser: BrowserManager
|
|
||||||
): Promise<Response<ScreencastStartData>> {
|
|
||||||
if (!screencastFrameCallback) {
|
|
||||||
throw new Error('Screencast frame callback not set. Start the streaming server first.');
|
|
||||||
}
|
|
||||||
|
|
||||||
await browser.startScreencast(screencastFrameCallback, {
|
|
||||||
format: command.format,
|
|
||||||
quality: command.quality,
|
|
||||||
maxWidth: command.maxWidth,
|
|
||||||
maxHeight: command.maxHeight,
|
|
||||||
everyNthFrame: command.everyNthFrame,
|
|
||||||
});
|
|
||||||
|
|
||||||
return successResponse(command.id, {
|
|
||||||
started: true,
|
|
||||||
format: command.format ?? 'jpeg',
|
|
||||||
quality: command.quality ?? 80,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleScreencastStop(
|
|
||||||
command: ScreencastStopCommand,
|
|
||||||
browser: BrowserManager
|
|
||||||
): Promise<Response<ScreencastStopData>> {
|
|
||||||
await browser.stopScreencast();
|
|
||||||
return successResponse(command.id, { stopped: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleInputMouse(
|
|
||||||
command: InputMouseCommand,
|
|
||||||
browser: BrowserManager
|
|
||||||
): Promise<Response<InputEventData>> {
|
|
||||||
await browser.injectMouseEvent({
|
|
||||||
type: command.type,
|
|
||||||
x: command.x,
|
|
||||||
y: command.y,
|
|
||||||
button: command.button,
|
|
||||||
clickCount: command.clickCount,
|
|
||||||
deltaX: command.deltaX,
|
|
||||||
deltaY: command.deltaY,
|
|
||||||
modifiers: command.modifiers,
|
|
||||||
});
|
|
||||||
return successResponse(command.id, { injected: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleInputKeyboard(
|
|
||||||
command: InputKeyboardCommand,
|
|
||||||
browser: BrowserManager
|
|
||||||
): Promise<Response<InputEventData>> {
|
|
||||||
await browser.injectKeyboardEvent({
|
|
||||||
type: command.type,
|
|
||||||
key: command.key,
|
|
||||||
code: command.code,
|
|
||||||
text: command.text,
|
|
||||||
modifiers: command.modifiers,
|
|
||||||
});
|
|
||||||
return successResponse(command.id, { injected: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleInputTouch(
|
|
||||||
command: InputTouchCommand,
|
|
||||||
browser: BrowserManager
|
|
||||||
): Promise<Response<InputEventData>> {
|
|
||||||
await browser.injectTouchEvent({
|
|
||||||
type: command.type,
|
|
||||||
touchPoints: command.touchPoints,
|
|
||||||
modifiers: command.modifiers,
|
|
||||||
});
|
|
||||||
return successResponse(command.id, { injected: true });
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -378,256 +378,4 @@ describe('BrowserManager', () => {
|
|||||||
await expect(browser.clearScopedHeaders('https://never-set.com')).resolves.not.toThrow();
|
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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
+61
-273
@@ -11,35 +11,12 @@ import {
|
|||||||
type Request,
|
type Request,
|
||||||
type Route,
|
type Route,
|
||||||
type Locator,
|
type Locator,
|
||||||
type CDPSession,
|
|
||||||
} from 'playwright-core';
|
} from 'playwright-core';
|
||||||
|
import path from 'node:path';
|
||||||
|
import os from 'node:os';
|
||||||
import type { LaunchCommand } from './types.js';
|
import type { LaunchCommand } from './types.js';
|
||||||
import { type RefMap, type EnhancedSnapshot, getEnhancedSnapshot, parseRef } from './snapshot.js';
|
import { type RefMap, type EnhancedSnapshot, getEnhancedSnapshot, parseRef } from './snapshot.js';
|
||||||
|
|
||||||
// Screencast frame data from CDP
|
|
||||||
export interface ScreencastFrame {
|
|
||||||
data: string; // base64 encoded image
|
|
||||||
metadata: {
|
|
||||||
offsetTop: number;
|
|
||||||
pageScaleFactor: number;
|
|
||||||
deviceWidth: number;
|
|
||||||
deviceHeight: number;
|
|
||||||
scrollOffsetX: number;
|
|
||||||
scrollOffsetY: number;
|
|
||||||
timestamp?: number;
|
|
||||||
};
|
|
||||||
sessionId: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Screencast options
|
|
||||||
export interface ScreencastOptions {
|
|
||||||
format?: 'jpeg' | 'png';
|
|
||||||
quality?: number; // 0-100, only for jpeg
|
|
||||||
maxWidth?: number;
|
|
||||||
maxHeight?: number;
|
|
||||||
everyNthFrame?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TrackedRequest {
|
interface TrackedRequest {
|
||||||
url: string;
|
url: string;
|
||||||
method: string;
|
method: string;
|
||||||
@@ -65,6 +42,7 @@ interface PageError {
|
|||||||
export class BrowserManager {
|
export class BrowserManager {
|
||||||
private browser: Browser | null = null;
|
private browser: Browser | null = null;
|
||||||
private cdpPort: number | null = null;
|
private cdpPort: number | null = null;
|
||||||
|
private isPersistentContext: boolean = false;
|
||||||
private contexts: BrowserContext[] = [];
|
private contexts: BrowserContext[] = [];
|
||||||
private pages: Page[] = [];
|
private pages: Page[] = [];
|
||||||
private activePageIndex: number = 0;
|
private activePageIndex: number = 0;
|
||||||
@@ -79,18 +57,11 @@ export class BrowserManager {
|
|||||||
private lastSnapshot: string = '';
|
private lastSnapshot: string = '';
|
||||||
private scopedHeaderRoutes: Map<string, (route: Route) => Promise<void>> = new Map();
|
private scopedHeaderRoutes: Map<string, (route: Route) => Promise<void>> = new Map();
|
||||||
|
|
||||||
// CDP session for screencast and input injection
|
|
||||||
private cdpSession: CDPSession | null = null;
|
|
||||||
private screencastActive: boolean = false;
|
|
||||||
private screencastSessionId: number = 0;
|
|
||||||
private frameCallback: ((frame: ScreencastFrame) => void) | null = null;
|
|
||||||
private screencastFrameHandler: ((params: any) => void) | null = null;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check if browser is launched
|
* Check if browser is launched
|
||||||
*/
|
*/
|
||||||
isLaunched(): boolean {
|
isLaunched(): boolean {
|
||||||
return this.browser !== null;
|
return this.browser !== null || this.isPersistentContext;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -637,12 +608,21 @@ export class BrowserManager {
|
|||||||
*/
|
*/
|
||||||
async launch(options: LaunchCommand): Promise<void> {
|
async launch(options: LaunchCommand): Promise<void> {
|
||||||
const cdpPort = options.cdpPort;
|
const cdpPort = options.cdpPort;
|
||||||
|
const hasExtensions = !!options.extensions?.length;
|
||||||
|
const hasProfile = !!options.profile;
|
||||||
|
|
||||||
if (this.browser) {
|
if (hasExtensions && cdpPort) {
|
||||||
const switchingFromCdpToBrowser = !cdpPort && this.cdpPort !== null;
|
throw new Error('Extensions cannot be used with CDP connection');
|
||||||
const needsCdpReconnect = !!cdpPort && this.needsCdpReconnect(cdpPort);
|
}
|
||||||
|
|
||||||
if (switchingFromCdpToBrowser || needsCdpReconnect) {
|
if (hasProfile && cdpPort) {
|
||||||
|
throw new Error('Profile cannot be used with CDP connection');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isLaunched()) {
|
||||||
|
const needsRelaunch =
|
||||||
|
(!cdpPort && this.cdpPort !== null) || (!!cdpPort && this.needsCdpReconnect(cdpPort));
|
||||||
|
if (needsRelaunch) {
|
||||||
await this.close();
|
await this.close();
|
||||||
} else {
|
} else {
|
||||||
return;
|
return;
|
||||||
@@ -654,35 +634,58 @@ export class BrowserManager {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Select browser type
|
|
||||||
const browserType = options.browser ?? 'chromium';
|
const browserType = options.browser ?? 'chromium';
|
||||||
|
if (hasExtensions && browserType !== 'chromium') {
|
||||||
|
throw new Error('Extensions are only supported in Chromium');
|
||||||
|
}
|
||||||
|
|
||||||
const launcher =
|
const launcher =
|
||||||
browserType === 'firefox' ? firefox : browserType === 'webkit' ? webkit : chromium;
|
browserType === 'firefox' ? firefox : browserType === 'webkit' ? webkit : chromium;
|
||||||
|
const viewport = options.viewport ?? { width: 1280, height: 720 };
|
||||||
|
|
||||||
// Launch browser
|
let context: BrowserContext;
|
||||||
this.browser = await launcher.launch({
|
if (hasExtensions) {
|
||||||
headless: options.headless ?? true,
|
// Extensions require persistent context in a temp directory
|
||||||
executablePath: options.executablePath,
|
const extPaths = options.extensions!.join(',');
|
||||||
});
|
const session = process.env.AGENT_BROWSER_SESSION || 'default';
|
||||||
this.cdpPort = null;
|
context = await launcher.launchPersistentContext(
|
||||||
|
path.join(os.tmpdir(), `agent-browser-ext-${session}`),
|
||||||
|
{
|
||||||
|
headless: false,
|
||||||
|
executablePath: options.executablePath,
|
||||||
|
args: [`--disable-extensions-except=${extPaths}`, `--load-extension=${extPaths}`],
|
||||||
|
viewport,
|
||||||
|
extraHTTPHeaders: options.headers,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
this.isPersistentContext = true;
|
||||||
|
} else if (hasProfile) {
|
||||||
|
// Profile uses persistent context for durable cookies/storage
|
||||||
|
// Expand ~ to home directory since it won't be shell-expanded
|
||||||
|
const profilePath = options.profile!.replace(/^~\//, os.homedir() + '/');
|
||||||
|
context = await launcher.launchPersistentContext(profilePath, {
|
||||||
|
headless: options.headless ?? true,
|
||||||
|
executablePath: options.executablePath,
|
||||||
|
viewport,
|
||||||
|
extraHTTPHeaders: options.headers,
|
||||||
|
});
|
||||||
|
this.isPersistentContext = true;
|
||||||
|
} else {
|
||||||
|
// Regular ephemeral browser
|
||||||
|
this.browser = await launcher.launch({
|
||||||
|
headless: options.headless ?? true,
|
||||||
|
executablePath: options.executablePath,
|
||||||
|
});
|
||||||
|
this.cdpPort = null;
|
||||||
|
context = await this.browser.newContext({ viewport, extraHTTPHeaders: options.headers });
|
||||||
|
}
|
||||||
|
|
||||||
// Create context with viewport and optional headers
|
|
||||||
const context = await this.browser.newContext({
|
|
||||||
viewport: options.viewport ?? { width: 1280, height: 720 },
|
|
||||||
extraHTTPHeaders: options.headers,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Set default timeout to 10 seconds (Playwright default is 30s)
|
|
||||||
context.setDefaultTimeout(10000);
|
context.setDefaultTimeout(10000);
|
||||||
|
|
||||||
this.contexts.push(context);
|
this.contexts.push(context);
|
||||||
|
|
||||||
// Create initial page
|
const page = context.pages()[0] ?? (await context.newPage());
|
||||||
const page = await context.newPage();
|
|
||||||
this.pages.push(page);
|
this.pages.push(page);
|
||||||
this.activePageIndex = 0;
|
this.activePageIndex = 0;
|
||||||
|
|
||||||
// Automatically start console and error tracking
|
|
||||||
this.setupPageTracking(page);
|
this.setupPageTracking(page);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -783,9 +786,6 @@ export class BrowserManager {
|
|||||||
throw new Error('Browser not launched');
|
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 context = this.contexts[0]; // Use first context for tabs
|
||||||
const page = await context.newPage();
|
const page = await context.newPage();
|
||||||
this.pages.push(page);
|
this.pages.push(page);
|
||||||
@@ -824,36 +824,14 @@ export class BrowserManager {
|
|||||||
return { index: this.activePageIndex, total: this.pages.length };
|
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
|
* Switch to a specific tab/page by index
|
||||||
*/
|
*/
|
||||||
async switchTo(index: number): Promise<{ index: number; url: string; title: string }> {
|
switchTo(index: number): { index: number; url: string; title: string } {
|
||||||
if (index < 0 || index >= this.pages.length) {
|
if (index < 0 || index >= this.pages.length) {
|
||||||
throw new Error(`Invalid tab index: ${index}. Available: 0-${this.pages.length - 1}`);
|
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;
|
this.activePageIndex = index;
|
||||||
const page = this.pages[index];
|
const page = this.pages[index];
|
||||||
|
|
||||||
@@ -878,11 +856,6 @@ export class BrowserManager {
|
|||||||
throw new Error('Cannot close the last tab. Use "close" to close the browser.');
|
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];
|
const page = this.pages[targetIndex];
|
||||||
await page.close();
|
await page.close();
|
||||||
this.pages.splice(targetIndex, 1);
|
this.pages.splice(targetIndex, 1);
|
||||||
@@ -912,195 +885,10 @@ export class BrowserManager {
|
|||||||
return tabs;
|
return tabs;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Get or create a CDP session for the current page
|
|
||||||
* Only works with Chromium-based browsers
|
|
||||||
*/
|
|
||||||
async getCDPSession(): Promise<CDPSession> {
|
|
||||||
if (this.cdpSession) {
|
|
||||||
return this.cdpSession;
|
|
||||||
}
|
|
||||||
|
|
||||||
const page = this.getPage();
|
|
||||||
const context = page.context();
|
|
||||||
|
|
||||||
// Create a new CDP session attached to the page
|
|
||||||
this.cdpSession = await context.newCDPSession(page);
|
|
||||||
return this.cdpSession;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Check if screencast is currently active
|
|
||||||
*/
|
|
||||||
isScreencasting(): boolean {
|
|
||||||
return this.screencastActive;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Start screencast - streams viewport frames via CDP
|
|
||||||
* @param callback Function called for each frame
|
|
||||||
* @param options Screencast options
|
|
||||||
*/
|
|
||||||
async startScreencast(
|
|
||||||
callback: (frame: ScreencastFrame) => void,
|
|
||||||
options?: ScreencastOptions
|
|
||||||
): Promise<void> {
|
|
||||||
if (this.screencastActive) {
|
|
||||||
throw new Error('Screencast already active');
|
|
||||||
}
|
|
||||||
|
|
||||||
const cdp = await this.getCDPSession();
|
|
||||||
this.frameCallback = callback;
|
|
||||||
this.screencastActive = true;
|
|
||||||
|
|
||||||
// Create and store the frame handler so we can remove it later
|
|
||||||
this.screencastFrameHandler = async (params: any) => {
|
|
||||||
const frame: ScreencastFrame = {
|
|
||||||
data: params.data,
|
|
||||||
metadata: params.metadata,
|
|
||||||
sessionId: params.sessionId,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Acknowledge the frame to receive the next one
|
|
||||||
await cdp.send('Page.screencastFrameAck', { sessionId: params.sessionId });
|
|
||||||
|
|
||||||
// Call the callback with the frame
|
|
||||||
if (this.frameCallback) {
|
|
||||||
this.frameCallback(frame);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Listen for screencast frames
|
|
||||||
cdp.on('Page.screencastFrame', this.screencastFrameHandler);
|
|
||||||
|
|
||||||
// Start the screencast
|
|
||||||
await cdp.send('Page.startScreencast', {
|
|
||||||
format: options?.format ?? 'jpeg',
|
|
||||||
quality: options?.quality ?? 80,
|
|
||||||
maxWidth: options?.maxWidth ?? 1280,
|
|
||||||
maxHeight: options?.maxHeight ?? 720,
|
|
||||||
everyNthFrame: options?.everyNthFrame ?? 1,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Stop screencast
|
|
||||||
*/
|
|
||||||
async stopScreencast(): Promise<void> {
|
|
||||||
if (!this.screencastActive) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const cdp = await this.getCDPSession();
|
|
||||||
await cdp.send('Page.stopScreencast');
|
|
||||||
|
|
||||||
// Remove the event listener to prevent accumulation
|
|
||||||
if (this.screencastFrameHandler) {
|
|
||||||
cdp.off('Page.screencastFrame', this.screencastFrameHandler);
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// Ignore errors when stopping
|
|
||||||
}
|
|
||||||
|
|
||||||
this.screencastActive = false;
|
|
||||||
this.frameCallback = null;
|
|
||||||
this.screencastFrameHandler = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Inject a mouse event via CDP
|
|
||||||
*/
|
|
||||||
async injectMouseEvent(params: {
|
|
||||||
type: 'mousePressed' | 'mouseReleased' | 'mouseMoved' | 'mouseWheel';
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
button?: 'left' | 'right' | 'middle' | 'none';
|
|
||||||
clickCount?: number;
|
|
||||||
deltaX?: number;
|
|
||||||
deltaY?: number;
|
|
||||||
modifiers?: number; // 1=Alt, 2=Ctrl, 4=Meta, 8=Shift
|
|
||||||
}): Promise<void> {
|
|
||||||
const cdp = await this.getCDPSession();
|
|
||||||
|
|
||||||
const cdpButton =
|
|
||||||
params.button === 'left'
|
|
||||||
? 'left'
|
|
||||||
: params.button === 'right'
|
|
||||||
? 'right'
|
|
||||||
: params.button === 'middle'
|
|
||||||
? 'middle'
|
|
||||||
: 'none';
|
|
||||||
|
|
||||||
await cdp.send('Input.dispatchMouseEvent', {
|
|
||||||
type: params.type,
|
|
||||||
x: params.x,
|
|
||||||
y: params.y,
|
|
||||||
button: cdpButton,
|
|
||||||
clickCount: params.clickCount ?? 1,
|
|
||||||
deltaX: params.deltaX ?? 0,
|
|
||||||
deltaY: params.deltaY ?? 0,
|
|
||||||
modifiers: params.modifiers ?? 0,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Inject a keyboard event via CDP
|
|
||||||
*/
|
|
||||||
async injectKeyboardEvent(params: {
|
|
||||||
type: 'keyDown' | 'keyUp' | 'char';
|
|
||||||
key?: string;
|
|
||||||
code?: string;
|
|
||||||
text?: string;
|
|
||||||
modifiers?: number; // 1=Alt, 2=Ctrl, 4=Meta, 8=Shift
|
|
||||||
}): Promise<void> {
|
|
||||||
const cdp = await this.getCDPSession();
|
|
||||||
|
|
||||||
await cdp.send('Input.dispatchKeyEvent', {
|
|
||||||
type: params.type,
|
|
||||||
key: params.key,
|
|
||||||
code: params.code,
|
|
||||||
text: params.text,
|
|
||||||
modifiers: params.modifiers ?? 0,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Inject touch event via CDP (for mobile emulation)
|
|
||||||
*/
|
|
||||||
async injectTouchEvent(params: {
|
|
||||||
type: 'touchStart' | 'touchEnd' | 'touchMove' | 'touchCancel';
|
|
||||||
touchPoints: Array<{ x: number; y: number; id?: number }>;
|
|
||||||
modifiers?: number;
|
|
||||||
}): Promise<void> {
|
|
||||||
const cdp = await this.getCDPSession();
|
|
||||||
|
|
||||||
await cdp.send('Input.dispatchTouchEvent', {
|
|
||||||
type: params.type,
|
|
||||||
touchPoints: params.touchPoints.map((tp, i) => ({
|
|
||||||
x: tp.x,
|
|
||||||
y: tp.y,
|
|
||||||
id: tp.id ?? i,
|
|
||||||
})),
|
|
||||||
modifiers: params.modifiers ?? 0,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Close the browser and clean up
|
* Close the browser and clean up
|
||||||
*/
|
*/
|
||||||
async close(): Promise<void> {
|
async close(): Promise<void> {
|
||||||
// Stop screencast if active
|
|
||||||
if (this.screencastActive) {
|
|
||||||
await this.stopScreencast();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clean up CDP session
|
|
||||||
if (this.cdpSession) {
|
|
||||||
await this.cdpSession.detach().catch(() => {});
|
|
||||||
this.cdpSession = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// CDP: only disconnect, don't close external app's pages
|
// CDP: only disconnect, don't close external app's pages
|
||||||
if (this.cdpPort !== null) {
|
if (this.cdpPort !== null) {
|
||||||
if (this.browser) {
|
if (this.browser) {
|
||||||
@@ -1124,9 +912,9 @@ export class BrowserManager {
|
|||||||
this.pages = [];
|
this.pages = [];
|
||||||
this.contexts = [];
|
this.contexts = [];
|
||||||
this.cdpPort = null;
|
this.cdpPort = null;
|
||||||
|
this.isPersistentContext = false;
|
||||||
this.activePageIndex = 0;
|
this.activePageIndex = 0;
|
||||||
this.refMap = {};
|
this.refMap = {};
|
||||||
this.lastSnapshot = '';
|
this.lastSnapshot = '';
|
||||||
this.frameCallback = null;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+7
-49
@@ -5,7 +5,6 @@ import * as os from 'os';
|
|||||||
import { BrowserManager } from './browser.js';
|
import { BrowserManager } from './browser.js';
|
||||||
import { parseCommand, serializeResponse, errorResponse } from './protocol.js';
|
import { parseCommand, serializeResponse, errorResponse } from './protocol.js';
|
||||||
import { executeCommand } from './actions.js';
|
import { executeCommand } from './actions.js';
|
||||||
import { StreamServer } from './stream-server.js';
|
|
||||||
|
|
||||||
// Platform detection
|
// Platform detection
|
||||||
const isWindows = process.platform === 'win32';
|
const isWindows = process.platform === 'win32';
|
||||||
@@ -13,12 +12,6 @@ const isWindows = process.platform === 'win32';
|
|||||||
// Session support - each session gets its own socket/pid
|
// Session support - each session gets its own socket/pid
|
||||||
let currentSession = process.env.AGENT_BROWSER_SESSION || 'default';
|
let currentSession = process.env.AGENT_BROWSER_SESSION || 'default';
|
||||||
|
|
||||||
// Stream server for browser preview
|
|
||||||
let streamServer: StreamServer | null = null;
|
|
||||||
|
|
||||||
// Default stream port (can be overridden with AGENT_BROWSER_STREAM_PORT)
|
|
||||||
const DEFAULT_STREAM_PORT = 9223;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set the current session
|
* Set the current session
|
||||||
*/
|
*/
|
||||||
@@ -112,10 +105,8 @@ export function getConnectionInfo(
|
|||||||
*/
|
*/
|
||||||
export function cleanupSocket(session?: string): void {
|
export function cleanupSocket(session?: string): void {
|
||||||
const pidFile = getPidFile(session);
|
const pidFile = getPidFile(session);
|
||||||
const streamPortFile = getStreamPortFile(session);
|
|
||||||
try {
|
try {
|
||||||
if (fs.existsSync(pidFile)) fs.unlinkSync(pidFile);
|
if (fs.existsSync(pidFile)) fs.unlinkSync(pidFile);
|
||||||
if (fs.existsSync(streamPortFile)) fs.unlinkSync(streamPortFile);
|
|
||||||
if (isWindows) {
|
if (isWindows) {
|
||||||
const portFile = getPortFile(session);
|
const portFile = getPortFile(session);
|
||||||
if (fs.existsSync(portFile)) fs.unlinkSync(portFile);
|
if (fs.existsSync(portFile)) fs.unlinkSync(portFile);
|
||||||
@@ -128,41 +119,16 @@ export function cleanupSocket(session?: string): void {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the stream port file path
|
|
||||||
*/
|
|
||||||
export function getStreamPortFile(session?: string): string {
|
|
||||||
const sess = session ?? currentSession;
|
|
||||||
return path.join(os.tmpdir(), `agent-browser-${sess}.stream`);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Start the daemon server
|
* Start the daemon server
|
||||||
* @param options.streamPort Port for WebSocket stream server (0 to disable)
|
|
||||||
*/
|
*/
|
||||||
export async function startDaemon(options?: { streamPort?: number }): Promise<void> {
|
export async function startDaemon(): Promise<void> {
|
||||||
// Clean up any stale socket
|
// Clean up any stale socket
|
||||||
cleanupSocket();
|
cleanupSocket();
|
||||||
|
|
||||||
const browser = new BrowserManager();
|
const browser = new BrowserManager();
|
||||||
let shuttingDown = false;
|
let shuttingDown = false;
|
||||||
|
|
||||||
// Start stream server if port is specified (or use default if env var is set)
|
|
||||||
const streamPort =
|
|
||||||
options?.streamPort ??
|
|
||||||
(process.env.AGENT_BROWSER_STREAM_PORT
|
|
||||||
? parseInt(process.env.AGENT_BROWSER_STREAM_PORT, 10)
|
|
||||||
: 0);
|
|
||||||
|
|
||||||
if (streamPort > 0) {
|
|
||||||
streamServer = new StreamServer(browser, streamPort);
|
|
||||||
await streamServer.start();
|
|
||||||
|
|
||||||
// Write stream port to file for clients to discover
|
|
||||||
const streamPortFile = getStreamPortFile();
|
|
||||||
fs.writeFileSync(streamPortFile, streamPort.toString());
|
|
||||||
}
|
|
||||||
|
|
||||||
const server = net.createServer((socket) => {
|
const server = net.createServer((socket) => {
|
||||||
let buffer = '';
|
let buffer = '';
|
||||||
|
|
||||||
@@ -192,11 +158,17 @@ export async function startDaemon(options?: { streamPort?: number }): Promise<vo
|
|||||||
parseResult.command.action !== 'launch' &&
|
parseResult.command.action !== 'launch' &&
|
||||||
parseResult.command.action !== 'close'
|
parseResult.command.action !== 'close'
|
||||||
) {
|
) {
|
||||||
|
const extensions = process.env.AGENT_BROWSER_EXTENSIONS
|
||||||
|
? process.env.AGENT_BROWSER_EXTENSIONS.split(',')
|
||||||
|
.map((p) => p.trim())
|
||||||
|
.filter(Boolean)
|
||||||
|
: undefined;
|
||||||
await browser.launch({
|
await browser.launch({
|
||||||
id: 'auto',
|
id: 'auto',
|
||||||
action: 'launch',
|
action: 'launch',
|
||||||
headless: true,
|
headless: true,
|
||||||
executablePath: process.env.AGENT_BROWSER_EXECUTABLE_PATH,
|
executablePath: process.env.AGENT_BROWSER_EXECUTABLE_PATH,
|
||||||
|
extensions: extensions,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -261,20 +233,6 @@ export async function startDaemon(options?: { streamPort?: number }): Promise<vo
|
|||||||
const shutdown = async () => {
|
const shutdown = async () => {
|
||||||
if (shuttingDown) return;
|
if (shuttingDown) return;
|
||||||
shuttingDown = true;
|
shuttingDown = true;
|
||||||
|
|
||||||
// Stop stream server if running
|
|
||||||
if (streamServer) {
|
|
||||||
await streamServer.stop();
|
|
||||||
streamServer = null;
|
|
||||||
// Clean up stream port file
|
|
||||||
const streamPortFile = getStreamPortFile();
|
|
||||||
try {
|
|
||||||
if (fs.existsSync(streamPortFile)) fs.unlinkSync(streamPortFile);
|
|
||||||
} catch {
|
|
||||||
// Ignore cleanup errors
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
await browser.close();
|
await browser.close();
|
||||||
server.close();
|
server.close();
|
||||||
cleanupSocket();
|
cleanupSocket();
|
||||||
|
|||||||
@@ -620,391 +620,6 @@ 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', () => {
|
describe('invalid commands', () => {
|
||||||
it('should reject unknown action', () => {
|
it('should reject unknown action', () => {
|
||||||
const result = parseCommand(cmd({ id: '1', action: 'unknown' }));
|
const result = parseCommand(cmd({ id: '1', action: 'unknown' }));
|
||||||
|
|||||||
@@ -585,55 +585,6 @@ const responseBodySchema = baseCommandSchema.extend({
|
|||||||
timeout: z.number().positive().optional(),
|
timeout: z.number().positive().optional(),
|
||||||
});
|
});
|
||||||
|
|
||||||
// Screencast schemas for streaming browser viewport
|
|
||||||
const screencastStartSchema = baseCommandSchema.extend({
|
|
||||||
action: z.literal('screencast_start'),
|
|
||||||
format: z.enum(['jpeg', 'png']).optional(),
|
|
||||||
quality: z.number().min(0).max(100).optional(),
|
|
||||||
maxWidth: z.number().positive().optional(),
|
|
||||||
maxHeight: z.number().positive().optional(),
|
|
||||||
everyNthFrame: z.number().positive().optional(),
|
|
||||||
});
|
|
||||||
|
|
||||||
const screencastStopSchema = baseCommandSchema.extend({
|
|
||||||
action: z.literal('screencast_stop'),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Input injection schemas for pair browsing
|
|
||||||
const inputMouseSchema = baseCommandSchema.extend({
|
|
||||||
action: z.literal('input_mouse'),
|
|
||||||
type: z.enum(['mousePressed', 'mouseReleased', 'mouseMoved', 'mouseWheel']),
|
|
||||||
x: z.number(),
|
|
||||||
y: z.number(),
|
|
||||||
button: z.enum(['left', 'right', 'middle', 'none']).optional(),
|
|
||||||
clickCount: z.number().positive().optional(),
|
|
||||||
deltaX: z.number().optional(),
|
|
||||||
deltaY: z.number().optional(),
|
|
||||||
modifiers: z.number().optional(),
|
|
||||||
});
|
|
||||||
|
|
||||||
const inputKeyboardSchema = baseCommandSchema.extend({
|
|
||||||
action: z.literal('input_keyboard'),
|
|
||||||
type: z.enum(['keyDown', 'keyUp', 'char']),
|
|
||||||
key: z.string().optional(),
|
|
||||||
code: z.string().optional(),
|
|
||||||
text: z.string().optional(),
|
|
||||||
modifiers: z.number().optional(),
|
|
||||||
});
|
|
||||||
|
|
||||||
const inputTouchSchema = baseCommandSchema.extend({
|
|
||||||
action: z.literal('input_touch'),
|
|
||||||
type: z.enum(['touchStart', 'touchEnd', 'touchMove', 'touchCancel']),
|
|
||||||
touchPoints: z.array(
|
|
||||||
z.object({
|
|
||||||
x: z.number(),
|
|
||||||
y: z.number(),
|
|
||||||
id: z.number().optional(),
|
|
||||||
})
|
|
||||||
),
|
|
||||||
modifiers: z.number().optional(),
|
|
||||||
});
|
|
||||||
|
|
||||||
const pressSchema = baseCommandSchema.extend({
|
const pressSchema = baseCommandSchema.extend({
|
||||||
action: z.literal('press'),
|
action: z.literal('press'),
|
||||||
key: z.string().min(1),
|
key: z.string().min(1),
|
||||||
@@ -844,11 +795,6 @@ const commandSchema = z.discriminatedUnion('action', [
|
|||||||
multiSelectSchema,
|
multiSelectSchema,
|
||||||
waitForDownloadSchema,
|
waitForDownloadSchema,
|
||||||
responseBodySchema,
|
responseBodySchema,
|
||||||
screencastStartSchema,
|
|
||||||
screencastStopSchema,
|
|
||||||
inputMouseSchema,
|
|
||||||
inputKeyboardSchema,
|
|
||||||
inputTouchSchema,
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Parse result type
|
// Parse result type
|
||||||
|
|||||||
@@ -1,364 +0,0 @@
|
|||||||
import { WebSocketServer, WebSocket } from 'ws';
|
|
||||||
import type { BrowserManager, ScreencastFrame } from './browser.js';
|
|
||||||
import { setScreencastFrameCallback } from './actions.js';
|
|
||||||
|
|
||||||
// Message types for WebSocket communication
|
|
||||||
export interface FrameMessage {
|
|
||||||
type: 'frame';
|
|
||||||
data: string; // base64 encoded image
|
|
||||||
metadata: {
|
|
||||||
offsetTop: number;
|
|
||||||
pageScaleFactor: number;
|
|
||||||
deviceWidth: number;
|
|
||||||
deviceHeight: number;
|
|
||||||
scrollOffsetX: number;
|
|
||||||
scrollOffsetY: number;
|
|
||||||
timestamp?: number;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface InputMouseMessage {
|
|
||||||
type: 'input_mouse';
|
|
||||||
eventType: 'mousePressed' | 'mouseReleased' | 'mouseMoved' | 'mouseWheel';
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
button?: 'left' | 'right' | 'middle' | 'none';
|
|
||||||
clickCount?: number;
|
|
||||||
deltaX?: number;
|
|
||||||
deltaY?: number;
|
|
||||||
modifiers?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface InputKeyboardMessage {
|
|
||||||
type: 'input_keyboard';
|
|
||||||
eventType: 'keyDown' | 'keyUp' | 'char';
|
|
||||||
key?: string;
|
|
||||||
code?: string;
|
|
||||||
text?: string;
|
|
||||||
modifiers?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface InputTouchMessage {
|
|
||||||
type: 'input_touch';
|
|
||||||
eventType: 'touchStart' | 'touchEnd' | 'touchMove' | 'touchCancel';
|
|
||||||
touchPoints: Array<{ x: number; y: number; id?: number }>;
|
|
||||||
modifiers?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface StatusMessage {
|
|
||||||
type: 'status';
|
|
||||||
connected: boolean;
|
|
||||||
screencasting: boolean;
|
|
||||||
viewportWidth?: number;
|
|
||||||
viewportHeight?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ErrorMessage {
|
|
||||||
type: 'error';
|
|
||||||
message: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type StreamMessage =
|
|
||||||
| FrameMessage
|
|
||||||
| InputMouseMessage
|
|
||||||
| InputKeyboardMessage
|
|
||||||
| InputTouchMessage
|
|
||||||
| StatusMessage
|
|
||||||
| ErrorMessage;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* WebSocket server for streaming browser viewport and receiving input
|
|
||||||
*/
|
|
||||||
export class StreamServer {
|
|
||||||
private wss: WebSocketServer | null = null;
|
|
||||||
private clients: Set<WebSocket> = new Set();
|
|
||||||
private browser: BrowserManager;
|
|
||||||
private port: number;
|
|
||||||
private isScreencasting: boolean = false;
|
|
||||||
|
|
||||||
constructor(browser: BrowserManager, port: number = 9223) {
|
|
||||||
this.browser = browser;
|
|
||||||
this.port = port;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Start the WebSocket server
|
|
||||||
*/
|
|
||||||
start(): Promise<void> {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
try {
|
|
||||||
this.wss = new WebSocketServer({ port: this.port });
|
|
||||||
|
|
||||||
this.wss.on('connection', (ws) => {
|
|
||||||
this.handleConnection(ws);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.wss.on('error', (error) => {
|
|
||||||
console.error('[StreamServer] WebSocket error:', error);
|
|
||||||
reject(error);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.wss.on('listening', () => {
|
|
||||||
console.log(`[StreamServer] Listening on port ${this.port}`);
|
|
||||||
|
|
||||||
// Set up the screencast frame callback
|
|
||||||
setScreencastFrameCallback((frame) => {
|
|
||||||
this.broadcastFrame(frame);
|
|
||||||
});
|
|
||||||
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
reject(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Stop the WebSocket server
|
|
||||||
*/
|
|
||||||
async stop(): Promise<void> {
|
|
||||||
// Stop screencasting
|
|
||||||
if (this.isScreencasting) {
|
|
||||||
await this.stopScreencast();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear the callback
|
|
||||||
setScreencastFrameCallback(null);
|
|
||||||
|
|
||||||
// Close all clients
|
|
||||||
for (const client of this.clients) {
|
|
||||||
client.close();
|
|
||||||
}
|
|
||||||
this.clients.clear();
|
|
||||||
|
|
||||||
// Close the server
|
|
||||||
if (this.wss) {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
this.wss!.close(() => {
|
|
||||||
this.wss = null;
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle a new WebSocket connection
|
|
||||||
*/
|
|
||||||
private handleConnection(ws: WebSocket): void {
|
|
||||||
console.log('[StreamServer] Client connected');
|
|
||||||
this.clients.add(ws);
|
|
||||||
|
|
||||||
// Send initial status
|
|
||||||
this.sendStatus(ws);
|
|
||||||
|
|
||||||
// Start screencasting if this is the first client
|
|
||||||
if (this.clients.size === 1 && !this.isScreencasting) {
|
|
||||||
this.startScreencast().catch((error) => {
|
|
||||||
console.error('[StreamServer] Failed to start screencast:', error);
|
|
||||||
this.sendError(ws, error.message);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle messages from client
|
|
||||||
ws.on('message', (data) => {
|
|
||||||
try {
|
|
||||||
const message = JSON.parse(data.toString()) as StreamMessage;
|
|
||||||
this.handleMessage(message, ws);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('[StreamServer] Failed to parse message:', error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle client disconnect
|
|
||||||
ws.on('close', () => {
|
|
||||||
console.log('[StreamServer] Client disconnected');
|
|
||||||
this.clients.delete(ws);
|
|
||||||
|
|
||||||
// Stop screencasting if no more clients
|
|
||||||
if (this.clients.size === 0 && this.isScreencasting) {
|
|
||||||
this.stopScreencast().catch((error) => {
|
|
||||||
console.error('[StreamServer] Failed to stop screencast:', error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
ws.on('error', (error) => {
|
|
||||||
console.error('[StreamServer] Client error:', error);
|
|
||||||
this.clients.delete(ws);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle incoming messages from clients
|
|
||||||
*/
|
|
||||||
private async handleMessage(message: StreamMessage, ws: WebSocket): Promise<void> {
|
|
||||||
try {
|
|
||||||
switch (message.type) {
|
|
||||||
case 'input_mouse':
|
|
||||||
await this.browser.injectMouseEvent({
|
|
||||||
type: message.eventType,
|
|
||||||
x: message.x,
|
|
||||||
y: message.y,
|
|
||||||
button: message.button,
|
|
||||||
clickCount: message.clickCount,
|
|
||||||
deltaX: message.deltaX,
|
|
||||||
deltaY: message.deltaY,
|
|
||||||
modifiers: message.modifiers,
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'input_keyboard':
|
|
||||||
await this.browser.injectKeyboardEvent({
|
|
||||||
type: message.eventType,
|
|
||||||
key: message.key,
|
|
||||||
code: message.code,
|
|
||||||
text: message.text,
|
|
||||||
modifiers: message.modifiers,
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'input_touch':
|
|
||||||
await this.browser.injectTouchEvent({
|
|
||||||
type: message.eventType,
|
|
||||||
touchPoints: message.touchPoints,
|
|
||||||
modifiers: message.modifiers,
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'status':
|
|
||||||
// Client is requesting status
|
|
||||||
this.sendStatus(ws);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
||||||
this.sendError(ws, errorMessage);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Broadcast a frame to all connected clients
|
|
||||||
*/
|
|
||||||
private broadcastFrame(frame: ScreencastFrame): void {
|
|
||||||
const message: FrameMessage = {
|
|
||||||
type: 'frame',
|
|
||||||
data: frame.data,
|
|
||||||
metadata: frame.metadata,
|
|
||||||
};
|
|
||||||
|
|
||||||
const payload = JSON.stringify(message);
|
|
||||||
|
|
||||||
for (const client of this.clients) {
|
|
||||||
if (client.readyState === WebSocket.OPEN) {
|
|
||||||
client.send(payload);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Send status to a client
|
|
||||||
*/
|
|
||||||
private sendStatus(ws: WebSocket): void {
|
|
||||||
let viewportWidth: number | undefined;
|
|
||||||
let viewportHeight: number | undefined;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const page = this.browser.getPage();
|
|
||||||
const viewport = page.viewportSize();
|
|
||||||
viewportWidth = viewport?.width;
|
|
||||||
viewportHeight = viewport?.height;
|
|
||||||
} catch {
|
|
||||||
// Browser not launched yet
|
|
||||||
}
|
|
||||||
|
|
||||||
const message: StatusMessage = {
|
|
||||||
type: 'status',
|
|
||||||
connected: true,
|
|
||||||
screencasting: this.isScreencasting,
|
|
||||||
viewportWidth,
|
|
||||||
viewportHeight,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (ws.readyState === WebSocket.OPEN) {
|
|
||||||
ws.send(JSON.stringify(message));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Send an error to a client
|
|
||||||
*/
|
|
||||||
private sendError(ws: WebSocket, errorMessage: string): void {
|
|
||||||
const message: ErrorMessage = {
|
|
||||||
type: 'error',
|
|
||||||
message: errorMessage,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (ws.readyState === WebSocket.OPEN) {
|
|
||||||
ws.send(JSON.stringify(message));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Start screencasting
|
|
||||||
*/
|
|
||||||
private async startScreencast(): Promise<void> {
|
|
||||||
// Set flag immediately to prevent race conditions with concurrent calls
|
|
||||||
if (this.isScreencasting) return;
|
|
||||||
this.isScreencasting = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Check if browser is launched
|
|
||||||
if (!this.browser.isLaunched()) {
|
|
||||||
throw new Error('Browser not launched');
|
|
||||||
}
|
|
||||||
|
|
||||||
await this.browser.startScreencast((frame) => this.broadcastFrame(frame), {
|
|
||||||
format: 'jpeg',
|
|
||||||
quality: 80,
|
|
||||||
maxWidth: 1280,
|
|
||||||
maxHeight: 720,
|
|
||||||
everyNthFrame: 1,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Notify all clients
|
|
||||||
for (const client of this.clients) {
|
|
||||||
this.sendStatus(client);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// Reset flag on failure so caller can retry
|
|
||||||
this.isScreencasting = false;
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Stop screencasting
|
|
||||||
*/
|
|
||||||
private async stopScreencast(): Promise<void> {
|
|
||||||
if (!this.isScreencasting) return;
|
|
||||||
|
|
||||||
await this.browser.stopScreencast();
|
|
||||||
this.isScreencasting = false;
|
|
||||||
|
|
||||||
// Notify all clients
|
|
||||||
for (const client of this.clients) {
|
|
||||||
this.sendStatus(client);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the port the server is running on
|
|
||||||
*/
|
|
||||||
getPort(): number {
|
|
||||||
return this.port;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the number of connected clients
|
|
||||||
*/
|
|
||||||
getClientCount(): number {
|
|
||||||
return this.clients.size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+3
-63
@@ -15,6 +15,8 @@ export interface LaunchCommand extends BaseCommand {
|
|||||||
headers?: Record<string, string>;
|
headers?: Record<string, string>;
|
||||||
executablePath?: string;
|
executablePath?: string;
|
||||||
cdpPort?: number;
|
cdpPort?: number;
|
||||||
|
extensions?: string[];
|
||||||
|
profile?: string; // Path to persistent browser profile directory
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface NavigateCommand extends BaseCommand {
|
export interface NavigateCommand extends BaseCommand {
|
||||||
@@ -458,49 +460,6 @@ export interface ResponseBodyCommand extends BaseCommand {
|
|||||||
timeout?: number;
|
timeout?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Screencast commands for streaming browser viewport
|
|
||||||
export interface ScreencastStartCommand extends BaseCommand {
|
|
||||||
action: 'screencast_start';
|
|
||||||
format?: 'jpeg' | 'png';
|
|
||||||
quality?: number; // 0-100, jpeg only
|
|
||||||
maxWidth?: number;
|
|
||||||
maxHeight?: number;
|
|
||||||
everyNthFrame?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ScreencastStopCommand extends BaseCommand {
|
|
||||||
action: 'screencast_stop';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input injection commands for pair browsing
|
|
||||||
export interface InputMouseCommand extends BaseCommand {
|
|
||||||
action: 'input_mouse';
|
|
||||||
type: 'mousePressed' | 'mouseReleased' | 'mouseMoved' | 'mouseWheel';
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
button?: 'left' | 'right' | 'middle' | 'none';
|
|
||||||
clickCount?: number;
|
|
||||||
deltaX?: number;
|
|
||||||
deltaY?: number;
|
|
||||||
modifiers?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface InputKeyboardCommand extends BaseCommand {
|
|
||||||
action: 'input_keyboard';
|
|
||||||
type: 'keyDown' | 'keyUp' | 'char';
|
|
||||||
key?: string;
|
|
||||||
code?: string;
|
|
||||||
text?: string;
|
|
||||||
modifiers?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface InputTouchCommand extends BaseCommand {
|
|
||||||
action: 'input_touch';
|
|
||||||
type: 'touchStart' | 'touchEnd' | 'touchMove' | 'touchCancel';
|
|
||||||
touchPoints: Array<{ x: number; y: number; id?: number }>;
|
|
||||||
modifiers?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Video recording
|
// Video recording
|
||||||
export interface VideoStartCommand extends BaseCommand {
|
export interface VideoStartCommand extends BaseCommand {
|
||||||
action: 'video_start';
|
action: 'video_start';
|
||||||
@@ -884,12 +843,7 @@ export type Command =
|
|||||||
| InsertTextCommand
|
| InsertTextCommand
|
||||||
| MultiSelectCommand
|
| MultiSelectCommand
|
||||||
| WaitForDownloadCommand
|
| WaitForDownloadCommand
|
||||||
| ResponseBodyCommand
|
| ResponseBodyCommand;
|
||||||
| ScreencastStartCommand
|
|
||||||
| ScreencastStopCommand
|
|
||||||
| InputMouseCommand
|
|
||||||
| InputKeyboardCommand
|
|
||||||
| InputTouchCommand;
|
|
||||||
|
|
||||||
// Response types
|
// Response types
|
||||||
export interface SuccessResponse<T = unknown> {
|
export interface SuccessResponse<T = unknown> {
|
||||||
@@ -957,20 +911,6 @@ export interface TabCloseData {
|
|||||||
remaining: number;
|
remaining: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ScreencastStartData {
|
|
||||||
started: boolean;
|
|
||||||
format: string;
|
|
||||||
quality: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ScreencastStopData {
|
|
||||||
stopped: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface InputEventData {
|
|
||||||
injected: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Browser state
|
// Browser state
|
||||||
export interface BrowserState {
|
export interface BrowserState {
|
||||||
browser: Browser | null;
|
browser: Browser | null;
|
||||||
|
|||||||
Reference in New Issue
Block a user