Why I moved our automation framework from JavaScript to TypeScript

Javascript is an awesome programming language, it’s lightweight, it’s fast, there is a lot of resources to handle almost every question that comes to mind and it can handle backend side like a pro by using Node.js. Nevertheless, when you encounter a bug in your javascript code, it can be frustrating and exhausting to debug, and sometimes some of those bugs are very silly and can be easily prevented.

TypeScript takes all of javascript and NodeJS benefits and amplifies them, it will help you to write better and easier to maintain code with static typing, classes, interfaces, types, decorators and real-time IDE support like Visual Studio Code.

Types enable JavaScript developers to use highly-productive development tools and practices like static checking and code refactoring when developing JavaScript applications.

Types are optional, and type inference allows a few type annotations to make a big difference to the static verification of your code. Types let you define interfaces between software components and gain insights into the behavior of existing JavaScript libraries. -official website

So, what exactly is TypeScript?

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript — official website

TypeScript is a strongly-typed superset of JavaScript, means, it adds some syntactic sugar benefits to the language while still letting you write regular JavaScript if you wish to. It encourages a more declarative and object-oriented style of programming, by using interfaces and static typing, offers modules and classes, and most importantly, integrates relatively pretty well with popular JavaScript libraries and code. You could think about TypeScript as a strongly static layer over current JavaScript that has a few features to make life (and debugging especially) a bit more bearable.

TypeScript gained a lot of attention a few years ago when it was selected for full support by Angular 2 and following (which is also written in TypeScript itself!). It’s also developed by Microsoft, which means it has the backing of two major tech companies (not a bad place for any language). Since that, it gains more and more maintainers and support, the TypeScript community is growing rapidly.

Code snippet, demonstrating the use of Classes, Interface, and types:

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}
interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);

Here are some bullet points of what I think makes TypeScript powerful

• Code scalability with Interface oriented development.
• Ever growing community and Tooling supports (Visual Studio Code have great support and Intellisense).
• ES-next compliance.
• Types have a proven ability to enhance code quality and understandability. Large teams such as Google, Microsoft, and Facebook have continually arrived at this conclusion.
• Types increase our agility when doing refactoring and coding in general. It’s better for the compiler to catch those errors than to have things fail during runtime.
• Types are one of the best forms of documentation you can have. The function signature is a theorem and the function body is the proof. VS Code has a great extension for generating comments automatically when using TypeScript.
• Testability. With Dependency Injection coding pattern, testing becomes easy. You can mock test services with the same interfaces as the real ones. Your code won’t know the difference, and you can perform a full suite of scenarios to get full coverage. Commonly known as Stubs.
• Using Stubs enable automation developers to start programming before the development process is finished, this requires the software developers to prepare API schemes and detailed documentation before starting to develop.
• Helps us implement SOLID design patterns into a language that doesn’t really support it.
• Types make our code more readable. It helps developers remember faster what each piece of code is supposed to do. Hence, the developer can add and modify the current code faster.
• TypeScript has the ability to compile down to a version of JavaScript that runs on all browsers.
• One of the biggest advantages of TypeScript is its code completion and IntelliSense. Intellisense provides active hints as new code is added.
• Let us write clean code. Static typing is a feature that detects bugs as developers write the scripts. This allows developers to write more robust code and maintain it, resulting in better, cleaner code.
• You can very easily write pure object-oriented code in Typescript without extensive knowledge.
• Refactoring with TypeScript tools is easier and faster.
• Typings for most libraries are available from the DefinitelyTyped project and, since the release of TypeScript 2.0, can be installed via npm. For example:

npm install @types/lodash

• Decorators introduce programmers to write the metadata annotation which will help you to introspect your code. Best use-case you find for using decorators will be the cross cutting concerns — Aspect Oriented Programming.

So why did we refactor our framework from pure Javascript to TypeScript?

• In automation developing the developers, the lifecycle is around 1–2 years, when the product we are testing has many components it takes longer for each new developer to understand what section does what and when. Have Types and well-commented code saves a lot of time when going over the code.
• Using Types saves us time locating errors during compilation time.
• TypeScript enables us to use stub and have a more agile approach for automation developing, we are no longer depended on the development cycle to be ready.
• Thanks to great tools, IntelliSense support, and IDE support, we are saving time developing.
• Refactoring is not a bad word anymore, we are able to refactor much faster.
• Our code is more structured and easy to read and maintain.
• Our general running time is faster thanks to Dependency Injection.
• Using TSLint enable all of the developers to follow the same guidelines with ease.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Boilerplate examples for using Typescript in automation framework:

UI tests

• https://github.com/dalenguyen/WebdriverIO-TypeScript-Boilerplate
• https://github.com/WillLuce/WebdriverIO_Typescript
• https://github.com/goenning/typescript-selenium-example

API tests

• https://github.com/qaloop/api-testing-protractor-typescript
• https://github.com/sudharsan-selvaraj/protractor-api-resource
• https://github.com/jdavis61/puppeteer-api-typescript-examples

Automation frameworks/tools that support TypeScript

• Jest — it is still not 100% smooth and you might need to make some alteration based on your framework needs
• WebdriverIO
• Selenium
• Mocha
• Protractor
• Cucumber
• Puppeteer
• And many more who keep adding support!

I recommend checking out TypeScript playground, which allows you to see the compilation as you type.

Happy Coding!