Table of contents

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).


  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


>>> 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


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.


Instead of 

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


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

(warning) 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 () { }


() => { }

(question) 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!


< Part 5: Page Objects | Start >

  • No labels

This content was last updated on 02/23/2018.

This content hasn't been updated in a while. That doesn't have to be a problem. Some of our pages live for years without becoming obsolete. Please click this link if you want us to update this page. Old content can be incorrect, misleading or outdated. Please get in contact with us via a form on this page, our live chat or via email with if you are in doubt, have a question, suggestion, or want changes from us.