A personal review of automated testing tools in the JavaScript world
My “2 cents” of some open source tools that I have used or have been using to ensure quality in software development projects
In this post, I will talk about my experiences with test automation using tools that support JavaScript. In the first part of the post, I will talk about tools for test automation of the graphical user interface or GUI. In the second part of the post, I will talk about tools for integration test automation or API testing. In the third part of the post, I will talk about tools for unit testing. And in the last part, I’ll talk about tools for static code analysis.
PART 1 — AUTOMATED TESTS OF GRAPHICAL USER INTERFACE (GUI)
Selenium Webdriver
My experience with the JavaScript version of Selenium Webdriver is quite satisfactory with regards to what is possible to accomplish when using the framework, being a powerful option for GUI tests, meeting the needs of support for multiple browsers such as Chrome, Firefox, Safari, and Internet Explorer.
Other relevant points are the community support; it is an active project on GitHub and the conferences. In 2017 I had the opportunity to participate in the SeleniumConf in Berlin, and besides updating myself, I learned a lot.
Regarding documentation, until recently, it was not the best, but version 4 is coming up with excellent documentation and adhering to the specifications of the W3C WebDriver. To those interested, follows also a related content.
Another advantage of Selenium is the support for the execution of the same test case in different browsers. Great for testing chat and video conferencing applications.
Protractor
Protractor is the GUI test automation tool which I have more experience with. I’ve been working with the framework since 2014, writing content in English here on Medium and in Portuguese on WordPress, sharing videos on YouTube, lecturing at events, mentoring QA practitioners specifically on the subject, maintaining the protractor-helper library, created to help other professionals write more reliable tests using Protractor, writing two books (one in English and another one in Portuguese, both with a collection of lessons learned), keeping projects in the form of codelab and architecture suggestions on GitHub, and teaching at the Talking About Testing School, if I have not forgotten anything 😀
One of the significant advantages of Protractor, when compared to Selenium, is a simpler syntax, where you do the same things with much less code, helping with legibility and maintainability issues.
For developers used to unit testing libraries, such as Jasmine or Mocha, both are supported by the Protractor, the first being the default one.
About the documentation, my favorite part is the API, which is always updated along with the new versions.
Protractor also supports the most used browsers in the market, as well as Selenium.
TypeScript support is another of its advantages.
Finally, it is mainly maintained by the Angular team, which is supported by Google.
Cypress
Cypress is the end-to-end testing tool that I’m currently using (in some personal projects). The points that have caught my attention so far are its excellent documentation, ease of use, it enables testing of REST APIs, developer facilities such as integration with Chrome Dev Tools, debugging, interactive mode, stub support, shell command support, and automatic waits without the need of explicit delays, as well as being a very active project on GitHub.
BackstopJS
BackstopJS is the most straightforward tool I have ever used for screenshot comparison testing, also known as visual regression testing.
I have been using BackstopJS for about a year, and I am delighted. It has excellent documentation, and it’s a relatively active project on GitHub. It supports running tests inside Docker containers and supports the Puppeteer engine.
Two of my “contributions” to BackstopJS users are the backstop-config project (included in the official documentation of the tool) and the course of visual regression testing with BackstopJS (available only in Portuguese).
PART 2 — INTEGRATION TEST AUTOMATION (API TESTING)
jsdom
Jsdom is a library that can be used in combination with other tools that will be discussed here, such as SuperTest and Chai. With jsdom, it is possible to emulate a subset of a web browser to test application servers without the need for a real browser.
An example of what can be done with the jsdom library is to parse the HTML returned by a REST API call and execute something like the querySelector function to return a specific HTML element and then make an assertion that such element has a given value. Such verification may be performed using the Chai library, for example.
SuperTest
SuperTest is used to test HTTP REST calls, allowing you to test GET, POST, PUT, DELETE, and PATCH requests.
Some of the possible tests that can be done with the library are:
- Verify that the response of an HTTP request returns the correct/expected status code;
- Verify that the response of an HTTP request returns the correct location value in its header;
- Combined with tools like jsdom and chai, this can assert things like the number of HTML elements with a specific CSS selector returned after a POST request, for example.
Chai
Chai is a library of assertions for node environments but also for web browsers, so this tool makes it possible to perform checks like those mentioned in the sections on jsdom and SuperTest.
Some examples of assertions that can be performed with the Chai library when used for integration tests are:
- Verify that a particular variable, which was populated with the return of an HTTP request, contains a given string or is equal to a given string;
- Verify that a particular variable, which was populated with the return of an HTTP request, has a certain length;
- Verify that a particular variable, which was populated with the return of an HTTP request, has a specific property.
Cypress
As briefly discussed in the section on automated GUI testing with Cypress, in addition to testing interactions via the graphical user interface, it is also possible to test REST APIs.
Some examples of API testing possible to do with Cypress are:
- Verifying status codes;
- Verifying URL redirects;
- Response body verifications of HTTP requests.
PART 3 — UNIT TEST AUTOMATION
Tape
Tape is the most straightforward unit testing library I’ve ever used. Such a library already comes with its list of assertions, which makes the testing process simplified, where there is no need to import a specific library to do the assertions for the expected results.
Here’s an example project on GitHub where I used the Tape library to practice techniques like TDD, increasing code coverage, refactoring, clean code, and more.
Jasmine
The Jasmine framework enables the practice of behavior-driven development (BDD) at the unit level.
One of the significant advantages of the tool is a simplified syntax, which allows having tests that are easy to write and read.
Mocha
My impression is that the Mocha framework is the most used by JavaScript developers when talking about unit testing.
This tool enables asynchronous testing, in both node and browser environments, in a simple way.
Some of its many features include:
- Support for asynchronous tests, including promises;
- Running a single test using .only(), or skipping a single test using .skip();
- Code coverage report.
Node.js Assert
Node.js assert is a Node.js module for assertions in unit tests.
Its most significant advantage is that it is already installed together with Node.js, requiring no extra installation.
Chai
As already discussed in the section on integration testing, Chai is a library of assertions for node environments but also for web browsers.
Apart from what has already been mentioned, with the Chai library, it is possible to make assertions in the style of BDD or TDD, besides supporting the use of plugins, to extend its functionalities.
Enzyme
Enzyme is a unit testing utility launched by Airbnb to perform assertions on React components.
An example of testing that can be performed with such a tool is to superficially render a React component (shallow render) and check the number of elements with a specific CSS selector that are returned.
Here is an example project on GitHub where I used Enzyme for simple testing of React components.
Jest
Jest is a testing framework launched by Facebook, wherein the React community is primarily used for snapshot tests but can also be used for tests that require the use of test doubles, such as mocks.
Some of its advantages are:
- Because it is a complete framework, it does not require the installation of other libraries. With Jest, you write tests and assertions, execute them, and then visualize the test execution report;
- It already comes with support for code coverage reports without the need to install other specific libraries for this;
- It does not require configuration to start using it.
In the same example project on GitHub of the Enzyme testing section, I also used the Jest framework for snapshot testing.
Istanbul
Istanbul is NOT a unit testing tool but a tool for extracting code coverage metrics from unit tests.
Its primary purpose is to clearly state which parts of an application’s code are or are not exercised by tests, making it possible to identify areas of risk and potential areas for improvement.
In the same example project in the Tape section, I used Istanbul to extract code coverage metrics.
PART 4 — TOOLS FOR STATIC CODE ANALYSIS
StandardJS
StandardJS is the simplest option I know for static JavaScript code analysis, helping with code formatting and linting and making it possible to follow the same style guide throughout a project code without the need for any configuration.
ESLint
ESLint is a code linting library that enables a development team to define their style guide and ensure that such a guide is followed.
One of the features I like very much in ESLint is the auto-fix, which automatically corrects some simple rules, such as the number of spaces in tabs, single or double quotes, lack of semicolons at the end of statements, etc.
That’s it for today.
And you, which tools are you using for test automation at different application levels and for static code analysis? Leave a comment.
Did you like what you read? Help me by sharing this content on your social networks. I’ll appreciate it!
Until next time, and good tests! ✅ 👋
This blog post was originally published in Portuguese on WordPress, and it can be seen here.
