How do I test AngularJS applications

E2E tests for AngularJS apps

An important part of the development of apps is the testing of certain scenarios and processes. In addition to manual testing, automated surface tests can be carried out beforehand in order to check the most basic processes of the application. For AngularJS these can be implemented with the Protractor framework, which comes from the same developers and therefore already includes all functionalities for testing Angular applications. How exactly the implementation can look like is shown here.

Setting up the test environment

First of all, the test environment should be set up, i.e. all necessary frameworks and modules should be installed. Basically, only Protractor as such is required for the process described here, but an additional reporter should be installed to better display the test results. In the examples here the “jasmine-spec-reporter” is used. Installation is easy on the console via

npm install -g protractor

or.

npm install -g jasmine-spec-reporter

Experience has shown that it is advisable to at least install Protractor globally. This prevents errors from occurring later in the project context because Protractor cannot be found. In principle, everything is already installed that is required for writing surface tests. Since the surface tests with Protractor are carried out via a Selenium server, a decision has to be made in this regard. It is possible to use an already running server or a standalone Selenium server. This restarts itself every time the test is carried out and also terminates automatically. Since the risk of errors due to a non-running server is minimal, this method is preferred. To do this, you can use the command

webdriver-manager update

the current version can be downloaded. The latest version of the Chromedriver will also be installed. In addition to the modules themselves, the complete set-up of the test environment also includes the creation of a configuration file in which information important for Protractor is made. The name of the file is basically irrelevant, but for the sake of simplicity it can be protractor.conf.js. An example configuration could look like this:

exports.config = {seleniumServerJar: '[path to node modules] /protractor/selenium/selenium-server-standalone-2.44.0.jar', specs: ['./app/spec/e2e/**/*. js '], baseUrl:' [base path of the project], capabilities: {'browserName': 'chrome', 'chromeOptions': {'args': ['--disable-web-security']}}, onPrepare: function () {require ('jasmine-spec-reporter'); // add jasmine spec reporter jasmine.getEnv (). addReporter (new jasmine.SpecReporter ({displayStacktrace: false})); }};

The point “seleniumServerJar” indicates the path to the previously mentioned standalone Selenium server. In the case of a global installation, this is located in the directory of all installed node modules and there under protractor / selenium. If a self-started server is used instead of the standalone server, this information must be replaced by “seleniumAdress: [address of the server]”. The files with the written test cases are specified under “specs”. An important point is “capabilities”. Here it is determined with which browser and under which options the tests are carried out. In the example, Chrome is used with the parameter “–disable-web-security”. The reporter is integrated within the “onPrepare” function. This completes the setup and you can begin writing tests.

Writing first tests

The structure of the tests written in Jasmine can be seen from the following sample code:

describe ('Login', function () {beforeEach (function () {browser.get ('[Path to the desired page]');}); it ('click "Login", fill in login info and click login', function () {element (by.id ('button-login')). ​​click (); element (by.model ('auth.username')). sendKeys ('[email protected] '); element (by .model ('auth.password')). sendKeys ('testpwd'); element (by.id ('login')). ​​click ();});});

Within a “describe” block, which names the entire test scenario as such, there is at least one “it” block. This represents the test case itself and includes the interactions with the elements on the page. In the example, the login is tested on one page. After clicking on a button, the input fields for user name and password are selected via the selector “by.model” and filled in with the “sendKeys ()” method. With a further click on the button with the ID “login” this takes place. The forEach () function should also be mentioned. In addition, necessary actions can be carried out before each test case without having to do them separately in each test case. In the example this is the change to the desired page.

Run the tests

Finally, after writing, the tests are carried out. This can be done simply by running the command

protractor protractor.conf.js

on the console in the directory in which the files are located. The “protractor.conf.js” file is the previously mentioned configuration file and must be specified accordingly if it is named differently. Following this command, the Selenium server starts and the tests are carried out.

In the following article you will learn tips & tricks for E2E (end-to-end) tests with the Protractor framework.