Testing Electron Desktop Applications with Playwright

Modern web applications require thorough testing strategies that account for regional requirements, diverse user bases, and complex technical architectures. This guide provides actionable Playwright patterns for your specific context.

Introduction

Configure Playwright to test Electron desktop apps, IPC message flows, native dialog interception, and auto-updater scenarios. This guide covers the essential patterns, configurations, and strategies to handle this scenario reliably in your Playwright test suite.

Understanding the nuances of this topic allows your team to ship with confidence, reduce flakiness, and maintain high-quality automation across different environments.

Architecture Overview

graph TD
    Test["Playwright Test"] --> Electron["Electron Process"]
    Electron --> Main["Main Process"]
    Main --> IPC["IPC Bridge"]
    IPC --> Renderer["Renderer Window"]

This structure ensures clean separation of concerns and maintainable test code.

Implementation Flow

sequenceDiagram
    participant Test as Playwright Test
    participant App as Application
    participant API as Backend / Mock API

    Test->>App: Navigate and interact
    App->>API: Trigger API call
    API-->>App: Return response
    App-->>Test: UI state updated
    Test->>Test: Assert outcome

Step-by-Step Guide

Follow this implementation to set up the pattern in your test suite.

1. Core Implementation

import { _electron as electron } from 'playwright';

test('Electron app launches and shows main window', async () => {
  const app = await electron.launch({ args: ['./dist/main.js'] });
  const page = await app.firstWindow();

  await expect(page).toHaveTitle(/My Electron App/);
  await expect(page.getByRole('navigation')).toBeVisible();

  // Test native menu via IPC
  await app.evaluate(({ Menu }) => {
    Menu.getApplicationMenu()?.getMenuItemById('file-new')?.click();
  });
  await expect(page.getByRole('dialog')).toBeVisible();
  await app.close();
});

2. Run and Verify

# Run this specific test file
npx playwright test --grep "Testing Electron Desktop"

Run with UI mode for debugging
npx playwright test --ui

Run across all browsers
npx playwright test --project=chromium --project=firefox --project=webkit

3. View Test Report

npx playwright show-report

Reference Table

Best Practices

Common Pitfalls

Frequently Asked Questions

How to set up Playwright for Electron testing?

Import _electron from playwright and use electron.launch() with your app's main.js entry point.

How to test Electron IPC communications?

Use app.evaluate() to call main process IPC functions and verify renderer responses via page assertions.

Can Playwright test Electron system tray?

Access the tray via app.evaluate() with the Tray module and test click events programmatically.

How to test Electron auto-updater?

Mock the update server endpoint and verify the auto-updater UI shows version notifications correctly.

How to test native file open dialogs?

Mock dialog.showOpenDialog in app.evaluate() to return test file paths without showing native UI.

Summary

Configure Playwright to test Electron desktop apps, IPC message flows, native dialog interception, and auto-updater scenarios. By following these patterns, your team can build a reliable, maintainable automation suite that works across environments and handles edge cases gracefully.

Related Articles