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.

Tuesday, 28 January 2014

HTML5 Application Cache (Safari) quirkiness

HTML5 Application Cache can be a powerful tool in modern browsers, but there are some quirks that you have to know when you use it. If you don't know about the Application Cache I suggest you checkout Eric Bidelman's A Beginner's Guide to Using the Application Cache.

First of is the size limit of the different browsers. There is a great website that list (and tests) the size limit of the different browsers: appcache-default-size

IE (at least 10 and 11) has a limit per domain, so a.example.com and b.example.com share the same storage limit. And any resources served with the header Cache-control: no-store in IE will fail the download of the application cache.

Safari (tested on 7.0.1) has strange quirk. We run our application with gzip enabled, so when I tried to load our application for the first time on Safari I got a "[Error] Failed to load resource: cannot decode raw data" on the manifest file. Safari tries to download the manifest with the correct gzip accept-header, but fails horribly when the data is gzip'ed, so disabling gzip for the manifest file fixes the problem, for the manifest. But then it downloaded the first file and the same error occurred, so we got to disable gzip for all resource files, as we can't identify if Safari is downloading normally or via the manifest. Fun fact is that Safari on the iPad works just fine.
Another quirk is that Safari downloads on a separate 'thread' witch has no cookies what so ever. So the 'thread' downloading is not logged in. This causes some problems as we had our resources secured with authentication.

So in conclusion to make Safari work with the application cache.
- You have to disable gzip for Safari (desktop).
- All resource files should be publicly accessible.