logo logo

Top Essential JavaScript Testing Frameworks

main post image

Without a doubt, automation testing has in recent years grown to become an industry of its own in the software development world. High demand for new platforms, tools and frameworks is driving progress in the field. Nowadays marketing or pricing are becoming secondary issues for software companies, as with clients becoming more educated and projects more budget sensitive – the real competition is in the qualityWith web technologies constantly developing and improving, and being used for building applications across all industries, both in B2B or B2C landscapes, the need for reliable and effective JavaScript testing tools has been on the rise.

I guess some tools are more worth a mention than the others, whether because they’re more popular, easier to use or simply cheaper… So let’s take a look at a few of the JavaScript testing community’s favorites in 2020. 

Top 9 Essential JavaScript Testing Frameworks

  1. Selenium WebDriver
  2. Puppeteer
  3. Cypress
  4. Mocha
  5. Jest
  6. Protractor
  7. Jasmine
  8. Karma
  9. Nightwatch
  10. Summary

Selenium Webdriver

It would be hard to find a more popular web application testing framework than Selenium. Without the need to set up a server to perform tests (a significant upgrade from Selenium 1) the framework is easy to work with, as it opens a browser instance and controls it directly.

Selenium (2.0) has been operating since 2009, and in 2020 is still more than relevant and useful (And let’s not forget about Selenium 4 Alpha with a bunch of new features and capabilities!). One of Selenium’s strongest advantages is the fact of it being open source and working across all main browsers (Mozilla, Chrome, Headless, IE and more). This makes it the first choice for engineers starting their adventure both with test automation and web testing. 

Although JavaScript is the preferred language for writing tests in Selenium, the framework is much more versatile, allowing for scripts written in Perl, Python, Java, C#, PHP, Ruby, or Groovy.

Open source from the start – Selenium has to date gathered a huge community that keeps growing and constantly delivering new solutions. Community development has its obvious disadvantages, but nothing a bit of patience (waiting for your query to be community solved) or hard work (finding third party plugins and creating custom libraries) won’t fix. 

Perhaps the most inconvenient thing for Selenium is its scalability issue, but no worries there – if you need to run parallel tests, you’ve always got the Selenium Grid to work with. Here again, a bit of elbow grease will get you sorted out just fine. 

📍 For some best practice on Selenium JavaScript testing, checkout the following in-depth tutorials:

Puppeteer

Puppeteer is a Google supported and sponsored project. It will come as no surprise this one is also Chrome-based. For now, you can only work with Google’s flagship and Chromium, but Firefox is well into implementing Puppeteer, so it shouldn’t be long before you can work with Mozilla’s browser as well.

The first advantage of Puppeteer is its Google connection – the search engine giant provides thorough support and documentation. The framework has been also gaining in popularity and growing a community smaller than other frameworks, but still considerable. 

The installation of Puppeteer is quite seamless and the tool comes bundled with a fully compatible version of Chrome. 

Puppeteer allows better control over the browser, owing to Chrome Performance Analysis tool, which closely monitors loading and rendering times. Test scripts must be written in JavaScript with node.js installed, but single language support is more than sufficient for most of your web testing needs. 

Google’s API for Chrome/Puppeteer interactions is quite intuitive, making the execution of tests a breeze, compared to many other frameworks. Although by default Puppeteer runs in headless mode, you can reset this if you want to monitor the execution live in non-headless. 

All in all, Puppeteer is a very good and promising tool, with good reviews and most importantly – owned by Google, which ensures great support and future development. 

📍 More on the differences between Puppeteer and Selenium can be found here: Selenium vs. Puppeteer – When to Choose What?

Cypress.io

Next one up in cross-browser testing tools is Cypress.io. Many developers will tell you this end-to-end testing framework beats Selenium hands down, but I don’t see the Selenium community getting any smaller. Besides you’d expect that from a tool you need to fork out some money on, that is if you want a decent amount of test recordings and email support. 

📍 Here’s an interesting benchmark article you might find interesting to this topic: Cypress vs. Selenium vs. TestProject – 7 Browsers Speed Benchmark

