# WebdriverIO — Next-Gen Browser and Mobile Testing Framework

> WebdriverIO is a progressive automation framework for web and mobile testing built on the WebDriver and Chrome DevTools protocols with a rich plugin system.

## Install

Save in your project root:

# WebdriverIO — Next-Gen Browser and Mobile Testing Framework

## Quick Use
```bash
npm init wdio@latest ./my-test-project
# Follow the CLI wizard to select framework, reporter, and services
cd my-test-project
npx wdio run wdio.conf.js
```

## Introduction
WebdriverIO is a test automation framework for Node.js that supports both WebDriver and Chrome DevTools protocols. It provides a concise, expressive API for browser and mobile testing, with an interactive CLI for project scaffolding. The framework is maintained by the OpenJS Foundation and has a strong plugin ecosystem.

## What WebdriverIO Does
- Automates Chrome, Firefox, Safari, Edge, and mobile browsers via WebDriver protocol
- Supports Chrome DevTools Protocol for network interception and performance metrics
- Provides sync-like async syntax for readable and maintainable test code
- Integrates with Mocha, Jasmine, and Cucumber as test runner frameworks
- Enables component testing for React, Vue, Svelte, and Lit in real browsers

## Architecture Overview
The WDIO test runner reads `wdio.conf.js`, spawns worker processes per capability (browser/device), and distributes test files across workers. Each worker creates a WebDriver session and executes tests using the WebdriverIO API. Commands are sent as HTTP requests to a WebDriver endpoint or via WebSocket for CDP. Services (like chromedriver, devtools) manage browser lifecycle. Reporters collect results from workers and generate output.

## Self-Hosting & Configuration
- Scaffold a project with `npm init wdio@latest` and follow the interactive setup wizard
- Configure `wdio.conf.js` with capabilities, framework choice, reporters, and services
- Add services like `@wdio/chromedriver-service` for automatic driver management
- Use `maxInstances` to control parallel test execution across browsers
- Set `baseUrl` to avoid repeating the application URL in every test

## Key Features
- Dual-protocol support for both WebDriver and Chrome DevTools Protocol
- Interactive REPL mode (`npx wdio repl`) for exploring selectors live
- Built-in component testing renders components in real browsers, not JSDOM
- Smart selector strategies including React, Vue, and accessibility selectors
- Visual regression service for screenshot comparison testing

## Comparison with Similar Tools
- **Playwright** — multi-browser with auto-install and tracing; WebdriverIO offers broader framework and reporter integration
- **Cypress** — runs inside the browser; WebdriverIO supports remote Selenium Grid and real mobile devices
- **Nightwatch** — similar WebDriver approach; WebdriverIO adds CDP support and component testing
- **Selenium** — the underlying protocol; WebdriverIO wraps it with a modern API and full test infrastructure
- **TestCafe** — proxy-based without WebDriver; WebdriverIO uses the W3C standard and supports Appium for mobile

## FAQ
**Q: Can WebdriverIO test mobile apps?**
A: Yes, WebdriverIO integrates with Appium for native and hybrid mobile app testing on iOS and Android.

**Q: Does WebdriverIO support Cucumber?**
A: Yes, install `@wdio/cucumber-framework` to write tests in Gherkin syntax with step definitions.

**Q: How does component testing work?**
A: WDIO renders individual components in a real browser using framework-specific presets, enabling isolated testing with full DOM access.

**Q: Can I use WebdriverIO with a Selenium Grid?**
A: Yes, point the `hostname` and `port` in your config to a running Selenium Grid or cloud service like BrowserStack.

## Sources
- https://github.com/webdriverio/webdriverio
- https://webdriver.io/

---
Source: https://tokrepo.com/en/workflows/8da77ab2-3f53-11f1-9bc6-00163e2b0d79
Author: AI Open Source