Builder App Example

This is a complete Electron application built with Electron Builder and electron-vite, demonstrating how to use wdio-electron-service for end-to-end testing with a professional packaging setup.

🚀 Features

• Electron Builder for professional packaging and distribution
• electron-vite for fast development and building
• ESM main process with CJS preload script
• Context isolation and secure IPC communication
• Application menu with native OS integration
• Comprehensive test suite with builder-specific features

📦 What's Included

Application Structure

src/
├── main/           # Main process (ESM)
│   └── index.js
├── preload/        # Preload scripts (CJS)
│   └── index.cjs
└── renderer/       # Renderer process
    └── index.html

Test Features Demonstrated

• ✅ Builder-specific UI testing
• ✅ Menu system testing
• ✅ Window configuration validation
• ✅ Multi-option dialog testing
• ✅ App path and configuration access
• ✅ CSS Grid layout validation
• ✅ HTML content formatting tests

🛠️ Development

1# Install dependencies
2pnpm install
3
4# Start development server
5pnpm dev
6
7# Build the app
8pnpm build
9
10# Package the app (without distribution)
11pnpm pack
12
13# Create distributable packages
14pnpm dist
15
16# Run tests
17pnpm test

🧪 Testing

The test suite demonstrates builder-specific features:

1. Builder Configuration - Access to build settings and package info
2. Menu System - Testing native application menus
3. Window Management - Validation of window size and properties
4. Advanced UI - Grid layouts, backdrop filters, HTML formatting
5. Distribution Features - Testing packaged app characteristics

📋 When to Use This Setup

Choose Electron Builder when you want:

• Professional packaging and distribution
• Code signing and notarization
• Auto-updater functionality
• Multiple platform builds
• Custom installers (NSIS, DMG, etc.)
• Advanced build configurations

🔧 Configuration

Builder Configuration

The builder configuration is in package.json under the build section:

• Custom app ID and product name
• Platform-specific build targets
• Output directory configuration
• File inclusion patterns

electron-vite Configuration

See electron.vite.config.js for build configuration.

WebDriverIO Configuration

See wdio.conf.js for test configuration. The service can auto-detect Builder output or use explicit paths.

🎯 Key Differences from Forge

• Packaging Focus: Builder is primarily about packaging, not development
• Configuration: More granular control over build process
• Distribution: Better support for app stores and auto-updates
• Flexibility: Works with any build tool (not just electron-vite)
• Output Structure: Different directory structure (dist-electron/ vs out/)

🏗️ Build Output

Electron Builder creates:

dist-electron/
├── mac/
│   └── Builder App Example.app/
├── win/
│   └── Builder App Example.exe
└── linux/
    └── Builder App Example.AppImage

📱 Distribution

Builder supports:

• macOS: DMG, PKG, MAS (App Store)
• Windows: NSIS, Squirrel, MSI, AppX (Store)
• Linux: AppImage, deb, rpm, snap, flatpak