{"id":35197907,"url":"https://github.com/webdriverio/devtools","last_synced_at":"2026-04-09T11:30:44.413Z","repository":{"id":318736856,"uuid":"707871415","full_name":"webdriverio/devtools","owner":"webdriverio","description":"Debugging WebDriver tests in real-time with support for WebdriverIO","archived":false,"fork":false,"pushed_at":"2026-02-19T11:08:24.000Z","size":1448,"stargazers_count":3,"open_issues_count":7,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-02-21T21:35:44.720Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://webdriver.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webdriverio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"tidelift":"npm/webdriverio","open_collective":"webdriverio"}},"created_at":"2023-10-20T21:18:04.000Z","updated_at":"2026-02-03T11:17:02.000Z","dependencies_parsed_at":"2025-10-23T10:14:35.385Z","dependency_job_id":"e1dfb129-4c39-4a0c-ba1f-86f684794a89","html_url":"https://github.com/webdriverio/devtools","commit_stats":null,"previous_names":["webdriverio/devtools"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/webdriverio/devtools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fdevtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fdevtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fdevtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fdevtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdriverio","download_url":"https://codeload.github.com/webdriverio/devtools/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdriverio%2Fdevtools/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29741238,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-12-29T08:16:43.152Z","updated_at":"2026-04-09T11:30:44.401Z","avatar_url":"https://github.com/webdriverio.png","language":"TypeScript","funding_links":["https://tidelift.com/funding/github/npm/webdriverio","https://opencollective.com/webdriverio"],"categories":[],"sub_categories":[],"readme":"# WebdriverIO DevTools\n\nA powerful browser devtools extension for debugging, visualizing, and controlling test executions in real-time.\n\nWorks with **WebdriverIO** and **[Nightwatch.js](./packages/nightwatch-devtools/README.md)** — same backend, same UI, same capture infrastructure.\n\n## Features\n\n### 🎯 Interactive Test Execution\n- **Selective Test Rerun**: Click play buttons on individual test cases, test suites, or Cucumber scenario examples to re-execute them instantly\n- **Smart Browser Reuse**: Tests rerun in the same browser window without opening new tabs, improving performance and user experience\n- **Stop Test Execution**: Terminate running tests with proper process cleanup using the stop button\n- **Test List Preservation**: All tests remain visible in the sidebar during reruns, maintaining full context\n\n### 🎭 Multi-Framework Support\n- **Mocha**: Full support with grep-based filtering for test/suite execution\n- **Jasmine**: Complete integration with grep-based filtering\n- **Cucumber**: Scenario-level and example-specific execution with feature:line targeting\n\n### 📊 Real-Time Visualization\n- **Live Browser Preview**: View the application under test in a scaled iframe with automatic screenshot updates\n- **Actions Timeline**: Command-by-command execution log with timestamps and parameters\n- **Test Hierarchy**: Nested test suite and test case tree view with status indicators\n- **Live Status Updates**: Immediate spinner icons and visual feedback when tests start/stop\n\n### 🧐 Debugging Capabilities\n- **Command Logging**: Detailed capture of all WebDriver commands with arguments and results\n- **Screenshot Capture**: Automatic screenshots after each command for visual debugging\n- **Source Code Mapping**: View the exact line of code that triggered each command\n- **Console Logs**: Capture and display application console output with timestamps and log levels\n- **Network Logs**: Monitor and inspect HTTP requests/responses including headers, payloads, timing, and status codes\n- **Error Tracking**: Full error messages and stack traces for failed tests\n\n### 🎮 Execution Controls\n- **Global Test Running State**: All play buttons automatically disable during test execution to prevent conflicts\n- **Immediate Feedback**: Spinner icons update instantly when tests start\n- **Actions Tab Auto-Clear**: Execution data automatically clears and refreshes on reruns\n- **Metadata Tracking**: Test duration, status, and execution timestamps\n\n### 🔍︎ TestLens\n- **Code Intelligence**: View test definitions directly in your editor\n- **Run/Debug Actions**: Execute individual tests or suites with inline CodeLens actions\n- **Quick Navigation**: Jump between test code and execution results seamlessly\n- **Status Indicators**: Visual feedback for test pass/fail states in the editor\n\n### 🏗️ Architecture\n- **Frontend**: Lit web components with reactive state management (@lit/context)\n- **Backend**: Fastify server with WebSocket streaming for real-time updates\n- **Service**: WebdriverIO reporter integration with stable UID generation\n- **Process Management**: Tree-kill for proper cleanup of spawned processes\n\n## Demo\n\n### 🛠️ Test Rerunner \u0026 Snapshot\n\u003cimg src=\"https://github.com/user-attachments/assets/c3804559-c0ec-441a-80dc-e4048385f3b2\" alt=\"Test Rerunner \u0026 Snapshot Demo\" width=\"400\" /\u003e\n\n### 🛑 Stop Test Runner\n\u003cimg src=\"https://github.com/user-attachments/assets/f42e43ed-bfac-4280-be5f-87895fb232d3\" alt=\"Stop Test Runner Demo\" width=\"400\" /\u003e\n\n### 🔍︎ TestLens\n\u003cimg src=\"https://github.com/user-attachments/assets/72c576a1-330a-49c4-affe-df260e7c70df\" alt=\"TestLens Demo\" width=\"400\" /\u003e\n\n### \u003e_ Console Logs\n\u003cimg src=\"https://github.com/user-attachments/assets/aff14f15-a298-4a12-bc3d-8e4deefddae6\" alt=\"Console Logs\" width=\"400\" /\u003e\n\n### 🌐 Network Logs\n\u003cimg src=\"https://github.com/user-attachments/assets/2cca4885-f989-4d07-b7ce-a4fa476c3c1c\" alt=\"Network Logs 1\" width=\"400\" /\u003e\n\n\u003cimg src=\"https://github.com/user-attachments/assets/0f81e0af-75b5-454f-bffb-e40654c89908\" alt=\"Network Logs 2\" width=\"400\" /\u003e\n\n## Installation\n\n```bash\nnpm install @wdio/devtools-service\n```\n\n\u003e **Nightwatch users:** `@wdio/nightwatch-devtools` is included as a dependency of `@wdio/devtools-service`. Install the service and import from `@wdio/nightwatch-devtools` directly — see the [Nightwatch Integration](#nightwatch-integration) section.\n\n## Configuration\n\nAdd the service to your `wdio.conf.js`:\n\n```javascript\nexport const config = {\n    // ...\n    services: ['devtools']\n}\n```\n\n## Usage\n\n1. Run your WebdriverIO tests\n2. The devtools UI automatically opens in an external browser window at `http://localhost:3000`\n3. Tests begin executing immediately with real-time visualization\n4. View live browser preview, test progress, and command execution\n5. After initial run completes, use play buttons to rerun individual tests or suites\n6. Click stop button anytime to terminate running tests\n7. Explore actions, metadata, console logs, and source code in the workbench tabs\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Build all packages\npnpm build\n\n# Run demo\npnpm demo\n```\n\n## Nightwatch Integration\n\nUsing [Nightwatch.js](https://nightwatchjs.org/)? A dedicated adapter package brings the same DevTools UI to your Nightwatch test suite with zero test code changes.\n\n→ **[`@wdio/nightwatch-devtools`](./packages/nightwatch-devtools/README.md)** — configuration, Cucumber/BDD setup, and limitations.\n\n## Project Structure\n\n```\npackages/\n├── app/                   # Frontend Lit-based UI application\n├── backend/               # Fastify server with test runner management\n├── service/               # WebdriverIO service and reporter\n├── script/                # Browser-injected trace collection script\n└── nightwatch-devtools/   # Nightwatch adapter plugin\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## :page_facing_up: License\n\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdriverio%2Fdevtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdriverio%2Fdevtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdriverio%2Fdevtools/lists"}