Protractor + Typescript Setup

Working with typescript makes your work simple and clean. that too, when using protractor with typescript, it is really awesome and there are lot of benefits.

1. Manual errors will be reduced
2. IntelliSense helps you to write code fast
3. Interfaces helps you to read data from JSON [data file] in a proper way.

Brown and White Track Field · Free Stock Photo (pexels.com)

Prerequisite:-

node v12.18.4

So, let’s create “protractorWithTypeScript” folder and navigate inside the folder using command prompt.

Install the required npm packages using the below commands,

npm install -g protractor@7.0.0 typescript@4.1.3

Note: Don’t forget to run “webdriver-manager update”

Successful npm package installation for protractor and typescript globally

Create default package file using below command,

npm init -f

Default package JSON creation for project

Create default tsconfig file using below command,

tsc --init

Successful tsconfig.json creation

Once the basic setup is done, it’s time to structure our project folder “protractorWithTypeScript”

So, again install project level npm packages :)

npm i protractor@7.0.0 typescript@4.1.3 @types/jasmine@3.6.2 @types/node@14.14.14 jasmine-spec-reporter@6.0.0 ts-node@9.1.1

Successful npm package installation

Now, replace “protractorWithTypeScript/tsconfig.json” with below content,

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
“compileOnSave”: false,
“compilerOptions”: {
“baseUrl”: “./”,
“outDir”: “./dist/out-tsc”,
“sourceMap”: true,
“declaration”: false,
“downlevelIteration”: true,
“experimentalDecorators”: true,
“moduleResolution”: “node”,
“importHelpers”: true,
“target”: “es2015”,
“module”: “es2020”,
“lib”: [
“es2018”,
“dom”
]
}
}

Then, create a folder called e2e/specs under project directory and create basic_test.ts with following code,

import { browser, by, element } from ‘protractor’;
describe(“Basic Test”, ()=> {
it(“Test 1 “, async ()=> {
browser.waitForAngularEnabled(false);
await browser.get(“https://www.npmjs.com/package/protractor");
await browser.actions().mouseMove(element(by.xpath(“//a[contains(text(), ‘Contact npm’)]”))).click().perform();
await browser.sleep(2000);
const value = await element(by.xpath(“//a[contains(text(), ‘Sign in for assistance’)]”)).getText();
expect(value).toBe(“Sign in for assistance”);
})
})

And create protractor.conf.js file in the e2e location with below content,

// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter, StacktraceOption } = require(‘jasmine-spec-reporter’);

/**
* @type { import(“protractor”).Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
“specs/*.ts”,
],
capabilities: {
browserName: ‘chrome’
},
directConnect: true,
framework: ‘jasmine’,
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require(‘ts-node’).register({
project: require(‘path’).join(__dirname, ‘./tsconfig.json’)
});
jasmine.getEnv().addReporter(new SpecReporter({
spec: {
displayStacktrace: StacktraceOption.PRETTY
}
}));
}
};

Once all done, end code structure should look like this,

Project setup completion screenshot

Seeing an error? we are yet to complete one more step.

Create one more “tsconfig.json” file in e2e folder with the below content,

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
“extends”: “../tsconfig.json”,
“compilerOptions”: {
“outDir”: “../out-tsc/e2e”,
“module”: “commonjs”,
“target”: “es2018”,
“types”: [
“jasmine”,
// “jasminewd2”,
“node”
]
}
}

It’s done now.

You should not see any errors present in the IDE for the project and project structure should look like this.

Complete project structure

Now, try running the test using below command.

protractor e2e/protractor.conf.js

Successful execution

Thank you for your time.