What are front-end tests? Why are they important? How do you make the most of them? We’ll answer those and more questions in this post.
We’ll start by defining front-end testing. Then, we’ll talk about the main reasons to use it and describe some types of front-end tests. After that, we wrap-up with tips on how to write the best possible front-end tests.
What Is Front-End Testing?
As promised, we start with the basics. After all, you can’t write great front-end tests without first learning what front-end tests are.
As their name suggests, front-end tests are tests that target the frontend (aka the client-side section, or interface) of web applications.
The Importance of Automation in Software Testing
Front-end tests come in several different types, as we’ll soon see. Many of the tests can be performed manually. However, here at the Testim blog, we’re strong believers in automated testing. Sure, manual testing still has its place. An efficient testing strategy will have a balance between manual and automated testing.
However, a testing strategy that relies mostly—or worse, entirely—on manual tests is a liability. Such a testing approach is an impediment to delivering software at the speed that the modern world requires. Why is that so?
It all boils down to this thing we called regression. Due to the nature of software itself, any small change could create problems in other areas of your code. To know for sure that your application is in a good state, you’d have to completely and thoroughly test it after even the most insignificant of changes. Doing this manually would be impractical, if not downright impossible. So, that’s why automated testing is a must for modern software organizations: it’s the only way to have confidence in the code you release while still being able to ship it in a timely manner.
Frontend vs. Backend
We’ve briefly explained what the term frontend means. How does the frontend differ from the backend? And how do their differences affect the kind of tests performed in each context? That’s what we’ll see now.
As mentioned earlier, the frontend of an application refers to its client-side portion. In other words, the frontend is what users see and interact with. It’s also the part of the application that’s analyzed and run by a browser. The frontend is the realm of professionals who work with HTML, CSS, and JavaScript (both vanilla and other frameworks). Usability and accessibility professionals also work with the frontend, as do designers and user experience (UX) professionals.
The backend, on the other hand, refers to the server-side portion of an application. Database professionals and developers who work with languages such as Java, Python, or C# are examples of back-end professionals.
How does testing differ between the frontend versus the backend? In short, back-end testing verifies that functionalities written in server-side languages are implemented correctly. Also, back-end testing verifies that queries are correctly run against the database.
However, back-end testing doesn’t concern itself with anything related to the user interface. Back-end testing doesn’t test anything the end-user can see or touch. That’s the realm of front-end testing.
The Importance of Front-End Tests for Web Applications
What are the motivations behind front-end testing? Why is this type of testing so crucial for web applications?
Modern web interfaces are becoming increasingly complex—they keep getting richer, offering more functionality and interaction possibilities than ever before, thanks in great part to JavaScript, the language of the web.
In other words: there is a lot happening on the client-side in modern applications. Thus, there’s a lot that could go wrong, which warrants a lot of testing, especially automated testing.
Front-End Tests: A Few Examples
What do front-end tests do, in practice? Well, it depends on the type of testing. We’ll now briefly describe some of the most important types of front-end testing.
Unit Testing
Unit tests consist of code-based tests that show examples of inputs and outputs for a given function. Front-end unit testing can assume a multitude of forms. You can test code written with Angular or other frameworks. Or you can just test vanilla JavaScript code. You’d use one of the many testing frameworks available, such as Mocha, Jest, or Jasmine.
But, regardless of testing tool or development technique, the essence of unit testing remains the same: testing that a given unit (e.g., a function) works as intended by the coder, when in complete isolation, both from other units and from external concerns such as the file system, a database, or the network.
Integration Testing
Integration testing is similar to unit testing in the sense that it’s also a form of testing based on examples. In practice, the two types of testing might use the same tools and look so similar that they are indistinguishable.
The difference lies in how they behave when it comes to external dependencies. As we’ve mentioned, unit tests can’t interact with external dependencies. Instead, you’d usually use mocking as a placeholder for those dependencies.
Integration testing, on the other hand, uses the real dependencies, such as the real file system or network. This makes integration tests harder to set up and slower to run. But on the other hand, they can detect problems that unit tests can’t because they represent scenarios that more closely resemble real usage.
UI Testing
UI testing refers to, quite unsurprisingly, testing the user interface of an application. That’s harder than it sounds though. Listed below are just a few of the checks that might be necessary during UI testing.
- Required fields: Verify whether required fields have validation to prevent users from leaving them empty.
- Data: Verify that data is properly validated (e.g., prevent letter entries when only numbers should be allowed.)
- Spelling: Check for spelling errors in the interface.
- Interaction: Verify that buttons and other interactive elements of the interface work as intended.
Browser Compatibility Testing
Browser compatibility testing, or cross-browser testing, verifies whether an application’s frontend behaves correctly in all of the major web browsers.
Why is this important? Well, long gone are the days when Internet Explorer reigned supreme as the dominant browser. Nowadays, we have a huge variety of browsers across an equally huge variety of devices. Even though several of the major browsers are based-off the same project and thus share the same underlying engine, it’s the developers’ responsibility to ensure the application runs smoothly across the majority of existing browsers, and not just the most popular ones.
End-to-End Testing
End-to-end testing (aka E2E testing) is a form of testing that people often mix up with UI testing. Even though there are similarities, the goals of each couldn’t be more different.
As we’ve already explained, UI testing refers to verifying that the user interface of an application works correctly. Such verifications will inevitably touch upon a little bit of domain logic, such as validating an email address or a phone number. But for the most part, UI testing’s primary goal is to ensure that the application looks and behaves as expected when it comes to its interactive elements.
End-to-end testing, on the other hand, is supposed to test the entire application, from the UI (one end) to the database (the other end.) E2E testing is one of the most important forms of testing because it’s the one the gets closest to the actual experience of an application’s end-users.
Tips to Create Better Front-End Tests
Before closing the post, we share a few tips on how to write great front-end tests.
Start at the Top of the Test Pyramid
You might be familiar with the concept of the test pyramid, which is a way to categorize and prioritize the different types of automated tests that exist, by employing a large number of unit tests, a smaller number of integration tests, and an even smaller number of UI tests. The idea is that the higher you go on the pyramid, the harder and more expensive it is to set up your tests. For front-end testing, people sometimes adapt the pyramid by replacing UI testing with E2E testing.
The advice here is simple. Since you likely have scarce resources when it comes to implementing a testing strategy, you want to get the most out of it by obtaining the most valuable feedback you can get, the sooner you can get it. That’s why we recommend starting your testing strategy with end-to-end testing; that’s the form of testing that gives you feedback that most closely resembles the experience of a real user.
Leverage Tools to Make Your End-to-End Testing More Efficient
As already mentioned, end-to-end testing is one of the most valuable kinds of testing since it provides realistic feedback. E2E tests, besides having the reputation of being hard to set up, are often brittle, leading to high test maintenance. The maintenance issue arises because small changes to code can often break tests E2E tests. This causes lots of effort by teams to identify the root cause of the problem, figure out if it’s a test or code issue, and if it’s related to the test, fix the test and rerun it. At some organizations, the maintenance of existing tests can take up to 40% of the team’s time, thus limiting the amount of time available to write new tests and improve test coverage.
Some solutions can make your E2E testing process more efficient. Testim makes use of machine learning to allow you to create reliable end-to-end tests, both via recording and coding. It helps find web application elements even when some of their attributes change so the test doesn’t fail.
Isolate the frontend from the backend
Another technique that can be used to identify frontend code issues is to isolate the end-to-end test to the frontend. This technique is called mocking network responses. Typically in an end-to-end test the user interaction on the frontend triggers an interaction with the server on the backend. The input must travel over the network, engage with the server, and deliver that response back through the network to the frontend. Failures can result from latency, environment issues, or inactive services, that are outside of the frontend code. Yet, they cause a test failure that needs to be analyzed, fixed, and rerun.
Network mocking allows the team to test the frontend regardless of what is happening on the backend. This is not a replacement for live, end-to-end tests, but is often a great way to test the functionality of new features against a state of the application that is known to work properly.
Conclusion
We live in a golden era of web applications that leverage JavaScript—both in vanilla form and in its frameworks—to create feature-rich user interfaces. The client-side, or frontend, of applications, is more dynamic than ever before. And since the frontend is what the end-user sees and interacts with, it’s crucial to get it right. Offering a poor frontend is a sure way to transform your customers into former customers.
Leverage automation and modern tools and create a front-end testing strategy starts with unit tests, adds integration tests, and also includes automated, AI-stabilized end-to-end tests. This approach will allow you to verify quality at multiple levels and ship high-quality software faster.
