Tuesday, 11 March 2014

Writing page objects for AngularJS's Protractor with Typescript

We are creating a new frontend and at the same time are moving towards typescript. We wanted to use the page objects pattern to have a better maintainable end-to-end test script. Protractor is an end to end test framework for AngularJS applications built on top of WebDriverJS.

As of any problem with typescript we should first understand the javascript variant. So lets begin at the beginning and create a integration test for a example login page:
As you can imagine, elements or their selectors can change at any time, so a page object is very useful. Lets look at a pure javascript example with a page object.

Now as you can see the page object pattern helps a lot here, the test only describes what we want to do, and no longer is concerned with page specifics.
Now lets see how that looks in typescript:

You might hit a problem that you hit an error like ">> error TS2095: Could not find symbol 'module'." in your pageObject.ts file. The way around that is to insert the following code before your class definition:
Now the same problem can occur on the "require('pageObject.js')" bit as that is also a statement that typescript uses to load modules. So we can use the same workaround:
I don't know why some of the files need this "workaround" but it is workable.


  1. Thank you for this post. It was helpful.
    > I don't know why some of the files need this "workaround" but it is workable.

    These are from nodejs. Just download the typescript definitions for node.d.ts and it will compile without the declarations.

  2. This comment has been removed by the author.

  3. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from TypeScript Training in Chennai . or learn thru Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

  4. Great Article… I love to read your articles because your writing style is too good,
    its is very very helpful for all of us and I never get bored while reading your article because,
    they are becomes a more and more interesting from the starting lines until the end.
    Java training in Annanagar
    Java training in Chennai
    Java training in Chennai
    Java training in Electronic city
    Java training in Marathahalli

  5. Use "Long Path This very useful if you are having problems
    in deleting, unlocking, copying and even renaming files, also very easy.