Setting up a WEB system - testing based on headless chromium-browser, chromedriver, nightwatch and node.js on Ubuntu

Foreword

Hi, Habr! I had this problem with the problem, which was to create a robot for Instagram authorization that would make likes for me. I will not write the whole task, I will write only a part of the implementation in the form of setting up the necessary tools on a remote server.

WEB testing is a voluminous and ambiguous area, which may consist in solving problems not only in terms of testing WEB applications, but also, for example, in terms of building parsers, IoT robots and bots for working with social networks and all this using only JavaScript !

It is possible that you do not like the phrase "testing", perhaps partly because this phrase contains more interesting things that, for example, allow us to write a bot that can authorize on Instagram, Facebook and perform a number of actions on our behalf and at the same time it is tedious to engage in monitoring how our frontend is performed, but testing makes sense and has already been standardized by the W3C community and continues to evolve.

Task description in a nutshell

What task do we set to solve with the help of testing? All you need is for some program to open a browser and there automatically click links, type in texts and show what you get or return the result parameter that we need. And all this needs to be done on Linux - the Ubuntu 16.04 distribution, which does not have a GUI, i.e. we only have a console and start a familiar browser, as a full-fledged computer will fail.
')

What is needed to solve a test without a GUI?

Everything you need for modern, “exclusive” JavaScript testing:

Headless Chromium Browser v 59 ( chromium-browser ) - a headless browser in the console;
Node.js ( nodejs ) - JavaScript server;
WebDriver ( chromedriver ) - a driver for processing JavaScript tests and working with chromium-browser using Node.js;
Nightwatch.js ( nightwatch ) is a well-known library for writing and running autotests with LinkedIn's Node.js.

Installation on the server

We write the steps for the sequential installation of all components for testing.

one). Installing cromium-browser . Before installing the chromium-browser, you will need to install all the dependencies necessary for it, so you will need to perform a series of actions.
Install dependencies:

sudo apt-get -f install

If we had the first installation attempts, but put no dependencies, it would be good if you delete the downloaded files in / var / cache / apt / archives by running the command:

 sudo rm /var/cache/apt/archives/chromium*

Now install the cromium-browser itself:

 sudo apt-get install chromium-browser

2). Install nodejs . How to install Node.js and all installation methods described in detail here .

One of the easiest installation methods:

There is a possibility that this method will install the old stable version v4.2.6 from the Ubuntu repository, under which this testing example is not tested. For stable operation, it is optimal if you install version 7 or higher using PPA or NVM

 sudo apt-get update sudo apt-get install nodejs

You will also need a package manager, through which you will need to install chromedriver and nightwatch :

 sudo apt-get install npm

We will need them to process JavaScript tests from Node.js.

3). Install chromedriver. This driver performs the role of WebDriver, providing the API, for example, to be able to click on links and type texts into text fields and forms, for this we will use Chromedriver. To install chromedriver run the command:

 npm install chromedriver

four). Install nightwatch . Nightwatch.js is a library for writing and running JavaScript autotests:

 npm install nightwatch

Testing work scheme

Briefly, the whole scheme looks like that the tests for Nightwatch.js send requests to Chromedriver, and the Chromedriver refers to the Chrome Browser for the execution of tests (filling in the form fields and clicking on the links):

Setup and run the first test

The default Nightwatch.js configuration file is located in the node_modules / nightwatch / bin folder and the settings are taken by default from there and in order to set our custom settings for Nightwatch.js you need to create the nightwatch.json file in the root of the project and register everything you need to Chromedriver was used directly (without Selenium and other third-party things) and Chromium was launched in "headless" mode:

 { "src_folders": ["tests"], //      "output_folder": "reports", "custom_commands_path": "", "custom_assertions_path": "", "page_objects_path": "", "globals_path": "globals.js", //   ,         "selenium": { "start_process": false //   , ..    Chromedriver  }, "test_settings": { "default": { "selenium_port": 9515, //   Chromedriver   ("selenium_"    —   ) "selenium_host": "localhost", "default_path_prefix" : "", "desiredCapabilities": { "browserName": "chrome", "chromeOptions" : { "args" : ["--no-sandbox", "--headless", "--disable-gpu"], //       headless- "binary" : "/usr/bin/chromium-browser" //      }, "acceptSslCerts": true } } } }

It is necessary to pay attention to the line with globals.js . Inside this file, you can set a global context for all tests. Let's prescribe there so that the Chromedriver starts before all the tests are started and is nailed at the end:

 const chromedriver = require('chromedriver'); module.exports = { before: function(done) { chromedriver.start(); done(); }, after: function(done) { chromedriver.stop(); done(); } };

Now you need to write any test to test the performance of the testing system. For example, you need to open google.com, search for something and check the search results. Of course, the Nightwatch.js API provides a whole bunch of all sorts of methods for all sorts of checks, but first we have enough:

 module.exports = { 'Test google.com': function(browser) { const firstResultSelector = '#rso cite._Rm'; browser .url('http://google.com', () => { console.log('Loading google.com...'); }) .waitForElementVisible('#lst-ib', 5000) .execute(function() { document.getElementById('lst-ib').value = ' WebSofter!'; }) .submitForm('form') .waitForElementVisible(firstResultSelector, 5000) .getText(firstResultSelector, result => { browser.assert.equal(result.value, 'blog.websofter.ru/'); }) .end(); } };

Run via console on command:

 nightwatch --test google.js

Comment. Firstly, if Node.js is installed via nvm, then you need to activate the session via the command:
 nvm ~/.profile 
secondly, to run the test, you need to create package.json in the project root with the project data, and google.js must be specified as a launch file using the command:
 npm init 
Next, we run the command to run our test:
 nightwatch --test google.js 

The result of the above code in the files will be the result in the console:

Ie, we go to the main site of Google, type in the search phrase “Blog WebSofter!” And as a result compares the address of our blog to the presence of certain tags on the search result page.

Download the working example from this article by the link .

Conclusion

Originally Nightwatch.js was focused on working with Selenium. But today, she knows how to work with chromedriver directly and the need for Selenium, especially in PhantomJS, disappears, although it is possible to integrate with them.

Caution! Chrome Headless Mode is available on Mac and Linux in v59. Windows support is included with Chrome v60. To check which version of Chrome you have, open

 chrome://version

Headless Chrome comes in Chrome 59. This is a way to launch the Chrome browser in a headless environment; in console without GUI. PhantomJS worked in a similar way. Chrome brings to the command line all the modern functions of a web platform provided by Chromium and the Blink engine.

Why is this useful?

Headless browser is a great tool for automated testing and server environments where you don't need a visible user interface shell. For example, you can run some tests on a real web page, create a PDF file, or simply check how the browser displays the URL. Additionally, you can find out by reference.