Back to Repositories

Testing WebdriverIO E2E Plugin Implementation in Vue CLI

This test suite validates the WebdriverIO E2E testing functionality in Vue CLI projects. It tests both JavaScript and TypeScript implementations, ensuring proper integration with Vue CLI’s testing infrastructure and plugin system.

Test Coverage Overview

The test suite provides comprehensive coverage of WebdriverIO integration scenarios:

Basic JavaScript project setup with Babel and ESLint integration
TypeScript project configuration with class components
Chrome WebDriver implementation testing
CI/CD environment handling with headless mode support

Implementation Analysis

The testing approach utilizes Vue CLI’s test utilities to create isolated test projects. It implements conditional test execution based on environment variables, accommodating both local development and CI pipeline scenarios.

Key patterns include:

Project creation with dynamic plugin configuration
Environment-aware test execution logic
Integration with multiple Vue CLI plugins

Technical Details

Testing infrastructure includes:

Jest as the test runner with custom timeouts
WebdriverIO for E2E testing
Vue CLI test utilities for project creation
Chrome WebDriver implementation
Support for both headless and headed test execution

Best Practices Demonstrated

The test suite exemplifies several testing best practices:

Environment-specific timeout configurations
Isolated test project creation
Flexible plugin configuration handling
CI/CD environment awareness
Cross-framework compatibility testing

vuejs/vue-cli

packages/@vue/cli-plugin-e2e-webdriverio/__tests__/wdioPlugin.spec.js

            
jest.setTimeout(process.env.APPVEYOR ? 120000 : 60000)

const create = require('@vue/cli-test-utils/createTestProject')

test('should work', async () => {
  const project = await create('e2e-webdriverio', {
    plugins: {
      '@vue/cli-plugin-babel': {},
      '@vue/cli-plugin-e2e-webdriverio': {
        webdrivers: ['chrome']
      },
      '@vue/cli-plugin-eslint': {
        config: 'airbnb',
        lintOn: 'save'
      }
    }
  })

  if (!process.env.CI) {
    await project.run(`vue-cli-service test:e2e`)
  } else if (!process.env.APPVEYOR) {
    await project.run(`vue-cli-service test:e2e --headless`)
  }
})

test('should work with TS', async () => {
  const project = await create('e2e-webdriverio-ts', {
    plugins: {
      '@vue/cli-plugin-typescript': {
        'classComponent': true,
        'lintOn': ['save']
      },
      '@vue/cli-plugin-e2e-webdriverio': {
        webdrivers: ['chrome']
      }
    }
  })

  if (!process.env.CI) {
    await project.run(`vue-cli-service test:e2e`)
  } else if (!process.env.APPVEYOR) {
    await project.run(`vue-cli-service test:e2e --headless`)
  }
})