In the field of software development, ensuring that an engineering or modeling tool works correctly is crucial for providing a smooth, error-free developer experience. By leveraging the power of Chrome Devtools and the Devtools protocol, which is fully compatible with Equo Chromium, developers can thoroughly test an application’s behavior across different desktop environments and IDEs.

Moreover, testing and working with web-based and embedded applications/extensions within multiple IDEs—such as VS Code, Eclipse, and Eclipse Theia—while maintaining code consistency is vital for enhancing collaboration and boosting productivity and coverage. In this article, we will explore common testing frameworks, best practices for conducting tests, and ensure a unified single testing codebase across IDEs. We are providing a demo project with best practices and ready to-use tests at the following Github repository.

DevTools Protocol: The Backbone of Modern Web Testing

Chrome DevTools is a sophisticated suite of web developer tools integrated into the Chrome browser. With its intuitive interface and powerful features, it empowers developers to effortlessly edit pages in real-time, diagnose issues swiftly, and optimize web performance with precision. Beyond its utility for manual debugging and optimization, it shines as an invaluable asset for test automation through the DevTools Protocol.

The DevTools Protocol provides a programmatic interface to control and inspect the browser, enabling developers to automate tasks such as page navigation, element interaction, network request monitoring, and performance profiling. Its compatibility with popular testing frameworks like Puppeteer, Selenium, and Playwright allows for robust headless browser automation. These frameworks streamline workflows and enhance test coverage by supporting complex scenarios, including UI interactions, network request handling, and performance benchmarking.

This makes Chrome DevTools an indispensable tool for both developers and testers aiming to deliver high-quality web applications, with the ability to automate and test effectively using these integrated frameworks.

Equo Chromium: The engine for testing Cross IDEs Engineering Tools

As you may already know, Equo Chromium brings the full potential of a modern browser to desktop application development. This integration goes beyond simply rendering web content—it enables Java-based applications, such as SWT, Eclipse RCP, or Swing, to harness tools, extensions, and features typically only available in web browsers.

Furthermore, as we highlighted in the previous section, it supports the use of multiple web-testing frameworks, allowing developers to test web content and application interactions within a desktop application, and enhancing the testing process with familiar tools and methodologies through the use of the Devtools Protocol.

Here’s what this means in practice:

Usage of Web Technologies: Developers can use powerful frontend frameworks like React, Angular, or Vue.js to create dynamic components and web-based UIs within the SWT, Eclipse RCP, or Swing application. These tools enable developers to build rich UIs and features with less effort and in less time.

Chrome Tools: Built on Chromium, Equo Chromium provides support for Chrome extensions, screenshot capture, FIDO2 authentication, advanced security protocols, printing, and other valuable features..

Native Web Features: Equo Chromium supports advanced browser features such as progressive web applications (PWAs), offline capabilities, secure communication protocols (HTTPS), and modern JavaScript APIs. These capabilities empower developers to bring innovative solutions to SWT, Eclipse RCP and Swing applications..

Using Equo Chromium as an embedded browser in Java applications provides significant advantages, especially when it comes to testing across multiple IDEs. With Equo Chromium developers can test web-based tools across multiple IDEs, like VS Code extensions, and desktop applications based on Eclipse or Theia, all while maintaining a unified codebase.

This is particularly beneficial in collaborative projects where different development environments are used, or when products integrate features across these multiple platforms. Standardized testing helps maintain code consistency, detect bugs early, and reduce development time, ultimately improving application reliability.

A shared codebase enhances collaboration and consistency, as developers can rely on a single source for both VS Code extensions and Eclipse-based applications. Code consistency simplifies version control and integration, making it an essential part of modern software development. By following best practices, developers can scale and reuse tests effectively.

Using Equo Chromium developers can test applications within multiple IDEs without compromising code integrity. By maintaining a single codebase, teams can ensure their tools work across VS Code, Eclipse Theia, and Eclipse IDE.

Using Equo Chromium As An Embedded Browser In Java Applications

First of all, we should acknowledge that, even in its embedded setup, Equo Chromium is:

Simple to test: Does not differ from web testing.

Straightforward to integrate during development process

Effortless to escalate into more complex test cases

Consistent performance

For example, imagine integrating real-time dashboards, interactive reporting tools, or even advanced charting libraries—all within your SWT, Eclipse RCP or Swing applications. With Equo Chromium, the possibilities are endless.

Its compatibility with modern web technologies allows developers to test advanced features, such as dynamic content updates or responsive layouts, without additional overhead. This reduces the complexity of managing separate environments for web and desktop applications.

Moreover, Equo Chromium’s ability to run embedded ensures that developers can validate application behavior in a production-like environment. This eliminates discrepancies that often arise between isolated testing setups and real-world usage scenarios.

Old Knime UI

Knime UI Modernized using Equo Chromium

Real Case Scenario: Validating a web-based tool in multiple IDEs

Now, we will proceed to discuss a real sample application: the GLSP use case. GLSP is an extensible, open-source framework designed for creating custom diagram editors using web technologies. It uses Sprotty to handle diagrams in web-based IDEs such as VS Code and Eclipse Theia, and it can also be integrated with embedded browsers such as Equo Chromium within the Eclipse IDE.

We have prepared a demo project to showcase this. Using Playwright, a powerful framework that integrates with DevTools, we demonstrate how to create a robust testing environment for the GLSP product. This repository not only provides the setup and test cases but also includes best practices for testing tools across multiple IDEs within a unified codebase.

Additionally, the demo includes simple examples of DOM manipulation and the assertion of those changes, illustrating efficient and effective testing strategies. This enables you to test web components across diverse IDEs while simplifying maintenance and ensuring consistency.

GLSP project inside VS Code

By adhering to our established guidelines and using the full potential of the DevTools protocol, along with the tools mentioned previously, developers can effectively test extensions within web-based IDEs and the Eclipse IDE. This approach allows for a unified testing codebase, ensuring consistency across different environments while simplifying ongoing maintenance and updates.

GLSP project inside Eclipse rendered using Equo Chromium

Explore the Equo Chromium Testing Repository

For a practical setup and ready-to-use test cases, the Equo Chromium Testing Repository on GitHub offers a comprehensive starting point. It includes all necessary configurations, test cases, and best practices for testing the GLSP tool in different environments like VS Code, Eclipse IDE, and Theia. The repository also demonstrates how to use Playwright, a robust framework compatible with DevTools, to create a powerful testing environment for the GLSP product.