As you might have seen, the Confluence Protractor Base is written in TypeScript. For those of you, who have never seen TypeScript Code, it is more Java like than plain JavaScript. The main advantage are, as the name sais, types. Varibales and method params are typed for example, which leads to safer programming and IDE support. Furthermore, visibilities, inheritance, classes and many other things are easir to write and read. The Typescript code ist transpiled (source-to-source compilation) into valid JavaScript, so it's only used for development.

For the tutorial all tests of the RandomPage app are written in JavaScript (/ui-tests) and in TypeScript (/ui-tests-typescript), this way, you can always compare the sources (the compiled typescript code ist not really readable).

Requirements

1. Install typescript: 

   >>> npm install -g typescript

2. Transpile UI-Tests

   >>> tsc

If everything worked fine, you should find a 'build/' directory in your root folder, which contains the transpiled JavaScript files.

Run tests with typescript

Instead of 

>>> npm run test-e2e

run

>>> npm run test-e2e-typescript

Which first transpiles the TypeScript code and the runs the tests from the built JavaScript files.

Differences to the JavaScript UI-Tests

The TypeScript tests provide the same structure and do the same things as the JavaScript tests. So if you follow the other parts of the tutorial you know what the files do. The differences will be described here

Configuration

There's a tsconfig.json configuration file in your root directory (see full reference here), which provides compilerOptions and the included TypeScript files. Also there's a linter for TypeScript, which requires a tslint.json. This is all further configuration you need.

Imports

Instead of 

var confluenceProtractorBase = require('confluence-protractor-base').confluenceProtractorBase;
var pageObjectUtils = confluenceProtractorBase.utils.pageObjectUtils;

use

import {confluenceProtractorBase, pageObjectUtils} from "confluence-protractor-base";

 If you're IDE supports TypeScript, you'll get import suggestions

Classes (page objects)

Instead of writing a class with inheritance like this

function RandomPage() {
   ConfluenceBase.apply(this, arguments);
}

RandomPage.prototype = new ConfluenceBase();

module.exports = RandomPage;

you can write it way more simple like this

export class RandomPage extends ConfluenceBase {

}

No 'self' workaround

As the `this` context is a bit tricky in JavaScript, you often declare a `self` reference to get the class `this`

function RandomPageAdministration() {
   ConfluenceBase.apply(this, arguments);

   var self = this; # workaround

   ...

   this.getPagesLimit = function () {
       # use the self to reference the class context
      return self.getPagesLimitElement().getAttribute('value');
   };

in TypeScript the this context is clearer

export class RandomPageAdministration extends ConfluenceBase {

   ...

   public getPagesLimit() {
      # no need for `self`
      return this.getPagesLimitElement().getAttribute('value');
   };

Declaring functions

Instead of

function () { }

use

() => { }

 This is not only TypeScript but the ES6 standard

Take away

Implementing in TypeScript brings type safety and improved IDE support. Writing page objects and tests it more comfortable, with a lower error rate. If you just start writing your own tests, give it a try!

Navigation

< Part 5: Page Objects | Start >