WebDriverIO: Parallelle Tests Uitvoeren - Complete Handleiding

Het parallel uitvoeren van tests in WebDriverIO is een krachtige manier om je testproces te versnellen en cross-browser compatibiliteit te waarborgen. Deze handleiding legt uit hoe je dit effectief kunt implementeren.

Waarom Parallelle Tests?

Voordelen:

Tijdsbesparing: Tests draaien gelijktijdig in plaats van sequentieel
Cross-browser testing: Controleer compatibiliteit over meerdere browsers tegelijk
Snellere feedback: Krijg eerder resultaten over je code wijzigingen
Efficiënt gebruik van resources: Maximaliseer je test infrastructuur

Initiële Setup

1. WebDriverIO Installatie

Bij het installeren van WebDriverIO kun je direct meerdere browsers selecteren:

npm init wdio@latest

Tijdens de setup wizard:

Selecteer de gewenste browsers (Chrome, Edge, Firefox, Safari)
Deze worden automatisch toegevoegd aan je wdio.conf.js

2. Handmatige Browser Toevoeging

Stap 1: Driver Installeren

# Chrome
npm install chromedriver --save-dev

# Edge
npm install edgedriver --save-dev

# Firefox
npm install geckodriver --save-dev

# Safari (alleen macOS)
npm install safaridriver --save-dev

Stap 2: WebDriverIO Services Installeren

# Chrome
npm install @wdio/chromedriver-service --save-dev

# Edge
npm install @wdio/edgedriver-service --save-dev

# Firefox
npm install @wdio/geckodriver-service --save-dev

# Safari
npm install @wdio/safaridriver-service --save-dev

Configuratie

Capabilities Array

// wdio.conf.js
exports.config = {
    capabilities: [
        {
            browserName: 'chrome',
            'goog:chromeOptions': {
                args: ['--no-sandbox', '--disable-dev-shm-usage']
            },
            maxInstances: 5
        },
        {
            browserName: 'MicrosoftEdge',
            'ms:edgeOptions': {
                args: ['--no-sandbox', '--disable-dev-shm-usage']
            },
            maxInstances: 3
        },
        {
            browserName: 'firefox',
            'moz:firefoxOptions': {
                args: ['-headless']
            },
            maxInstances: 2
        }
    ],
    
    // Globale instellingen
    maxInstances: 10,
    maxInstancesPerCapability: 5,
    
    // Services configuratie
    services: [
        'chromedriver',
        'edgedriver', 
        'geckodriver'
    ]
}

Services Array

services: [
    ['chromedriver', {
        logLevel: 'info',
        outputDir: 'driver-logs'
    }],
    ['edgedriver', {
        logLevel: 'info'
    }],
    ['geckodriver', {
        logLevel: 'info'
    }]
]

Geavanceerde Configuratie

MaxInstances Optimalisatie

// Globale limiet
maxInstances: 10,

// Per capability limiet
capabilities: [
    {
        browserName: 'chrome',
        maxInstances: 5  // Overschrijft globale setting
    },
    {
        browserName: 'firefox', 
        maxInstances: 2  // Firefox is vaak langzamer
    }
]

Browser-specifieke Instellingen

capabilities: [
    {
        browserName: 'chrome',
        'goog:chromeOptions': {
            args: [
                '--no-sandbox',
                '--disable-dev-shm-usage',
                '--disable-gpu',
                '--window-size=1920,1080'
            ]
        }
    },
    {
        browserName: 'firefox',
        'moz:firefoxOptions': {
            args: ['-headless'],
            prefs: {
                'dom.webnotifications.enabled': false
            }
        }
    }
]

Tests Uitvoeren

Alle Browsers

npm run wdio

Specifieke Browser

Commentarieer andere browsers uit in wdio.conf.js:

capabilities: [
    {
        browserName: 'chrome',
        maxInstances: 5
    },
    // {
    //     browserName: 'firefox',
    //     maxInstances: 2
    // }
]

Via Command Line

# Specifieke browser
npx wdio --spec ./test/specs/login.spec.js --capabilities chrome

# Met custom config
npx wdio wdio.chrome.conf.js

Best Practices

1. Test Isolatie

// Zorg dat tests onafhankelijk zijn
beforeEach(async () => {
    await browser.reloadSession();
    await browser.url('/');
});

2. Resource Management

// Beperk gelijktijdige instanties op basis van je systeem
maxInstances: process.env.CI ? 5 : 2,

3. Headless Mode voor CI/CD

const isCI = process.env.CI;

capabilities: [
    {
        browserName: 'chrome',
        'goog:chromeOptions': {
            args: isCI ? ['--headless', '--no-sandbox'] : []
        }
    }
]

4. Retry Mechanisme

// wdio.conf.js
exports.config = {
    mochaOpts: {
        retries: 2  // Retry gefaalde tests
    }
}

Monitoring en Debugging

1. Logging

// wdio.conf.js
exports.config = {
    logLevel: 'info',
    outputDir: './logs',
    
    reporters: [
        'spec',
        ['allure', {
            outputDir: 'allure-results',
            disableWebdriverStepsReporting: true
        }]
    ]
}

2. Screenshots bij Fouten

afterTest: async function(test, context, { error }) {
    if (error) {
        await browser.saveScreenshot(
            `./screenshots/error-${Date.now()}.png`
        );
    }
}

Troubleshooting

Veelvoorkomende Problemen

Te veel gelijktijdige instanties:

// Verlaag maxInstances
maxInstances: 3,
maxInstancesPerCapability: 2

Memory problemen:

'goog:chromeOptions': {
    args: [
        '--no-sandbox',
        '--disable-dev-shm-usage',
        '--disable-extensions',
        '--disable-gpu'
    ]
}

Timeouts:

// Verhoog timeouts voor parallelle runs
mochaOpts: {
    timeout: 120000  // 2 minuten
}

Performance Tips

Gebruik SSD: Voor snellere browser starts
RAM optimalisatie: Minimaal 8GB voor meerdere browsers
CPU cores: Meer cores = meer parallelle instanties
Headless mode: Voor CI/CD omgevingen
Test verdeling: Verdeel lange test suites over meerdere files

Conclusie

Parallelle testing met WebDriverIO verhoogt je test efficiëntie aanzienlijk. Start klein met 2-3 browsers en optimaliseer geleidelijk op basis van je systeem capaciteit en test resultaten.

Volgende stappen:

Experimenteer met maxInstances waarden
Implementeer browser-specifieke configuraties
Integreer met je CI/CD pipeline
Monitor resource gebruik en optimaliseer waar nodig