https://github.com/firefox-devtools/bidi-web-client
Small prototype client for WebDriver bidi
https://github.com/firefox-devtools/bidi-web-client
Last synced: about 1 month ago
JSON representation
Small prototype client for WebDriver bidi
- Host: GitHub
- URL: https://github.com/firefox-devtools/bidi-web-client
- Owner: firefox-devtools
- License: other
- Created: 2022-09-23T14:47:29.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2026-02-17T10:20:14.000Z (5 months ago)
- Last Synced: 2026-06-14T10:33:07.759Z (about 2 months ago)
- Language: JavaScript
- Size: 59.6 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# bidi-web-client
A web-based testing client for WebDriver BiDi protocol commands.
See live at https://juliandescottes.github.io/bidi-web-client/web/
## Features
- **62 BiDi Commands**: Supports all commands from the WebDriver BiDi specification
- **Module-based Organization**: Commands grouped into tabs by module (session, browser, browsingContext, emulation, network, script, storage, input, webExtension)
- **Spec Links**: Direct links to the specification for each command
- **Parameter Type Hints**: Hover over the info button to see parameter names, types, required/optional status, and default values
- **Custom Commands**: Test experimental or browser-specific commands
- **Protocol Traffic Log**: View all WebSocket requests, responses, and events
- **Command-line API**: Script commands via browser console using `sendCommand(method, params)`
## Usage
### Starting Firefox
Start Firefox with remote debugging enabled:
```bash
firefox --remote-debugging-port --remote-allow-origins=http://localhost:8080
```
Or for the live version:
```bash
firefox --remote-debugging-port --remote-allow-origins=https://juliandescottes.github.io
```
### Connecting
1. Open the web client (locally or at the live URL)
2. Enter the WebSocket URL: `localhost:9222/session` (or `/session/session_id` to connect to an existing session)
3. Click "Connect"
4. Browse commands by module tabs
5. Fill in parameters and click "Send"
### Adding Custom Commands
Click "add new command" button to test experimental or unlisted commands. Custom commands appear in the "Custom" tab.
## Development
### Prerequisites
- Node.js (for build scripts)
- Python 3 (for local HTTP server, optional)
### Building Commands Data
The command definitions are auto-generated from the WebDriver BiDi CDDL specification:
```bash
npm run build:commands
```
This fetches and parses the CDDL file from [webref](https://github.com/w3c/webref) and generates `web/scripts/commands-generated.js`. No local spec repository is required.
### Running Locally
Serve the `web/` directory with any HTTP server:
```bash
cd web
python3 -m http.server 8080
```
Then open http://localhost:8080 in your browser.
### Project Structure
```
bidi-web-client/
├── scripts/
│ └── parse-spec.js # Spec parser (generates commands)
├── web/
│ ├── index.html # Main page
│ ├── style.css # Styling
│ └── scripts/
│ ├── app.js # Application orchestration
│ ├── commands-generated.js # Auto-generated commands (DO NOT EDIT)
│ ├── ui.js # UI management and tabs
│ ├── websocket-client.js # WebSocket communication
│ ├── command-line.js # Console API
│ └── event-emitter.js # Event handling utility
```
## Updating Commands
When the WebDriver BiDi spec is updated:
1. Run `npm run build:commands` (it fetches the latest CDDL from webref automatically)
2. Commit the updated `web/scripts/commands-generated.js`
The generated file is committed to the repository so the webapp works on GitHub Pages without a build step.
### CDDL Source
Commands are parsed from the official CDDL file maintained by W3C:
https://github.com/w3c/webref/blob/main/ed/cddl/webdriver-bidi-remote-cddl.cddl
This CDDL file is automatically extracted from the WebDriver BiDi spec and provides a cleaner, more structured format for parsing than the Bikeshed HTML source.