Module 1: WebDriverIO Fundamentals

Learning Objectives

• Understand WebDriverIO architecture and core concepts
• Set up WebDriverIO development environment
• Configure WebDriverIO for different browsers
• Write your first WebDriverIO test
• Understand the WebDriver protocol

1.1 Introduction to WebDriverIO

What is WebDriverIO?

WebDriverIO is a progressive automation framework for web and mobile applications. It's built on Node.js and implements the WebDriver protocol, providing a simple and powerful API for browser automation.

Key Features

• Cross-browser support: Chrome, Firefox, Safari, Edge, and more
• Mobile testing: iOS and Android applications
• Multiple test runners: Mocha, Jasmine, Cucumber
• Built-in services: Selenium Grid, Appium, BrowserStack
• Rich ecosystem: Extensive plugin and service support

1.2 WebDriverIO Architecture

Architecture Components

• Test Runner: Manages test execution and configuration
• WebDriver Client: Communicates with browser drivers
• Browser Driver: Controls the actual browser instance
• Services: Extend functionality (reporting, screenshots, etc.)

1.3 Installation and Setup

Prerequisites

# Node.js (version 14 or higher)
node --version

# npm (comes with Node.js)
npm --version

Project Initialization

# Create new project directory
mkdir webdriverio-tests
cd webdriverio-tests

# Initialize npm project
npm init -y

# Install WebDriverIO CLI
npm install --save-dev @wdio/cli

# Initialize WebDriverIO configuration
npx wdio config

Configuration Options

During configuration, you'll be prompted to choose:

• Test runner (Mocha, Jasmine, Cucumber)
• Browser drivers (Chrome, Firefox, Safari)
• Services (Selenium Standalone, ChromeDriver)
• Reporters (Spec, Allure, JUnit)

1.4 Basic Configuration

wdio.conf.js Structure

exports.config = {
    // Test runner configuration
    runner: 'local',
    
    // Specify test files
    specs: [
        './test/specs/**/*.js'
    ],
    
    // Browser capabilities
    capabilities: [{
        maxInstances: 5,
        browserName: 'chrome',
        acceptInsecureCerts: true
    }],
    
    // Test framework
    framework: 'mocha',
    
    // Mocha options
    mochaOpts: {
        ui: 'bdd',
        timeout: 60000
    },
    
    // Services
    services: ['chromedriver'],
    
    // Reporters
    reporters: ['spec']
};

1.5 Your First Test

Basic Test Structure

// test/specs/basic.test.js
describe('My First WebDriverIO Test', () => {
    it('should open Google and verify title', async () => {
        // Navigate to Google
        await browser.url('https://www.google.com');
        
        // Verify page title
        const title = await browser.getTitle();
        expect(title).toBe('Google');
        
        // Take a screenshot
        await browser.saveScreenshot('./screenshots/google.png');
    });
    
    it('should perform a search', async () => {
        // Navigate to Google
        await browser.url('https://www.google.com');
        
        // Find search input and enter text
        const searchInput = await $('input[name="q"]');
        await searchInput.setValue('WebDriverIO');
        
        // Submit search
        await browser.keys('Enter');
        
        // Wait for results
        await $('h3').waitForDisplayed();
        
        // Verify results are displayed
        const results = await $$('h3');
        expect(results.length).toBeGreaterThan(0);
    });
});

Running Tests

# Run all tests
npx wdio run wdio.conf.js

# Run specific test file
npx wdio run wdio.conf.js --spec test/specs/basic.test.js

# Run tests in headless mode
npx wdio run wdio.conf.js --headless

1.6 Browser Object and Commands

Browser Commands

// Navigation
await browser.url('https://example.com');
await browser.back();
await browser.forward();
await browser.refresh();

// Window management
await browser.maximizeWindow();
await browser.setWindowSize(1024, 768);
const windowSize = await browser.getWindowSize();

// Page information
const title = await browser.getTitle();
const url = await browser.getUrl();
const source = await browser.getPageSource();

// Screenshots
await browser.saveScreenshot('./screenshot.png');

// Cookies
await browser.setCookies({
    name: 'test',
    value: 'value'
});
const cookies = await browser.getCookies();

1.7 Element Selection Basics

Finding Elements

// Single element
const element = await $('button');
const elementById = await $('#submit-btn');
const elementByClass = await $('.btn-primary');

// Multiple elements
const elements = await $$('button');
const listItems = await $$('li');

// Element within element
const form = await $('form');
const submitButton = await form.$('button[type="submit"]');

Element Interactions

// Click actions
await element.click();
await element.doubleClick();
await element.rightClick();

// Input actions
await element.setValue('text');
await element.addValue('more text');
await element.clearValue();

// Element properties
const text = await element.getText();
const value = await element.getValue();
const isDisplayed = await element.isDisplayed();
const isEnabled = await element.isEnabled();

Practical Exercises

Exercise 1: Environment Setup

1. Install Node.js and npm on your system
2. Create a new WebDriverIO project
3. Configure WebDriverIO for Chrome browser
4. Run the configuration wizard and understand each option

Exercise 2: First Test

1. Write a test that navigates to a website of your choice
2. Verify the page title
3. Take a screenshot
4. Run the test and verify it passes

Exercise 3: Basic Interactions

1. Create a test that interacts with a form
2. Fill in input fields
3. Click buttons
4. Verify the results

Next Steps

In the next module, we'll dive deeper into element selection strategies and advanced interaction patterns. You'll learn about different locator strategies and how to handle complex UI elements effectively.