Testing Angular pages with Ranorex Webtestit and TypeScript/Protractor


Ranorex Webtestit uses Protractor as one of its templates for TypeScript. Protractor is a tool developed by the folks behind Angular.js (v 1.x) and Angular (>= v 2.x.x). If you are new to Protractor, hop over to their official site and read through the getting started section.

If you’re planning to use Ranorex Webtestit to test an Angular page, there are two things of interest, which you’d have to tweak. A new project is scaffolded, containing a file protractor.conf.js, which is the configuration file for the E2E test runs with Protractor. In there you will find a property called noGlobals set to true.
Depending on additional plugins, you might want to set it to false, as this setting controls the presence of global objects like browser or jQuery’s $.

The other thing is, that when you create a new Testfile, it looks something like this:

// Ranorex Webtestit Test File

import { browser } from 'protractor';

describe('New test scenario', () => {
  beforeEach(() => {
    // Make sure to set the ignoreSynchronization for every testrun for non Angular applications
    browser.ignoreSynchronization = true;

  it('should do awesome automation', async () => {
    // your test goes here

As you can see, indicated by the comment in the beforeEach section, in order to get the best experience with testing Angular pages, simply remove the ignoreSynchronization line.