User Interface Testing Tools

Existing tools for testing user interfaces are very different from each other, so before you choose what you will test your interfaces, we recommend experimenting. If you briefly express the general recommendations for those who choose the environment for testing user interfaces, we can say the following:

  • If you are looking for a simple and reliable universal tool, or some starting point in the search for a suitable framework – try TestCafe.
  • If you want to keep up with the times and enjoy the support of the developer community – take a look at WebdriverIO.
  • If you are not interested in cross-browser support, use Puppeteer.
  • If your application does not have confusing user interaction scripts and complex interfaces, such as pages, full forms and navigation elements, use cross-browser tools without a user interface like Casper.

 

▍Selenium

Selenium allows you to automate the interaction with the browser, simulating user actions. This framework is not specifically designed for tests, it can control the browser for various purposes, providing a server that simulates user behavior in the browser using software mechanisms.

The capabilities of Selenium can be controlled in various ways using many programming languages, and the use of some tools allows you to work with Selenium without any programming.

We are, however, interested in the configuration in which the Selenium server is managed using Selenium WebDriver , which serves as a layer of interaction between Node.js and the server that controls the browser. 

By the way, the WebDriver itself may be quite enough to run the tests. There are recommendations , the authors of which advise using WebDriver in its original form.

However, one can not ignore the fact that there are libraries that extend the capabilities of WebDriver, represented either by its forks or wrappers for it.

The drawbacks of the wrapper libraries are that they complicate the system. The appearance of forks is bad, that the efforts spent on them could well be invested in the development of the WebDriver itself.

However, if we talk about Selenium, many people prefer not to use it directly. Take a look at some libraries that use the features of Selenium.

Appium

Appium provides an API similar to the Selenium API. This framework is designed to organize testing of mobile projects using the following tools:

So, if you use tools based on Selenium, you can use Appium to test mobile projects.

Protractor

Protractor is a wrapper library for Selenium that focuses on Angular. Here are the main features of this library:

  • Angular support. Protractor is focused on Angular, although this library can be successfully used with other JS frameworks. Official Angular documentation recommends this particular library.
  • Bug reports. There is a convenient mechanism for creating reports.
  • Community and technology. TypeScript support is available in Protractor. The development of the library is engaged in a huge team of Angular.

 

WebdriverIO

WebdriverIO offers its own approach to using the functionality of Selenium WebDriver. This library is for Node.js. Among the features of this project are the following:

  • Syntax. WebDriverIO has very simple and readable syntaxes.
  • Flexibility. WebDriverIO is a flexible and extensible library.
  • Community. The library has a good support and enthusiastic community of developers, which has created plug-ins and extensions to increase the use of WebDriverIO.

 

Nightwatch

Nightwatch also has a different approach to working with Selenium WebDriver.This tool provides its own testing framework, which has a server, assertion tools, and various supporting tools. Here are the main features of Nightwatch:

  • Framework Nightwatch can be used with other frameworks, as well as a standalone tool, which can be especially useful if you plan to perform functional tests with its means, without using other technologies.
  • Syntax. Nightwatch has a very simple and readable syntax.
  • Support and technology. There is no support for TypeScript. It should be noted that there is a feeling that this library enjoys somewhat less support than others.

 

▍TestCafe

TestCafe is a great alternative to tools based on Selenium. The code of this library was opened at the end of 2016. It should be noted that there is still a paid version of TestCafe, which offers testing tools that do not require programming. For example, these are tools for recording tests. Within the paid version is offered and user support. It should be noted that there are many outdated publications that came out before the opening of the library code and consider the closed code to be its shortcoming.

TestCafe is embedded in the pages in the form of a JS-script, it does not control the browser, as Selenium does. This allows TestCafe to run in any browsers, including mobile, and have full control over what happens in JavaScript.

The TestCafe library is written in JavaScript and focused on testing. It is currently developing rapidly, although it is already considered stable and having a sufficient number of possibilities. Consider its main features:

  • Quick setup of the working environment. Perhaps we can say that the special configuration of the working environment for the use of TestCafe is not required. It is enough to open any browser and start testing.
  • Support for various browsers, support for test automation platforms. TestCafe supports many browsers and devices and can be used on SourceLabs or BrowserStack platforms , which give access to various devices and browsers. In particular, we are talking about running tests in Chrome and Firefox without a user interface, which we will discuss later.
  • Parallel testing. TestCafe can run tests in multiple instances of the browser at the same time. Such an approach can significantly reduce the testing time.
  • Bug reports. TestCafe contains convenient tools for generating error reports.
  • Ecosystem. TestCafe uses its own test structure . This can be very convenient, especially considering that user interface tests are usually performed separately from other tests, but not everyone likes this.

