Chapter 5: Introducing the Leading Frontend Web Development Frameworks
In previous chapters, we looked at the four leading frontend web test automation frameworks (Playwright, Puppeteer, Selenium, and Cypress), and outlined the key testing types, which include functional, non-functional, API, and accessibility. We also looked at some of the key testing objectives that developers and SDETs (software developer engineer in testing) consider when choosing a test automation framework.
In this chapter, we will look at the test frameworks from the web development and application perspectives and provide guidelines on how to ensure that your test framework best fits the application type as well as the web development frameworks.
The chapter is designed to cover the following:
- Charting the leading web development frameworks by their types
- Guidelines for picking the most advanced JavaScript web development technology
The goal of this chapter is to familiarize you with the most used web development frameworks on the market. As a test engineer, knowing these leading technologies, their advantages, and core features, as well as getting references to sample web applications built using these frameworks, can help with test planning activities.
Technical requirements
The code files for this chapter can be found here: https://github.com/PacktPublishing/A-Frontend-Web-Developers-Guide-to-Testing.
Introduction to the leading web development frameworks
We've already established a good level of understanding about the advancements in web testing frameworks and reviewed some of the differences and unique capabilities of each. The four leading test automation frameworks that we are covering in this book are challenged daily by the technology that frontend web application developers use to build their software.
After looking at the State of JavaScript survey for the past few years, specifically for 2020 (https://2020.stateofjs.com/en-US/), as well as researching dozens of blogs and online resources, we can see that there are 5-7 web development technologies that are leading the industry and have become the preferred choices for frontend developers.
The following are the most used frameworks:
- Vue.js (https://vuejs.org/)
- ReactJS (https://reactjs.org/)
- AngularJS (https://angularjs.org/)
- Ember.js (https://guides.emberjs.com/release/tutorial/part-1/)
- Svelte (https://svelte.dev/)
These frameworks are the ones that are used for most web applications; however, with the rise of more modern digital apps, we also see frameworks such as React Native, which is an older technology but very rich and popular for mobile-friendly app development, and Flutter (https://flutter.dev/), which is considered for newly built applications to create a single code base that can run on both mobile and desktop platforms. Since the landscape is so rich and dynamic, we will only focus on the preceding five frameworks. However, it is worth mentioning that other frameworks, such as the following, also received positive feedback from developers across surveys: Preact (https://preactjs.com/), Backbone.js (https://backbonejs.org/), jQuery (https://jquery.com/), Flutter, and Semantic UI (https://semantic-ui.com/).
Figure 5.1 – Leading web development frameworks' logos
Now that we've identified the most commonly used web development frameworks, we are going to dive deeper into each and every one of these frameworks and learn their key strengths and characteristics, as well as how to get started using them.
Guidelines for picking a web development framework
When picking a web development framework, frontend developers must consider the following:
- Features and differentiating abilities of the framework against the user stories at hand
- Rapid development abilities with fewer coding requirements
- Vast community support (open source benefits)
- Simplified debugging
- Learning curve
- Consistent performance
- Reusability of application components
- Built-in security features of the framework
- Misc: Built-in dev tools (DOM snapshots), plugin-friendly, app layout design, support for the TypeScript language, accessibility support
The previously mentioned development frameworks vary by their age, features, community, and suitability for the application types that are being built. It is nice to see how these frameworks have trended throughout the years based on Stack Overflow questions (https://insights.stackoverflow.com/trends?tags=angular%2Creactjs%2Cjquery%2Cvue.js%2Cember.js%2Csvelte).
Figure 5.2 – Stack Overflow trends for JavaScript web development frameworks (source: Stack Overflow)
Let's compare, at a high level, the top web development frameworks and understand some of the pros and cons of each.
ReactJS
ReactJS is an open source framework developed and created by Facebook. With over 179,000 stars on GitHub, 36.500 forks, and 110 branches, it is by far the most adopted web development framework.
Among the main benefits of ReactJS are the use of a virtual DOM for efficient web page loading and server-side rendering, which does most of the page rendering on the server side and contributes to the high performance of the web application. In addition, ReactJS uses JSX, which is a JavaScript extension that looks like an XML file and can be mixed with the JavaScript website code to set up tree structures and other complex blocks within the code by using opening and closing XML tags.
Some sample and very well-known websites that are built using ReactJS are Pinterest, Netflix, and Dropbox.
Many frontend web application developers would agree that ReactJS offers great reusability of components and high-performing applications across high-traffic websites due to its built-in capabilities, being easy to learn and ramp up, its rich dev tools for building and debugging web apps, and the strong community behind the open source framework.
However, while JSX is aimed at helping developers cope with challenging DOM trees, the community argues that it's hard to understand and use this JavaScript syntax extension.
To get started with building a new web application with ReactJS, run this set of commands:
npx create-react-app packt-app
cd packt-app
npm start
The preceding commands will create a basic web application for a developer to start editing and building upon.
Once the preceding commands are executed, the developer will need to edit the App.js file that was created under the new folder (in our case, under packt-app), as well as the index.html and the related JSX files as and if needed.
The following is a basic welcome page for a newly created web application using ReactJS that frontend developers can use as a baseline for their new application:
Figure 5.3 – Sample main website application page built using ReactJS
Virtual DOM
Virtual DOM is a very efficient capability of ReactJS. It is a tree based on JavaScript objects created with ReactJS that mimics the web page DOM tree. Every time a developer changes something in the DOM, ReactJS employs a different algorithm that only refreshes and renders the changed DOM nodes. This contributes to the performance and loading of the DOM, which enhances the end user experience when visiting ReactJS-based websites across desktop and especially mobile devices.
This chapter and book are not aimed at guiding you on how to develop different web applications but rather how to test them. But to understand how to test such apps, it is beneficial to understand how these frameworks are built and how they differ from each other, since the framework of choice impacts the testing activities and framework that will be picked, also because not every test automation framework is suited to test every type of web application. As highlighted in Chapter 4, Matching Personas and Use Cases to Testing Frameworks, Playwright and Puppeteer support the Jest test runner, and Jest is among the frameworks that are suited to test ReactJS applications (https://jestjs.io/docs/tutorial-react), since it gets shipped and installed when you run the preceding ReactJS setup commands.
To use Jest with Playwright, you will need to install the Jest dependency on top of your Playwright and Node.js environment:
npm install -D jest jest-playwright-preset playwright
In addition, you will need to add a file instruction to the jest.config.js so it knows to use the previously installed preset:
module.exports = {
preset: "jest-playwright-preset"
}
To learn more about how to test ReactJS apps using Playwright and Jest, please refer to this great online resource: https://playwright.tech/blog/using-jest-with-playwright. Since Playwright is a rich testing framework that covers more than just functional testing, it is recommended to build the test strategy around a higher-level and broader technology than just Jest.
Like Playwright, Google's Puppeteer framework is also built with support for the Jest test runner. Hence, it can also be used to test ReactJS applications; however, as highlighted in Chapter 4, Matching Personas and Use Cases to Testing Frameworks, Puppeteer is limited to only Chromium browsers and has limited testing abilities, such as unsupported API testing and smaller community support. To get started with setting up a Puppeteer test environment with Jest for ReactJS application testing, you can refer to this nice guide: https://rexben.medium.com/end-to-end-testing-in-react-with-puppeteer-and-jest-6a0b1b8cff6b.
Since Selenium is the most mature and commonly used framework on the market and supports the Jest test runner, it can also be used for the end-to-end (E2E) testing of ReactJS applications. It has JavaScript language binding and can be used to test such apps at scale and in the cloud using vendors such as Perfecto, Sauce Labs, and BrowserStack. Since the Selenium WebDriver technology is React-agnostic, it may be a bit complex to handle element locators, deal with waits, and more.
Lastly, the Cypress framework also offers a modern way to test ReactJS applications through its new component-based testing methodology (https://www.cypress.io/blog/2021/04/06/cypress-component-testing-react/), as well as through standard JavaScript and TypeScript testing specs.
Figure 5.4 – Main testing screen for testing a React web application with Cypress (source: Cypress documentation)
Now that we've introduced the ReactJS web development framework, let's move on to the next leading framework, which is AngularJS.
AngularJS
AngularJS is among the leading frontend web application development frameworks. Originally established by Google in 2016, AngularJS allows developers to use HTML as their template language and then extend it through four different directives: ng-app and ng-init, ng-bind, and ng-model. One of the benefits of the AngularJS framework is that it requires less coding to build a web application through the use of data binding and dependency injection. Based on the main website of AngularJS (https://docs.angularjs.org/guide/introduction), this framework was built with create, read, update, and delete (CRUD) in mind, allowing developers to build efficient websites using a high level of abstraction. With that in mind, the Angular community itself states that complex GUI or gaming websites might not be the sweet spot for AngularJS.
From a community standpoint, AngularJS has over 78,000 stars and 20,500 forks on GitHub, and it is actively maintained by contributors (https://github.com/angular/angular).
Figure 5.5 – Basic AngularJS web application code snippet (source: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro)
As highlighted in the preceding code snippet, the application code is a sample HTML template with added directives, such as ng-bind, which equals name.
Among the key benefits of AngularJS, frontend developers consistently list low coding effort, the reusability of code components, the usage of dependency injection, and HTML extensions using declaratives, as well as the vast community standing behind this technology. In addition, the use of a two-way data binding architecture is considered a huge benefit to AngularJS developers. Two-way data binding enables real-time synchronization between the view and the model of the application. This capability can be quite powerful in cases where a user changes the order within a drop-down menu on the website, as AngularJS will cause the view of the menu on the page to automatically update with no need to manipulate any of the DOM code.
Some of the challenges that come up with AngularJS are dealing with complex websites with dynamic content, such as games websites, as well as coping with large-scale web applications from a code structure perspective.
AngularJS is powerful when building frontend web applications, as well as progressive web apps (PWAs), and it is considered a high-performing web application development framework.
When it comes to testing AngularJS applications, there are multiple test automation framework choices. In the past, Protractor was a great choice; however, over the years, it has become obsolete and the support for it has seized. So, as of the time of writing, frontend web application developers who build AngularJS applications can use the dedicated framework built by the AngularJS team called Karma (http://karma-runner.github.io/latest/index.html). Karma can be used with a test runner such as Mocha or QUnit, or with Jasmine, which is more of a behavior-driven development (BDD) JavaScript test framework.
To install Karma for your AngularJS web application testing, simply run the following commands:
npm install karma karma-chrome-launcher karma-jasmine
npm install karma-cli
Leading frameworks such as Selenium can test AngularJS applications; however, you need to be aware of the asynchronous nature of AngularJS applications and the use of implicit and explicit waits, as well as dedicated libraries such as JavaScriptExecutor, which can help better and more reliably identify web page elements and handle complex testing scenarios.
Cypress is also able to test AngularJS applications (https://github.com/bahmutov/cypress-angular-unit-test) through a dedicated library that is added to the framework.
To add AngularJS testing support to your Cypress framework, run the following command:
npm install -D cypress cypress-angular-unit-test
The next step is to add the preceding dependency to the Cypress index.js file:
require('cypress-angular-unit-test/support');
Lastly, Playwright also has the ability to test AngularJS applications through its built-in APIs (https://stackoverflow.com/questions/69891101/how-to-run-e2e-angular-tests-with-playwright/69891102), as well as Google's Puppeteer, which can be configured within the outdated Protractor configuration file to be used as the test runner (https://stackoverflow.com/questions/51536244/how-to-use-puppeteer-in-an-angular-application).
It is important to note that the top-four leading frameworks featured in this book can cope agnostically with any web application development framework; however, as we see in this case with AngularJS, there are some unique frameworks that were built as part of the development life cycle of these technologies, such as Karma, that should also be heavily considered.
Vue.js
Vue.js (https://vuejs.org/) is definitely one of the most widely adopted technologies by frontend developers. It is a very strong open source framework backed by a large number of contributors, with over 191,000 stars, 30,000 forks, and 72 branches on GitHub (https://github.com/vuejs/vue#readme). The Vue.js framework is designed to enable frontend web application developers to build rich UI websites. With a core, focused library dedicated to the view layer, Vue.js is designed to be flexible in building single- page applications (SPA), full stack applications, and even apps that target both desktop and mobile.
To install Vue.js on your local environment, run the following command:
npm install vue
The preceding installation of Vue.js will install different builds of this framework, including full, runtime-only, full (production), and runtime-only (production). Typically, you would use the full build so you can use both the compiler and the runtime capabilities of the framework.
One of the great capabilities of Vue.js is the DevTools extension (https://devtools.vuejs.org/), which offers advanced debugging abilities of web applications. Developers can add this extension as a plugin to their Chrome or Firefox browsers.
Alternatively, developers can install it as a command- line interface through the following command:
npm install -g @vue/devtools
Once the DevTools extension is installed, frontend developers will find the tool quite powerful for the real-time debugging of their web applications, analyzing the elements of a page, and measuring other aspects of their web application, such as performance and accessibility.
Figure 5.6 – Screenshot of Vue.js DevTools (source: https://github.com/vuejs/devtools)
Frontend web application developers state that Vue.js is powerful due to its extensive and detailed documentation, vast community, contributions to the open source project, simple syntax that allows getting started quickly with the framework, and flexibility from a website design perspective.
Like with AngularJS, Vue.js also employs two-way data binding and supports both modern web application development as well as complex PWAs.
Vue.js is so successful due to its simplicity, flexibility, and advanced DevTools extension, as well as its ability to support most web application types.
The Vue.js community recommends using a mix of tools to test web applications. The community splits the frameworks based on the following testing types:
- Unit testing
- Component testing
- E2E testing
For unit testing, Mocha (https://mochajs.org/) and Jest (https://jestjs.io/) are the recommended frameworks. To cover component testing, the testing framework should ensure that the component under test is mounted to the DOM for assertion purposes. Vue.js offers a built-in component testing library (https://testing-library.com/docs/vue-testing-library/intro/); however, we also learned that Cypress has its own ability to perform component-based testing in Chapter 4, Matching Personas and Use Cases to Testing Frameworks.
To get started with component testing using the built-in Vue.js library, you should install the dedicated testing library using the following command:
npm install –save-dev @testing-library/vue
Lastly, for E2E testing, the Vue.js community recommends the Cypress and Puppeteer frameworks as the most capable ones. For Cypress, there is even a dedicated Vue CLI plugin (https://cli.vuejs.org/core-plugins/e2e-cypress.html#injected-commands).
Ember.js
Ember.js (https://emberjs.com/) is also one of the top JavaScript web development frameworks, founded in 2011. With over 22,000 stars, 4,300 forks, and 45 branches on GitHub (https://github.com/emberjs/ember.js), the framework is very well known and adopted by frontend web developers. Among the key benefits that Ember.js promises developers are stability and security of the code together with most modern JavaScript features (https://guides.emberjs.com/release/upgrading/current-edition/), including autotracking and advanced app configuration capabilities that support feature flags (https://guides.emberjs.com/release/configuring-ember/feature-flags/) and environment type settings (test, production, and so on).
Ember.js Autotracking
One of the features of the Ember.js framework is autotracking. It is defined as a reactive model that automatically decides which elements of the web application need to be rerendered and when. As an example, when there is a component within the website that might change, a developer will mark it as @tracked, and when there is a change to that element (for example, to the language), the website will autorender only the impacted areas of the page (for example, the relevant text in the relevant language).
Obviously, such advanced capabilities as autotracking should be properly tested using unit tests and so on to ensure that the autorendering works as expected.
Some very well-known websites are built on top of Ember.js, including LinkedIn, Netflix, and Microsoft.
Among the most loved features that Ember.js has are the speed and performance that the framework provides, the two-way data binding features, which was also listed as an advantage of some of the preceding frameworks (such as AngularJS), solid documentation, and the previously highlighted features: autotracking and zero-config for apps.
Compared to the other frameworks, the community behind Ember.js is relatively small and there is a steep learning curve.
The Ember.js community recommends testing web applications through three types of testing methods:
- Unit tests
- Rendering (integration) tests
- Application (acceptance) tests
For unit tests, the community refers to QUnit (https://qunitjs.com/) and Mocha as recommended tools, as well as the built-in Ember.js CLI tools (https://cli.emberjs.com/release/advanced-use/blueprints/). To create rendering tests, which can also be considered component tests, you can use the preceding CLI tools to create such testing scenarios. A great guide to get started with the preceding testing types for an Ember.js application is available here: https://medium.com/@sarbbottam/the-ember-js-testing-guide-i-made-for-myself-c9a073a0c718.
Figure 5.7 – Sample rendering testing-type code snippet for Ember.js (source: https://guides.emberjs.com/release/testing/test-types/)
Based on community discussions, while leading frameworks, such as Selenium, Cypress, Playwright, and Puppeteer, can automate any type of web application, Ember.js apps can be quite challenging to test using them. A set of recent posts on Stack Overflow shows some of the challenges in dealing with dynamic objects generated within Ember.js apps across Selenium and Cypress:
https://stackoverflow.com/questions/53422339/ember-cypress-integration-test-failing-likely-due-to-lack-of-store-context
Svelte
Svelte (https://svelte.dev/) is considered a transformational web development framework.
To quote the home page of the Svelte framework:
With over 53,600 stars on GitHub (https://github.com/sveltejs/svelte#README), Svelte is becoming very well known and adopted by the frontend developer community. The framework was downloaded ~250,00 times over the second half of 2021 (https://www.npmtrends.com/svelte).
Figure 5.8 – Download and community trends for the Svelte framework (source: npmtrends https://insights.stackoverflow.com/trends?tags=angular%2Creactjs%2Cjquery%2Cvue.js%2Cember.js%2Csvelte)
To get started with building websites using Svelte, please use the following commands:
npx degit sveltejs/template my-first-project
cd my-first-project
npm install
npm run dev
Svelte also provides a quick ramp-up for building a web application online from their main website.
Among the core benefits of the Svelte framework, frontend developers list the better reactivity of web apps, faster performance compared to AngularJS and React apps, and it being more lightweight than others. Among the disadvantages, developers list the community size, which is relatively small, and the lack of tooling and support for the framework. Websites such as eBay and Pixar are built using Svelte technology.
From a testing perspective, since Svelte considers itself a compiler rather than a library (https://svelte.dev/faq), it has different approaches to testing. Svelte comes with its own testing library (https://svelte-recipes.netlify.app/testing/), as well as Jest, like other app types covered previously.
To use the integrated testing library, you will need to install the dedicated component through this command:
npm install @testing-library/svelte --D
To get started with the library, you can refer to this basic tutorial: https://timdeschryver.dev/blog/how-to-test-svelte-components#writing-a-test.
The community recommends Cypress as the leading test framework for apps built on top of Svelte (https://www.thisdot.co/blog/svelte-component-testing-with-cypress-vite) and states that a test engineer would need to create a testing bundle for each component of the web application prior to testing it using Playwright, Puppeteer, Selenium (https://medium.com/@oyetoketoby80/automating-your-front-end-application-testing-with-selenium-8e9d51f0f73c), and Cypress.
Summary
In this chapter, we looked into the leading and most used web development frameworks. We provided a high-level overview of their main features, information to get started, as well as pros and cons of each.
We specifically looked at, for each of the web development frameworks, some of the testing tools that cover a wide range of testing types.
What is important to take away from this chapter is that while the variety of web development frameworks is rich, there are material differences in the development workflow and the core features and abilities of each web framework, and these differences have implications on the testing tools that should and can be used.
We have learned some core terms that are common across the different web development frameworks, including virtual DOM and two-way data binding.
That concludes this chapter!
In the following chapter, which opens part 2 of this book, we will look into the key pillars of building a continuous testing strategy for a web application and how to measure the success of the strategy over time.