Aller au contenu principal

WebdriverIO in Angular Projects – Complete Guide

1. What is WebdriverIO?​

WebdriverIO (WDIO) is a versatile end-to-end testing framework for Node.js that can run on:

  • WebDriver protocol (Selenium-compatible)
  • DevTools protocol (Chrome DevTools Protocol)

It’s highly configurable, supports plugins, and works for:

  • Web application UI testing
  • Mobile automation (via Appium)
  • Cross-browser & cross-platform testing

2. Why Use WebdriverIO?​

Benefits:​

  • Supports all major browsers (via WebDriver) and Chrome/Edge (via DevTools).
  • Can run tests on real devices with Appium.
  • Large plugin ecosystem (reporters, services, assertions).
  • Parallel execution built-in.
  • Works with multiple test frameworks: Mocha, Jasmine, Cucumber.
  • Easy integration with cloud testing platforms (BrowserStack, Sauce Labs).

3. When to Choose WebdriverIO​

  • You need one framework for web + mobile app testing.
  • You’re already using Selenium/WebDriver infrastructure.
  • You want fine-grained configuration and plugin support.
  • You need to test in legacy browsers.
  • You want BDD (Cucumber) or TDD flexibility.

4. How to Use WebdriverIO in Angular​

Step 1 – Install WebdriverIO​

Using Angular CLI schematics:

ng add @wdio/schematics

This will:

  • Install @wdio/cli and dependencies.
  • Create wdio.conf.js (main configuration).
  • Add e2e target to angular.json.
  • Generate example tests.

Manual install:

npm install -D @wdio/cli
npx wdio config

(npx wdio config walks you through framework, reporters, browsers, etc.)

Step 2 – Understand Project Structure​

After adding WebdriverIO, you’ll see:

test/
  specs/
    example.e2e.js      # Sample test
wdio.conf.js            # WDIO configuration

Step 3 – Writing a Test​

Example (test/specs/app.e2e.js):

describe('Angular App', () => {
  it('should have the correct title', async () => {
    await browser.url('http://localhost:4200');
    const title = await browser.getTitle();
    expect(title).toContain('My Angular App');
  });
});

Step 4 – Running Tests​

Run via Angular CLI:

ng e2e

Or directly with WDIO:

npx wdio run wdio.conf.js

Run in a specific environment:

npx wdio run wdio.conf.js --suite chromeOnly

Step 5 – Debugging & Advanced Features​

  • Interactive debugging: 
    npx wdio repl chrome
  • Parallel execution: Set maxInstances in wdio.conf.js.
  • Services: Add integrations like:
    • wdio-sauce-service (Sauce Labs)
    • wdio-browserstack-service
    • wdio-devtools-service (DevTools Protocol)
  • BDD support: 
    npm install @wdio/cucumber-framework

Step 6 – Angular-Specific Tips​

  • Serve your app before testing:
    WDIO does not start the Angular server automatically.

    ng serve

    Then in another terminal:

    npx wdio run wdio.conf.js

  • Waiting for Angular rendering:
    Use WDIO’s built-in waits:

    await $('#element').waitForDisplayed();

7. WebdriverIO CLI Commands​

CommandDescription
npx wdio run wdio.conf.jsRun tests
npx wdio repl chromeInteractive browser REPL
npx wdio configSetup configuration
npx wdio install service <name>Add a WDIO service

8. When WebdriverIO Might Not Be Ideal​

  • If you only target modern browsers and don’t need WebDriver support (Playwright/Cypress might be faster to set up).
  • If you want a GUI test runner (Cypress has a better built-in runner).
  • If you don’t need mobile or legacy browser testing.

9. Summary​

WebdriverIO is ideal if:

  • You need cross-platform automation (web + mobile).
  • You want full WebDriver + DevTools flexibility.
  • You rely on cloud testing services.

It’s less ideal for quick-start projects where minimal config is a priority.