Browser engines and their impact on testing
Why does a tester need to know this?
What is a browser engine? Let's figure it out together.
The engine is core any browser. It is presented in the form of a script and is responsible for converting web product code into a dynamic imagewhich is displayed on the user's device screen. The differences in engines are based on the fact that they have different code processing algorithms. They also use different principles for implementing web standards.
Nowadays, Blink, WebKit and Quantum (Gecko) engines are relevant, and such engines as Trident, EdgeHTML and Presto are already a thing of the past. Below we will look at the main engines and analyze how their features affect testing.
Blink
A modern engine created in 2013 based on WebKit. It is considered fast and high-performance enough to work with web applications. Used in Google Chrome, Opera and new versions of Microsoft Edge, as well as in other Chromium-based browsers, for example, Yandex Browser.
WebKit
Optimized for Apple devices. Like Blink, it has high performance and supports all major web standards. Another of its advantages is energy efficiency and high quality rendering of text and graphics, which is especially important for high-resolution displays. Applies to Safari.
Gecko
Quite an old engine – it was developed back in 1997. Its undeniable advantages are cross-platform and flexibility, because… Gecko supports many operating systems, including Windows, macOS, Linux and Android. Like Blink and WebKit, it supports all major web standards. Although it may not be as fast as WebKit, it has its own feature – extensibility, i.e. can support many unique extensions and plugins (for example Selenium). Used in Firefox (up to version 57) and other Mozilla products (for example, the Thunderbird email client), SeaMonkey.
Quantum (Gecko).
This is a major update to the Gecko engine released in 2017 that significantly improves the quality of the Firefox browser. Thanks to its support for modern web standards, Firefox is now one of the most compatible browsers. Applies to Firefox (from version 57), Tor Browser and Waterfox.
Trident and EdgeHTML
Trident has been used in Internet Explorer (since v4.0). EdgeHTML is a fork of it, created specifically for Microsoft Edge. EdgeHTML has been replaced by Blink in its newer versions. The main disadvantage of these engines is compatibility and security problems.
Presto
The main application of Presto was the Opera browser, which until 2013 used this engine. Presto has also been used in some mobile browsers and devices such as Opera Mini and Opera Mobile. Like EdgeHTML, it was replaced by Blink.
Presto, Trident and Gecko are mostly history. But the triumvirate of Quantum (Gecko), Blink and WebKit is very good. These engines are the most advanced engines available today.
So, why does a tester need to know this?
Knowing how browser engines work is important for QA specialists for several reasons.
1. Engine performance may vary significantly. For example, once on a project we had a situation: an application with interactive elements and dynamic loading of content worked perfectly in Chrome (Blink), but in Firefox (Gecko) we noticed obvious delays in rendering. As a result, additional optimization had to be done to ensure that the application ran smoothly in all target browsers.
2. Cross-browser compatibility and HTML/CSS/JavaScript processing. The engines process HTML, CSS, and JavaScript differently. This may result in the same web application working differently in different browsers. For example, animations, layouts, or scripts may display correctly in Chrome but have problems in Safari or Firefox. Knowing the features of each engine allows you to identify such differences in the early stages of testing.
By statistics, in the Russian Federation, the distribution among users of preferences in using browsers over the past year is as follows:
This is exactly what should be taken into account when conducting cross-browser testing.
About 80-85% of users use browsers with the Blink engine. So when testing, we can safely choose one of them (Google Chrome, Yandex Browser, Opera or Microsoft Edge) and with approximately 99.9 (9)% probability the web product will work and be displayed identically in them. But to be completely sure that the web product is suitable for the remaining 15-20% of users who use browsers based on other engines, you need to additionally test it in the Safari and Firefox browser.
In one of the projects we worked with layouts built on CSS Flexbox and Grid. The layout looked perfect in Chrome and Safari (on WebKit), but as soon as we tested it in the old Internet Explorer 11 (on Trident), the layout completely went wrong. We had to implement various CSS hacks to ensure correct display in older browsers. Another time, problems arose with the operation of service workers, which allow implementing offline mode: on the one hand, everything is ok in Chrome and Firefox, but on the other, problems in older versions of Safari. As a result, we used fallbacks and alternative methods to ensure that the application would work on all platforms. These cases taught us to always remember about cross-browser support and older engines.
3. Browser engines affect how a web application will work on different platforms (desktop, mobile devices, tablets). For example, WebKit, which is used in Safari on Apple devices, has better power efficiency and rendering for high-resolution screens.
4. When a bug is discovered, it is important to understand whether it is due to an error in the code application or with the operating features of a particular engine. This helps you more accurately localize the problem and communicate more effectively with developers to fix it. For example, a bug that appears only in Firefox may be the result of a specific Gecko engine.
5. It is important to understand which engine supports automation tools betterto select the most appropriate testing approach. Engines may have varying degrees of support for automation tools such as Selenium or Puppeteer. Gecko supports many unique extensions and plugins for testing. This knowledge helps you choose the right approach for test automation… While working with Selenium, a colleague of mine discovered that the Gecko engine (in Firefox) allows for better integration of unique extensions and plugins for automated testing. We took advantage of this to create complex test scenarios.
6. Knowledge of legacy enginessuch as Trident or Presto, important when testing old applications or to provide support for legacy systems. Testers must be prepared for the specific problems that may arise in such systems.
Ultimately, a deep understanding of browser engines helps ensure a high-quality product across devices and platforms. This improves the user experience and reduces the likelihood of problems occurring after release.
Well, isn't it worth knowing up front that Blink and WebKit actively support APIs for working with device hardware, such as accessing the camera via WebRTC, and Gecko may have quirks in implementing this API? This behavior is easy to notice when testing video conferencing applications or applications that use camera recording – Firefox has problems with camera resolution or audio, while in Chrome or Safari these functions work correctly.
These examples helped us see in practice how knowledge of engines gives us the chance to detect and solve problems related to performance, compatibility, security and functionality of applications on different browsers. I hope this article has convinced you that knowledge about browser engines is necessary for testing specialists. I would be grateful if you could provide feedback and share your experience on this topic.
Khariton Dunko, testing specialist at Quality Laboratory
