E2E Testing with Protractor , Cucumber using TypeScript!

Ram Pasala
5 min readSep 14, 2016

--

Question 1: Can Protractor be integrated with other popular BDD frameworks such as Cucumber?

Question 2: Does Protractor support TypeScript lang?

Answer: Hell Yes!, In fact not only it can be integrated with CucumberJS which supports async programming concepts but also now we have the power to write our scripts with TypeScript which is a strongly typed superset of plain old Javascript.

This is a killer combination which provides a cleaner and faster control for testing angular/non angular apps thus meeting business requirements in a more reliable and scalable way!

When I started experimenting with Protractor, I was a little skeptical whether this framework would support large enterprise web apps which need e2e integration test coverage and I must admit, it surpassed all my expectations and let’s see how:

Protractor: end to end testing for angularJS

Protractor is a wrapper on top of webdriverJS which is a nodeJS async API implemented equivalent to selenium webdriver Java API . webdriverJS and protractor’s methods return promises.

Protractor has built in locators exclusively for angularJS apps which would help in locating web elements in angularJS apps with ease. Some of the examples include:

element(by.model(‘locator’));

element(by.binding(‘locator’));

element(by.repeater(‘locator’));

Do check out the Protractor API for a list of custom locators.

Cucumber: BDD framework

Cucumber framework is meant for behaviour driven development acceptance testing which is basically scenario validations of an application which help programmers to test and what not to test in plain understandable language(Gherkin).

Given I am on google page

When I type “protractor”

Then I click search button

Then I clear search textbox

This framework allows us to bridge the gap between the product owners and developers. This also promotes a healthy & transparent environment of our testing techniques and processes.

You could check out my post: E2E testing with Protractor & Cucumber Js on some of the best practices to follow for building robust and scalable protractor-cucumber framework!

TypeScript : JavaScript that Scales!

TypeScript has been the buzz word these days which is totally justified given its advantages. As their official website says :

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript

It adds optional static typing and class-based object-oriented programming to the JavaScript language.

Protractor started supporting TypeScript officially with its version 4.0.0 release. Since then we got many good features namely- statement auto completion, api methods and doc suggestions etc.

Check out Protractor with TypeScript post by Craig N , it has everything that you need to know while setting up protractor with typescript.

Following is the skeleton framework for protractor-cucumber using typescript lang!

As we can see that Protractor integrates powerful tools and technologies such as NodeJS, Selenium, WebDriverJS, Jasmine, Cucumber and Mocha that gives us a scalable end to end test framework for our web applications.

Enough Talk let’s look at some code!

Writing Features: we write feature files in Given, When & Then format describing the context of the test.

Feature file with @tags option

Writing StepDefinitions: We write the equivalent typescript code for each of the step definitions which help us test the feature scenarios.

Step Definition using TypeScript

Writing Page Objects: Page Objects help us to write cleaner tests by encapsulating information about the elements on our application page.

CucumberOpts Tags: Cucumber command line options have number of features & support tags which help us execute specific scenarios and features.

cucumberOpts tags for scenario’s

Results: We get our results in pretty format as we have given the option in cucumberOpts by stating whether the scenarios are passed or failed.

Tests run through command line

GitHub Repo:

Conclusion: Protractor is a powerful tool for testing end to end test scenarios of a web applications and would continue to grow with TypeScript support and Cucumber is a widely accepted BDD framework for acceptance testing, Together these frameworks unleash a robust, scalable and reliable e2e testing framework.

Gone are the days of pure blackbox testing, this is the era of smart test automation techniques & processes. In the recent years we have seen a massive growth in the field of Test Automation with Selenium driving most of the automation frameworks, Thus giving rise to new breed of testers — SDET’s & Test Automation Engineers. Exciting times ahead in Test Automation !

--

--

Ram Pasala

Building Neverinstall, Likes open-source tech and into 80’s synth rock music!