.webp)
As web applications become more complex and closer to native apps in their capabilities, end-to-end (E2E) testing is critical in ensuring they behave as their target users expect.
E2E testing is the testing of an application’s entire flow from start to finish, under simulated real-world conditions, to ensure it behaves as expected and that all of its underlying components work in tandem. It may be horizontal or vertical:
We’ll focus primarily on horizontal E2E testing here.
This type of E2E testing is important because a modern web app can potentially frustrate its intended user in many possible ways, ranging from generally slow loading times to more specific problems such as a poorly implemented birthday picker. The point of an E2E test is for testers to catch such issues and make sure the app is usable, by examining:
This is not an exhaustive list. E2E testing ultimately encompasses all the tests necessary for verifying that a particular application will work properly for an end user. For example, a tester might open an e-commerce web application, log in, add and remove items to the cart, enter payment information and attempt to check out.
E2E testing sits atop the classic “testing pyramid,” with integration testing (middle) and unit testing (bottom) below it.
Unit testing is the testing of individual modules (units), while integration testing is the testing of those modules as a group. In the past, E2E testing — that is, of how the application flow works, end-to-end — was often done manually, but now there is much greater need for automation, especially as continuous integration and delivery (CI/CD) become widespread.
Test automation, at multiple levels of the pyramid, is a fundamental component of CI/CD and a defining characteristic of high-performing DevOps organizations, as documented in the Accelerate State of DevOps 2019 survey. Being able to perform automated E2E tests allows for easier identification of defects, broader test coverage and, ultimately, a better end-user experience. This is where testing frameworks come into play, by enabling test automation.
At a high level, a web testing framework automates what happens in a browser. Where this automation occurs, how easy it is to drive and what protocols,which browsers and languages are supported will vary by framework. Generally, a good testing framework for web apps should be:
Choosing the right framework is pivotal given the growing overall importance of web apps. Progressive web applications (PWAs) are a prime example of the high stakes here: PWAs have become more advanced over time, particularly on Android and Chrome, and offer distinct advantages such as low cost of development and maintenance. Without reliable automated testing, though, these benefits are lost.
There is no universally right choice for a framework. The best option will depend on a company’s intended pace of development, if it’s pursuing test-driven development (TDD) and the levels of browser support it requires. At a more technical level, it is imperative to think about whether testing needs to happen directly within, or outside of, the browser, as this will affect both the speed of the testing and the amount of information provided by those tests.
For example, the Selenium Webdriver protocol automates tests outside the browser, which provides flexibility but requires an intermediary to translate its commands. In contrast, the Chrome DevTools protocol works inside the browser and accordingly is faster and more detailed.
There are tradeoffs with each of them, as well as when using a framework built from the ground on Electron.js and Node.Js. Here’s a quick overview of these three major technical approaches to the automated testing of web apps:
Selenium WebDriver is effectively a remote control for the browser. Tests happen outside of the browser. WebDriver’s own low-level API may be used for automating testing, though the protocol is often used in conjunction with frameworks like WebDriverIO for richer functionality. That’s because WebDriver itself is simply a library and does not come equipped with a test runner and assertions.
These protocols are built into their respective browsers and execute their tests internally. Like Webdriver, they are supported by multiple standalone frameworks as well.
The Node.js runtime is the core of numerous popular web testing frameworks. Combined with an Electron/Chromium browser, as in the Cypress framework, it can enable comprehensive real-time testing of web app events and network traffic.
Keeping up with the ongoing evolution of different frameworks for, and approaches to, web app testing can be complex. To simplify matters, let’s examine a few of the most popular web frameworks, which between them offer viable options for each of the three technical approaches outlined in the previous section. Each of these frameworks is open source and freely available.
What it is: A frontend web testing platform designed for applications built with modern JavaScript frameworks. Cypress consists of a locally installed test runner and a dashboard service that records and displays test results. It uses an Electron.js/Node.Js architecture (so only JavaScript is supported), interacting with its Node server process to respond to application events in real time.
What it is: A highly customizable browser and mobile application test automation framework for Node.js. WebDriverIO supports a variety of modern JavaScript frameworks (React, Vue.js, etc.). Moreover, it can automate tests with either Selenium Webdriver or native API integrations to Chrome DevTools.
What it is: A cross-browser testing framework that evolved from the Puppeteer Node.js library. Whereas Puppeteer is Chrome-only, Playwright works with Firefox and Safari as well.
What it is: A Node.js library for automating headless Chrome/Chromium using DevTools. It can perform key tasks such as generating PDFs and screenshots of pages, automating form submissions and testing Chrome extensions.
What it is: A cross-browser E2E testing framework that runs on Node.js. TestCafe does not control the browser, nor it is a browser itself. Instead, it functions as a proxy server between the browser and Node.js, injecting the code under test with the necessary scripts.
What it is: An E2E testing framework for Angular and AngularJS applications. It is built on top of WebDriver.
What it is: A Node.js-powered E2E testing framework that uses the WebDriver protocol. It includes a command line test runner that can run tests sequentially or in parallel.
What it is: One E2E framework designed to rule them all. CodeceptJS supports Webdriver, Puppeteer, Playwright, TestCafe and others for E2E testing.
Among the above options, we typically recommend:
As you think about how to ensure your web applications are expertly developed and tested, the experienced Trascenda team can help. Connect with us to learn more about how we can guide you on your next project.