Cypress.io works with Chrome family browsers and supports JavaScript tests, which will be a bit of a put off for anyone who fancies writing tests in good old Java or C#. But then again, why would you? Just stick to JavaScript (ok, and TypeScript) and you’re right as rain. 

What makes Cypress so good then, you ask? The main thing is, it executes in the browser, on the device. No waiting for the network to catch up. 

Generally, the main advantages of Cypress have to do with time savings, and in software, development time is most certainly money, so it is definitely a tool you will want to consider. With Cypress you save time pretty much every step of the way. For starters – it comes with Chrome browser bundled, so no tedious environment setup. Another thing is the documentation – very good and thorough, again much quicker to learn than from scattered community resources. 

Back to testing itself, in Cypress you use assertions to define the desired state of the application and it automatically waits for that state before continuing. No setting up waits in the script anymore (like you would in Selenium). Cypress automatically waits for DOM elements to appear and only then executes. 

Generally, Cypress is your choice when you’re pressed for time, and don’t mind paying a bit extra or being restricted to Chromium-based browsers. 

Mocha

Here’s another node.js based JavaScript testing framework. Mocha has been appreciated by the testing community and is in operation since 2012, making it a mature and proven tool. 

Its feature rich palette enables eg. easier than in most tools asynchronous testing, with a clear and simple API. A little example of making things easier – Mocha identifies the fact of “done” function not being called, accompanied by no pending async tasks, as a synchronous test. A set of added syntactic features also makes the framework more open to running a wider variety of scenarios. 

Mocha is open source, which may be an issue to those trying to find quick solutions to uncommon issues, but on the upside offers one of the most controllable test environments out there. Tweaking it up with a few right plugins for assertions (chai seems a good pick – not just for the hot drink name familiarity), and mocks and spies (here sinon seems the weapon of choice by popular vote) will make Mocha grow on you instantly. 

📍 And if you’re looking to integrate Mocha with your Selenium tests, you should checkout this step-by-step tutorial: Javascript Testing with Selenium Webdriver and Mocha.

Jest

Now if you’re in the cross platform development business then you’re no stranger to Facebook’s React Native. The social media giant also fathered a testing framework to complement their app builder. Jest has been marketed promising “delightful JavaScript testing” and according to many it delivers on that promise in several ways. 

Super easy to set up by simply installing into an empty directory, made even simpler for your react-create-app projects, where the Jest package is already bundled in, so you can start testing straight away. 

Next comes the testing speed. Parallelization, caching babel transforms and prioritizing slowest tests, Jest optimizes the CPU usage to the max. It’s complete with matchers and spies, but what makes it really stand out is Jest’s extensive mocking library. Replacing dependencies with mock functions is perfect for speeding up your tests and retaining better control over parallelization. Aside from timer mocks, ES6 class mocks, you can even place your own whole mock modules (instead of just functions) in the mocks subdirectory and test interchangeably with the actual module. 

Jest also supports TypeScript with its ts-jest package, and lastly – enables test coverage reports where you can generate data on how much of certain parts of the system were tested. Jest is well worth considering, especially for all your React, React Native app testing. 

📍 Interested to learn more about React Native app testing? A couple months ago I did a comparison piece you might find interesting about the Top 5 Cross Platform Mobile Development Frameworks.

Protractor

In the world of end-to-end testing of Angular apps, Protractor is pretty well known and appreciated, but aside from Angular it can also be used for regression tests of other-than-Angular web apps. 

Protractor executes tests in the browser, thus mimicking actual user behavior and providing a more real-life test cases, while still automated. Protractor might be a bit of a pain to set up and configure as it’s a Node app, but that is also its biggest advantage, as it gives you access to huge variety of Node’s packages. The framework also offers automatic waiting, so you don’t need to add sleeps or waits to your tests. Protractor deals with it for you by executing steps as soon as a page’s pending task is finished, thus speeding up the tests. 

The obvious positive of Protractor is E2E testing, letting you check the workings of your web apps in the most “lifelike” environment. The framework is often referred to as essential for Angular apps. This is not without merit as compared to other libraries and tools, Protractor offers exceptional speeds, connects with Angular.js framework, with built in support for a number of Angular’s elements, and allowing for parallel testing in several browsers. 

