webdriverio-e2e-testing

name	WebdriverIO E2E Testing
description	Build WebdriverIO E2E suites — wdio.conf.ts setup, $ and $$ selectors, auto-wait and waitUntil, Mocha framework structure, page objects, parallel capabilities, and services for visual testing and Appium mobile.
version	1.0.0
author	thetestingacademy
license	MIT
tags	["webdriverio","wdio","e2e","selenium","appium","mocha","page-object","parallel","typescript"]
testingTypes	["e2e","integration"]
frameworks	["webdriverio","mocha","appium"]
languages	["typescript","javascript"]
domains	["web","mobile"]
agents	["claude-code","cursor","github-copilot","windsurf","codex","aider","continue","cline","zed","bolt","gemini-cli","amp"]

WebdriverIO E2E Testing

This skill makes an AI agent write and configure WebdriverIO (WDIO) end-to-end tests: a correct wdio.conf.ts, $/$$ selector usage with auto-waiting, waitUntil for custom conditions, Mocha-structured specs, page objects, parallel execution via maxInstances and multiple capabilities, and service wiring (visual regression, Appium for mobile). Trigger it when a repo contains @wdio/cli in devDependencies, a wdio.conf.* file, or the user asks for WebdriverIO/WDIO tests.

Core Principles

1. WDIO commands auto-wait — do not add manual pauses. $('button').click() retries until the element is interactable (governed by waitforTimeout). browser.pause() in committed code is a bug, not a fix.
2. $ returns a chainable element, not a handle. Re-locating happens on each command, so stale-element errors are rare. Store the selector chain, never an awaited snapshot, in page objects.
3. Use WDIO selector strengths in priority order: accessibility-ish text selectors (button=Submit, *=partial), then data-testid via [data-testid="x"], then CSS. Reach for XPath only for parent-axis traversal.
4. One spec = one user-visible behavior. WDIO workers isolate per spec file; long multi-journey specs serialize your suite and hide which behavior broke.
5. Parallelism is config, not code. maxInstances + the capabilities array fan out across browsers; specs must not share accounts or mutable server state.
6. Services do the heavy lifting. Visual diffs (@wdio/visual-service), Appium (@wdio/appium-service), and Selenium Grid wiring belong in services:, not hand-rolled in hooks.

Setup

npm init wdio@latest .   # interactive scaffold
# or manual:
npm install --save-dev @wdio/cli @wdio/local-runner @wdio/mocha-framework @wdio/spec-reporter tsx

// wdio.conf.ts
import type {  }  ;

  : . = {
  : ,
  : [],
  : ,
  : [
    {
      : ,
      : {
        : process.. ? [, , ] : [],
      },
    },
  ],
  : ,
  : process.. ?? ,
  : ,        
  : ,
  : ,
  : [],
  : { : , :  },

  
  : process.. ?  : ,

  :   () {
     (!passed) {
       browser.(); 
    }
  },
};