Write the first test in Protractor using TypeScript

We will go through the steps and write the first test in Protractor using TypeScript. We will start to create a simple folder structure so that finally we have an automation framework.

1. Open Visual Studio Code

2. Right-click on Explorer

3. Select the New Folder option

4. Name the folder as specs and hit the enter key

5. Select the specs folder and right click

6. Select the New File option

7. Name the folder as first.spec.ts and hit the enter key

8. Let’s write a simple test

import { browser } from 'protractor'
describe('Protractor, Jasmine and Typescript Demo', function () {
    it('Verify page title', function () {
        browser.get('https://angularjs.org/');
        browser.getTitle().then(function (title) {
            console.log("The page title is: " + title)
            browser.sleep(5000);
        })
    });
});

9. Create conf.ts in the root folder and add these lines

import { browser } from "protractor";

exports.config = {
    directConnect: true,

    // Capabilities to be passed to the webdriver instance.
    capabilities: {
        'browserName': 'chrome'
    },

    // Framework to use. Jasmine is recommended.
    framework: 'jasmine2',

    specs: ['../temp/specs/*.js'],

    // Options to be passed to Jasmine.
    jasmineNodeOpts: {
        defaultTimeoutInterval: 90000
    },

    onPrepare: () => {
        browser.manage().window().maximize();
        browser.manage().timeouts().implicitlyWait(5000);
    }
}

10. Now, in order to run your first.spec.ts you have to Compile your code, to do that you have to run the command

npm test

This will compile the code and keep it in a folder named temp and then it will start the test on the browser.

You are Done!!!