📍 First React, now Angular – Is there one better than the other? You might find this “battle” of the frameworks interesting: Angular vs. React: Which One to Choose?

Jasmine

In Behavior Driven Development (BDD) approach to web, Node.js projects or pretty much all other JavaScript environments, Jasmine is the one tool everyone is familiar with. 

Jasmine is open source, and due to its versatility and good set of features, gathered a significant community around itself. You can use the framework either in a standalone mode where it adds all the required directories and files to your project folder, or with a test runner (like Karma – see below). In the first case, you will be able to run tests and view results in the browser, while in the second, you will need Istanbul to generate reports. 

If you’re after testing Jquery frontend code, Jasmine’s node extension package will come in handy with a set of matchers for the Jq framework and HTML, CSS, and JSON API handler. 

Angular’s official documentation suggests Jasmine for testing, and rightly so, as it’s easy to both use and integrate for Angular developers. Although Jest is catching up on popularity and community growth, Jasmine still holds the upper hand, being more seasoned, trusted and actually the main inspiration for Jest’s creators.

Karma

Now here’s one testing tool that doesn’t really belong in the “framework” category. To utilize Karma‘s potential, you will still need a proper testing framework – eg. the above described Jasmine. Karma is an HTTP server launcher for your HTML test runner file. The tool does have it’s value in increasing the reliability of your testing strategy, as it runs tests on actual devices and browsers. This comes useful when you want to make sure your app will behave consistently for all users regardless of the differences in the DOM implementations in different browsers. Testing across a variety of physical devices – phones, tablets, also comes in handy in ensuring consistency. Karma is thus used to ensure your app works the same way on a variety of browsers and devices.

📍 This piece will introduce you to a combination that will make your JavaScript unit testing so much easier: JavaScript Unit Testing with TDD, Jasmine and Karma.

Nightwatch

Another end to end testing framework to consider for your browser-based web apps is the node.js powered Nightwatch. Although it receives mixed reviews, it’s worth mentioning for a few reasons. First of all – it offers clear and powerful syntax enabling quick and effortless writing of tests. You can also set up page objects quickly and consistently, with the framework discovering the declared objects in the directory. Nightwatch separates the HTML selectors from page objects with its own layer of abstraction, making your testing grounds more tidy and organized.

There’s actually not much more to say about the framework, although continuous integration with Jenkins, Hudson and TeamCity as well as working with some Cloud testing providers might sway the scale in its favor for some. Conversely, lack of TypeScript support might be one on the negative side when looking for a comprehensive testing tool.

Summary

There’s an abundance of JavaScript testing frameworks, tools and libraries and very often the final choice (if it’s ever really final) depends largely on personal preference, your level of scripting proficiency, budget, time, etc. (Here’s an interesting piece to help you in making a decision of selecting the right tool for you). It could also be a choice that will be made by the whole testing team. If you’re starting your adventure with web testing or/and automation, or looking for a new tool to work with, then I hope the above rundown will help point you in the right direction ✅🚀

Pawel Czerniewski

About the author

Pawel Czerniewski

I am thoroughly interested in all the latest in technological innovation and software development. Particularly into mHealth and Transport & Logistics, I focus on how mobile is transforming and innovating these industries globally and locally. I focus on agile methodologies and the implementation of agile frameworks. I am a strong advocate for modern, self-organizing work systems where equality, transparency, mutual respect and empathy are the main drivers of enterprises’ success.

Join TestProject Community

Get full access to the world's first cloud-based, open source friendly testing community. Enjoy TestProject's end-to-end test automation Platform, Forum, Blog and Docs - All for FREE.

Join Us Now  

Leave a Reply

popup image

Selenium for Teams

Sharing and distributing Selenium tests has never been so easy! With TestProject's FREE Selenium based platform, you can finally create awesome tests with the freedom to collaborate with your team effortlessly.
Sign Up Now right arrow
FacebookLinkedInTwitterEmail
Skip to toolbar