▍Cypress

Cypress is a direct competitor to TestCafe. This framework works in almost the same way by incorporating tests into the code of the pages, but it tries to do it in a more modern, flexible and convenient way. Cypress is newer, this framework has recently moved from the stage of closed beta version to the public beta version (in October 2017), but many already use it. Here are the main features of Cypress:

  • No cross browser support. Currently only Chrome is supported (and is not a version without a user interface). Development in the direction of cross-browser support is underway .
  • Lack of advanced testing capabilities. Here, in comparison with TestCafe, there are not enough opportunities for parallel testing and some additional tools, but the appearance of all this is in the plans of developers.
  • Documentation. Cypress has a well written and understandable documentation.
  • Debugging Tools There are convenient tools for debugging and logging.
  • Use Mocha. Mocha is used as a source of test structure. This, for those who are used to Mocha, means being able to build user interface tests in the same way as other tests.

▍Puppeteer

Puppeteer is a library for Node.js developed by Google. It provides a convenient Node.js API for managing Chrome browser without a user interface .

Such a browser is the usual Chrome v59 +, which runs with a flag --headless. When the browser runs in this mode, it provides an API for managing it, and Puppeteer is, as already mentioned, a JS tool created by Google to control the browser.

It is worth saying that the Firefox browser also, at the end of 2017, was released with support for working in the user-free mode.

Note that various testing tools can use Chrome and Firefox without a user interface. For example, this is TestCafe and Karma.

Among the main features of Puppeteer are the following:

  • Community. Puppeteer is a relatively new tool, but a large community has already formed around it, which is developing additional tools for working with it.
  • Performance. Puppeteer has a high performance, it uses the latest version of the Chrome engine, which distinguishes it, for example, from PhantomJS, which is built on the older fork of the WebKit.
  • Lack of support for extensions. The main disadvantage of Chrome without a user interface (and, accordingly, the disadvantage of Puppeteer) is that it does not support extensions like Flash. Perhaps such support will not appear in the near future.

 

▍PhantomJS

PhantomJS uses the Chromium engine to create a managed browser without a user interface similar to Chrome.

Since the advent of Puppeteer, the creator of PhantomJS, Vitaly Slobodin, has stopped working on it, as a result, all processes in the PhantomJS sphere have slowed down since mid-2017, although there is still some movement there.

In what situations can PhantomJS be preferred if the Puppeteer exists? Consider some of them:

  1. The project is much more mature, there are many guides on it, many excellent tools have been written for it.
  2. PhantomJS is used by many useful tools like CasperJS. Using these tools, you will have to use PhantomJS.
  3. PhantomJS does not use the newest version of WebKit, which allows it to mimic the behavior of older versions of Chrome browsers.
  4. PhantomJS supports extensions like Flash, but Chrome without a user interface does not.

 

▍Nightmare

Nightmare is an excellent library for testing the user interface, which has a very simple syntax of tests.

Nightmare uses Electron , which makes it look like PhantomJS, however, a newer version of Chromium is used here and the library is actively maintained and developed. This is facilitated by the fact that the main goal of the Electron project, which is also developing dynamically, is to create cross-platform desktop applications based on JavaScript, HTML and CSS.

In addition, discussions are underway and experiments are being conducted aimed at using in Nightmare Chrome without a user interface. Take a look at the code of tests on Nightmare in comparison with the code on PhantomJS.

▍Casper

Casper is a tool based on PhantomJS and SlimerJS (it’s the same as Phantom, but it uses Firefox Gecko). Casper allows you to simulate user interaction with web pages, allows you to write scripts and test mechanisms in an abstract form, supports asynchronous features when creating scripts for Phantom and Slimer.

The Slimer library was widely distributed, although it was considered experimental. At the end of 2017, its beta version, 1.0.0-beta.1, was released, which uses the new Firefox without a user interface . Currently, work is underway to eliminate minor flaws and the release of the first release of Slimer.

Perhaps in the near future, with the release of the second release, Casper will switch from PhantomJS to Puppeteer and become an excellent testing tool for Chrome and Firefox. We believe this project is worth watching.

▍CodeceptJS

CodeceptJS , like the CucumberJS discussed above, provides an additional level of abstraction over various library APIs. All this is aimed at ensuring that the developer interacts with tests based on user behavior scenarios.

Here are some libraries that may be involved in the execution of this code: WebDriverIO, Protractor, Nightmare, Appium, Puppeteer. We already spoke about them.

If it seems to you that the syntax presented above meets your needs, we recommend trying out CodeceptJS.