This week 4/2017

This post collects some of my experiences about creating E2E test in protractor using TypeScript for AngularJs page.

At the beginning, it is required to prepare protractor (v4.0.9) configuration. Mine is below.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

exports.config = { specs: [ './e2e/angularjs/**/*.e2e-spec.ts' ], capabilities: { 'browserName': 'chrome', }, directConnect: true, baseUrl: 'http://localhost:8080/test/', framework: 'jasmine', rootElement: 'html', jasmineNodeOpts: { // If true, display spec names. isVerbose: true, // If true, print colors to the terminal. showColors: true, // If true, include stack traces in failures. includeStackTrace: true, // Default time to wait in ms before a test fails. defaultTimeoutInterval: 120000 }, // compile ts files before run test beforeLaunch: function() { require('ts-node').register({ project: 'e2e' }); } };

In my case I have application which isn't single-page application but every functionality requires to load separate page. However I am going to change it if I find free time.

My notices & tips:

1. It is good to create a utils class with static methods.
2. Create one shared authorization method to use it in all tests.
3. For some test it is good to logout and even clean cookies. It is possible by code: browser.driver.manage().deleteAllCookies();
4. Sometimes it is good to create screen shot. It is easy to do it.



1 2 3 4 5 6 7 8 9 10

browser.takeScreenshot().then((png) => { let date = new Date(); let path = './target/_test-output' if(!existsSync(path)){ mkdirSync(path); } let stream = createWriteStream(path + '/test_' + date.getTime() + '.png'); stream.write(new Buffer(png, 'base64')); stream.end(); });

5. In configuration file it is good to set long enough timeout interval. I assumed 2 minutes. It is possible to set other, then default 11 sec, timeout in synchronisation mode - parameter allScriptsTimeout.
6. Look out if you use $timeout. Some demon task can lock synchronisation and test will fail on timeout. Better use $interval.
7. If you don't use synchronisation, warm up your application before test or set sleep time before each action loading data from server. Ex. My application load dictionaries from db but all constant values are archived in cache. Loading from db is of course much longer then from cache. It is important to remember about it. 
8. Some examples of css selectors:  

• td:nth-child(2) input
• td:nth-child(1) img#saveButton
• input[title="Is active?"]

This week 14/2016

A few weeks ago I started doing a Angular 2 tutorial. Angular2 is extremely different to first beta version. I chose coding in TypeScript which is recommended language. It is possible to coding in JavaScript or Dart as well but it is less popular.

In my case I chose TypeScript which is compiled to JavaScript and then interpreted by browser. Writing in TypeScript is nice for developer with Java grounds.

Angular 2 defines 4 types of objects: Component, Service, Module and Pipe. 

Before the first final release was published, the concept how to bootstrap application had changed. As I remember, first version of Angular2 allows to execute project without using main module. Later it was changed.

My experience is that the most difficult thing is to match collaborative versions of libraries. I spend much time on selecting exact version of libraries to run some easy application.

And one more think. To create and build production version of code I recommend to use angular-cli.