Extending Selenium with page objects

As all who have used it know Selenium is a powerful tool when testing front-end applications. I personally use it in combination with protractor. This is because most of the work I do is with Angular and AngularJS applications.

When you are using Typescript extending classes is an easy thing. In light of this I’ve been experimenting with new approaches to creating page objects. Continue reading

Test code separation

As someone who spends quite some time writing and checking unit and e2e tests I’ve started noticing a trend I’m somewhat confused by. There have been multiple occasions in which I’ve encountered test logic (repeatable and single use) in either test specifications or page objects.

So I decided to share my approach to writing and foremost separating my test code into three categories. Those being: Specifications , Sequences and Page Objects.

Continue reading

TypeScript and ES6 import syntax

When I started using TypeScript for my Angular applications, I was confused about all the different ways with which you could import other modules.

import './polyfills.ts';
import { Component } from '@angular/core';
import HomeComponent from './pages/home/home-page.component';
import * as _ from 'lodash';
import assert = require('assert');

At first, I thought that as a programmer you could choose whether you wanted to use curly braces or not, but I quickly found out that that was not the case. It all depends on how the module that you are importing is structured.

I have created an overview of the different ways by which a module can be exported, together with their corresponding import syntax. Most of them are actually plain ECMAScript 2015 (ES6) module syntax that TypeScript uses as well.

Continue reading

PlantUML Pleasantness: Create diagrams from NPM and Typedoc

What if you have created an awesome diagram with PlantUML, and you would like to include that diagram in your documentation?


In this small tutorial we can include a generated PlantUML diagram in typedoc (a way of documenting typescript packages). Note: Graphiz needs to be installed to run this diagram generation.
First install the typedoc plugin:
npm install typedoc –saveDev
Now, create a typedoc.json in the root of your project. This file describes how typedoc should generate the documentation.
{
  “emitDecoratorMetadata”: true,
  “excludeExternals”: true,
  “experimentalDecorators”: true,
  “hideGenerator”: true,
  “ignoreCompilerErrors”: true,
  “includeDeclarations”: false,
  “mode”: “file”,
  “module”: “commonjs”,
  “moduleResolution”: “node”,
  “out”: “./build/docs”,
  “preserveConstEnums”: true,
  “stripInternal”: true,
  “suppressExcessPropertyErrors”: true,
  “suppressImplicitAnyIndexErrors”: true,
  “target”: “ES5”
}
Next install node-plantuml http://ift.tt/1EOlnfx globally. We should install this globally so we can also use the CLI as a NPM script later.
npm install -g node-plantuml
Go ahead and put the following snippet in your package.json
“scripts”: {
     “docs”: “typedoc –options typedoc.json ./src/ && puml generate my-diagram.puml -o build/docs/my-diagram.png”
}
Finally we are able to create typescript documentation with our generated PNG diagram. If we would include the image in our README as follows:
<a href=”./my-diagram.png” target=”_blank”>![Diagram](./my-diagram.png)</a>
and run the following command from the command-line:
npm run docs
Our documentation at ./build/docs our index page shows the README with our generated diagram.