Pre – Requisites:
Visual Studio Code Installed
Node Js Installed
(All commands will be in italics)
Setup of Project :
Steps:
Open Visual Studio code and add new folder.
Step 2 : Init the npm for the package.json file.
Open Terminal from Terminal – > New Terminal
Use below command
npm init
Enter all details – some dummy details, for lisence details you can simply hit enter to generate dummy configuration
After all select yes.
Now you will see the package.json file in the left
Now install protractor locally with following command
npm install –save protractor
if you see below error change the protractor to protractor 2 in the json file and try again
Install
npm install –save jasmine
Install
npm install –save typescript
Create new folder called specs
Create folder inside specs and keep driver inside it.
Now its time to create tsconfig.json file for the configuration of type script.
{
“compilerOptions”: {
//ts “module”:”commonjs”,
“noImplicitAny”: true,
“removeComments”: true,
“preserveConstEnums”: true,
“moduleResolution”: “node”,
“sourceMap”: true,
“types”:[“jasmine”]
},
“typeRoots”: [
“node_modules/@types”
],
“exclude”: [
“node_modules”,
“**/*.spec.ts”
]
}
Tsconfig.json file is configuration of the tsc compiler.
We are going to use typescript and typescript compiler to compile the code and convert to java script.
Now create the script for our selenium test with scripts.ts in the specs.
Once we start writing the test we don’t see this in the code console, only type script and jasmine are seen. Let us fix this.
Install
npm install -d @types/jest
update the package.json file with below content.
{
“name”: “typescript”,
“version”: “1.1.0”,
“description”: “test”,
“main”: “config.js”,
“dependencies”: {
“@types/jasmine”: “^3.5.11”,
“@types/jest”: “^26.0.3”,
“@types/mocha”: “^7.0.2”,
“jasmine”: “^3.5.0”,
“protractor”: “^7.0.0”,
“typescript”: “^3.9.5”
},
“devDependencies”: {},
“scripts”: {
“test”: “test”
},
“repository”: {
“type”: “git”,
“url”: “test”
},
“keywords”: [
“test”
],
“author”: “test”,
“license”: “ISC”
}
Also re-install the protractor, if its not got installed already.
npm install –save protractor
now create test script which opens the google and enters some text.
import {browser, element, by} from ‘protractor’
import {} from ‘jasmine’
describe(‘sanity’, ()=>
{
it(‘expected valuidations’, ()=>
{
browser.ignoreSynchronization=true;
//browser.manage().timeouts().pageLoadTimeout(180000);
browser.get(‘http://google.com’,100000).then(()=>console.log(‘browserOPened’)).then(
()=>
{
browser.getTitle().then((title:string)=>console.log(title));
}
).then ( ()=>
{
element(by.name(‘q’)).sendKeys(‘ConsolidatedChoas’).then( ()=>
{
element(by.name(‘btnK’)).click();
});
}
)
});
})
Now we need to convert this to java script code wit tsc
Run following command and observe the changes.
tsc
Now the code gets compiled and you see new file gets generated in the folder.
Now to run the protractor, we need config.js file which tells the chrome browser for to take the options and capabilities.
Config.js — below
exports.config = {
// launch locally when fields directConnect and seleniumAddress are not provided
chromeDriver: ‘./specs/driver/chromedriver.exe’,
specs: [‘./specs/scripts.js’],
capabilities: {
browserName: ‘chrome’,
chromeOptions: {
args: [“–headless”, “–disable-gpu”, “–window-size=800×600”]
}
}
}
Now we are all ready to run our first script.
For running follow below step.
Protractor config.js
The result should display as below.
Points to be Noted:
- Package.json must have all the modules you are using for compiler to understand
- Tsconfig.json must have include and exclude what you want to include exclude while compiling the code
- MOST IMPORTANTLY EVERY TIME YOU MAKE CHANGES TO TYPESCRIPT FILE, YOU NEED TO USE TSC COMMAND TO REGENERATE THE JAVA SCRIPT FILES.
- The chrome can be invoked headless or with UI, in this we illustrated headless mode.
- Check the modules, types that are listed in config files and make sure that you have those in the npm_modules folder for verification.
- Following is link for the git project.
consolidatedchaos 