Using Playwright with Electron-Based Applications

Electron has become a popular framework for building cross-platform desktop applications using web technologies like JavaScript, HTML, and CSS. Applications such as Visual Studio Code, Slack, and Discord are built on Electron. As these apps grow in complexity, the need for automated end-to-end testing becomes essential. Playwright, a powerful end-to-end testing framework developed by Microsoft, is a great fit — even for Electron apps.

In this blog, we’ll explore how to use Playwright to automate testing for Electron-based applications, including setup, code examples, and best practices.


Why Use Playwright for Electron?

While Electron apps run on desktops, they’re essentially Chromium-based browsers running inside a native shell. Playwright is built to automate Chromium, Firefox, and WebKit — making it ideal for interacting with the web contents of Electron apps.

Key benefits of using Playwright for Electron:

Full browser control including Chromium (used by Electron)

Built-in support for context isolation and multiple windows

Powerful selectors (text, CSS, XPath, role-based)

Support for headless and headed modes

Cross-platform testing on Windows, macOS, and Linux


Prerequisites

To get started, you’ll need:

Node.js (v16+ recommended)

An Electron application (demo or production)

Playwright installed

Install Playwright using npm:


bash

npm install -D playwright

Install Electron if not already part of your project:


bash

Copy

Edit

npm install electron


Step 1: Launching Electron with Playwright

Unlike testing web pages, Electron testing involves launching the app through Electron’s main process.

Create a script to launch Electron manually and hook it with Playwright:


javascript


const { _electron: electron } = require('playwright');

const path = require('path');


(async () => {

  const electronApp = await electron.launch({

    args: [path.join(__dirname, 'path-to-your-electron-main.js')],

  });


  // Get the first BrowserWindow

  const window = await electronApp.firstWindow();


  // Perform actions

  await window.click('text=Login');

  await window.fill('#username', 'admin');

  await window.fill('#password', 'admin123');

  await window.click('button[type="submit"]');


  // Take a screenshot

  await window.screenshot({ path: 'login-screen.png' });


  await electronApp.close();

})();

The _electron API in Playwright provides methods to control the Electron app from both the main and renderer processes.


Step 2: Interacting with the App

Once you have access to the window, you can use all standard Playwright commands:

click(selector)

fill(selector, value)

waitForSelector(selector)

evaluate(pageFunction)

screenshot(options)

For multi-window apps, use:


javascript


const allWindows = electronApp.windows();

To listen for events like opening new windows:


javascript


electronApp.on('window', window => {

  console.log('New window opened');

});

Step 3: Writing Tests with Test Runner

You can integrate this with the Playwright Test Runner:


bash

Copy

Edit

npx playwright test

Create a test file:


javascript

Copy

Edit

import { test, expect, _electron as electron } from '@playwright/test';


test('should login successfully in Electron app', async () => {

  const electronApp = await electron.launch({ args: ['main.js'] });

  const window = await electronApp.firstWindow();


  await window.fill('#username', 'admin');

  await window.fill('#password', 'admin123');

  await window.click('button[type="submit"]');

  await expect(window.locator('.dashboard')).toBeVisible();


  await electronApp.close();

});


Best Practices

Use data-test selectors for robust element targeting.

Avoid hard-coded waits; prefer waitForSelector or expect.

Test in both development and packaged Electron modes.

Capture screenshots and videos for debugging failures.


Final Thoughts

Playwright offers a powerful way to automate testing for Electron apps with minimal setup and deep integration into Chromium. It enables you to write fast, reliable tests that mimic real user interactions inside desktop applications. Whether you're testing a simple login flow or a complex multi-window app, Playwright can help you ensure quality and stability across every feature of your Electron-based software.

Learn Playwright Testing Training

Read More : Creating Test Templates for Rapid Prototyping in Playwright

Read More: Continuous Monitoring Using Playwright Scripts

Read More: Automating Bulk Form Submissions in Playwright

Visit IHUB Talent Institute Hyderabad

Get Direction

Comments

Post a Comment

Popular posts from this blog

How to Use Tosca's Test Configuration Parameters

Tosca by Tricentis is a powerful model-based test automation tool widely used in enterprise environments for end-to-end testing. One of its most useful features is Test Configuration Parameters (TCPs), which provide flexibility and control in managing test execution. TCPs enable testers to create reusable test cases by passing dynamic values without hardcoding them. This significantly enhances test maintenance, scalability, and efficiency. In this blog, we’ll explore what Test Configuration Parameters are, how to create and use them, and the best practices to follow when working with TCPs in Tosca. What Are Test Configuration Parameters? Test Configuration Parameters are custom-defined key-value pairs that can be associated with test cases, test case folders, or execution lists in Tosca. They help manage configuration data such as environment URLs, browser types, credentials, or any other variable data that may differ across test runs. By using TCPs, you can avoid duplicating test case...
Read more

Tosca Licensing: Types and Considerations

 Tosca by Tricentis is a widely used, enterprise-level automation testing tool known for its model-based approach, scriptless testing, and support for a wide range of applications (web, desktop, mobile, API, etc.). As organizations look to implement Tosca into their quality assurance processes, one of the key areas to understand is its licensing model. In this blog, we’ll explore the various types of Tosca licenses, key considerations for choosing the right license, and best practices to manage licensing efficiently within your test automation ecosystem. 🔑 Why Licensing Matters in Tosca Tosca is a commercial tool, and proper licensing is crucial to access its full range of capabilities, manage costs, scale efficiently, and remain compliant with Tricentis’s usage policies. The right licensing setup ensures that testers and teams can collaborate effectively without disruptions due to access or resource limitations. 📌 Types of Tosca Licenses Tricentis offers several licensing types ...
Read more

Using Hibernate ORM for Fullstack Java Data Management

In the world of fullstack Java development, managing data efficiently and seamlessly across the application is critical. One of the most powerful tools in the Java ecosystem for handling database operations is Hibernate ORM (Object-Relational Mapping). Hibernate simplifies the interaction between Java applications and relational databases, reducing boilerplate code and improving maintainability. This blog explores how Hibernate ORM works, why it’s widely used, and how it fits into the data management strategy of a fullstack Java application. What is Hibernate ORM? Hibernate ORM is an open-source Java framework that provides a powerful and flexible mechanism for mapping Java objects to database tables. It abstracts the low-level JDBC code, allowing developers to work with high-level object-oriented concepts. Instead of writing raw SQL queries, Hibernate allows developers to define database interactions using simple Java classes (also known as POJOs) and annotations or XML configurations...
Read more