PROTRACTOR
Download/Installations
========================
1. NPM(nodejs install)
To Know the version
node -v
npm -v
2. Protractor, Jasmine and typescript installation
npm install -g protractor
npm install -g jasmine
npm install -g typescript
To Know the version
protractor --version
jasmine -v
tsc --v
3. install webdriver
webdriver-manager update
webdriver-manager update --versions.chrome=73.0.3683.86
location of drivers:C:\Users\<<username>>\AppData\Roaming\npm\node_modules\protractor\node_modules\webdriver-manager\downloads
4. Run webdriver
webdriver-manager start
5. localhost:444--Open this url to check
Writing Script
==============
1. Down load Visual studio code
2. Create a folder in any location and open in visual studio
3. Navigate to the folder location in command prompt
4. Initialize npm
npm init
it will ask few informaltions
name: test
description:testcode
author: any name
remaining all options you skip
it will create package.json in the directory locaiton
5. Add dependencies in the above json after version
"dependencies:
{
"protractor": "6.0.0,
"jasmine": "3.3.0"
}
6. open the terminal in Visual studio code in the folder
(go to the folder location, open command prompt there and type "Code ." and press enter to open visual studio code)
build the code(like mvn clean install)
npm install--to add libraries(i.e node modules)
in case above command wont work, run the below command in Visual studio code in the project location
npm install --save-dev protractor( This will Add node_modules to the project directory)
npm install --save-dev jasmine
npm install -save @types/jasmine
These will also add the dependencies of protractor to package.json
Above dependencies are required to run Jasmine framework with Type scripting
7. Add two files, test file(known as spec file) and configuration file to run
8. Protractor Run
In the terminal window of Visual studio code, run the following command
protractor Conf.js
Cleaning commands of Web driver libraries
================================
webdriver-manager clean
webdriver-manager status
webdriver-manager update
webdriver-manager start.
Alternate way of Protractor installation(Following method is for Angular application development)
=======================================================================
npm install -g @angular/cli
ng new my-project
cd my-project
ng serve
npm install
npm install --save-dev jasmine or npm install -g jasmine
npm install -save @types/jasmine
https://github.com/angular/angular-cli/wiki
Running Spec files using Specrunner
============================
1. Down specruner stand alone from https://github.com/jasmine/jasmine/releases
2. From the download, copy SpecRunner.html in the location where scripts reside.
change the locations in spec runner
=============Sample spec Runner============================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v3.4.0</title>
<link rel="shortcut icon" type="image/png" href="../node_modules/jasmine-core/images/jasmine_favicon.png">
<link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
<script src="spec.js"></script>
</head>
<body>
</body>
</html>
========================================================================
http://www.protractortest.ort/#/api
npm install -g protractor
npm install --save-dev protractor
webdriver-manager update/webdriver-manager update --versions.chrome=73.0.3683.86
npm install jasminewd2
we need to add conf.js file
run tsc -w for transpiling typescripts to js
run webdriver-manager run selenium server
protractor start to run the test
describe('angularjs homepage todo list', function() {
it('should add a todo', async function() {
await browser.get('https://angularjs.org');
await element(by.model('todoList.todoText')).sendKeys('write first protractor test');
await element(by.css('[value="add"]')).click();
var todoList = element.all(by.repeater('todo in todoList.todos'));
expect(await todoList.count()).toEqual(3);
expect(await todoList.get(2).getText()).toEqual('write first protractor test');
// You wrote your first test, cross it off the list
todoList.get(2).element(by.css('input')).click();
var completedAmount = element.all(by.css('.done-true'));
expect(await completedAmount.count()).toEqual(2);
});
});
Note: in case element,by,browser shows error then add
import{by,element,browser} from 'protractor'
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js']
};
about async/await promises
https://stackoverflow.com/questions/44691940/explain-about-async-await-in-protractor
TYPESCRIPT
==========
Prerequisite
================
intall Nodejs
Install visual studio code
install type script
npm install -g typescript
or npm install --save-dev typescript
this will avoid possible interactions with other TypeScript projects you may have
tsc --version
tsc -v to know the type script version
Creating Tyspe script
======================
1. Create a folder
2. got to that folder and open command prompt
3. tsc --init which creates tconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}
3. type "code ." and press enter this open visual studio code
4. tsc <<scriptname.ts>> to Transpile typescfripts to java script
create test.ts file
let message : string = "Hello World";
console.log(message);
tsc test.ts
This will create test.js
5. Running
a. running js file with node
node test.js
or node test.ts
b. Running TypeScript build
Execute Run Build Task (Ctrl+Shift+B) from the global Terminal menu.
If you created a tsconfig.json file in the earlier section, this should present the following picker:
c. tsc: build entry. This will produce a HelloWorld.js and HelloWorld.js.map file in the workspace.
d. Make the TypeScript Build the default#
You can also define the TypeScript build task as the default build task so that it is executed directly
when triggering Run Build Task (Ctrl+Shift+B). To do so, select Configure Default Build Task from the global Terminal menu.
This shows you a picker with the available build tasks. Select TypeScript tsc: build which generates the following tasks.json
file in a .vscode folder:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Notice that the task has a group JSON object which sets the task kind to build and makes it the default.
Now when you select the Run Build Task command or press (Ctrl+Shift+B), you are not prompted to select a task and your compile starts.
Download the latest VS Code version - https://code.visualstudio.com/download
Install typescript globally npm install -g typescript
Install protractor globally npm install -g protractor
Create your project folder
Setup you project folder for git, node and typescript -
npm init -f // will create default package.json stating its nodejs project
git init // will create .git file, you project is now git project
tsc --init // will create tsconfig.json stating its typescript project
Note: some times type script type variable of type any may throw error. In that case
mark "noImplicitAny": false in tsconfig.json
Install typings and dev dependencies-
npm install --save-dev protractor // this will install protractor as a dev dependency
npm install --save-dev typescript // this will install typescript as a dev dependency
npm install --save-dev @types/jasmine // jasmine typings
npm install --save-dev @types/node // node typings
Issues and Solutions:
================
Error in require(......)
npm i @types/node
npm install jasmine-spec-reporter --save-dev. for protractor config
========================
1. NPM(nodejs install)
To Know the version
node -v
npm -v
2. Protractor, Jasmine and typescript installation
npm install -g protractor
npm install -g jasmine
npm install -g typescript
To Know the version
protractor --version
jasmine -v
tsc --v
3. install webdriver
webdriver-manager update
webdriver-manager update --versions.chrome=73.0.3683.86
location of drivers:C:\Users\<<username>>\AppData\Roaming\npm\node_modules\protractor\node_modules\webdriver-manager\downloads
4. Run webdriver
webdriver-manager start
5. localhost:444--Open this url to check
Writing Script
==============
1. Down load Visual studio code
2. Create a folder in any location and open in visual studio
3. Navigate to the folder location in command prompt
4. Initialize npm
npm init
it will ask few informaltions
name: test
description:testcode
author: any name
remaining all options you skip
it will create package.json in the directory locaiton
5. Add dependencies in the above json after version
"dependencies:
{
"protractor": "6.0.0,
"jasmine": "3.3.0"
}
6. open the terminal in Visual studio code in the folder
(go to the folder location, open command prompt there and type "Code ." and press enter to open visual studio code)
build the code(like mvn clean install)
npm install--to add libraries(i.e node modules)
in case above command wont work, run the below command in Visual studio code in the project location
npm install --save-dev protractor( This will Add node_modules to the project directory)
npm install --save-dev jasmine
npm install -save @types/jasmine
These will also add the dependencies of protractor to package.json
Above dependencies are required to run Jasmine framework with Type scripting
7. Add two files, test file(known as spec file) and configuration file to run
8. Protractor Run
In the terminal window of Visual studio code, run the following command
protractor Conf.js
Cleaning commands of Web driver libraries
================================
webdriver-manager clean
webdriver-manager status
webdriver-manager update
webdriver-manager start.
Alternate way of Protractor installation(Following method is for Angular application development)
=======================================================================
npm install -g @angular/cli
ng new my-project
cd my-project
ng serve
npm install
npm install --save-dev jasmine or npm install -g jasmine
npm install -save @types/jasmine
https://github.com/angular/angular-cli/wiki
Running Spec files using Specrunner
============================
1. Down specruner stand alone from https://github.com/jasmine/jasmine/releases
2. From the download, copy SpecRunner.html in the location where scripts reside.
change the locations in spec runner
=============Sample spec Runner============================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v3.4.0</title>
<link rel="shortcut icon" type="image/png" href="../node_modules/jasmine-core/images/jasmine_favicon.png">
<link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
<script src="spec.js"></script>
</head>
<body>
</body>
</html>
========================================================================
http://www.protractortest.ort/#/api
npm install -g protractor
npm install --save-dev protractor
webdriver-manager update/webdriver-manager update --versions.chrome=73.0.3683.86
npm install jasminewd2
we need to add conf.js file
run tsc -w for transpiling typescripts to js
run webdriver-manager run selenium server
protractor start to run the test
describe('angularjs homepage todo list', function() {
it('should add a todo', async function() {
await browser.get('https://angularjs.org');
await element(by.model('todoList.todoText')).sendKeys('write first protractor test');
await element(by.css('[value="add"]')).click();
var todoList = element.all(by.repeater('todo in todoList.todos'));
expect(await todoList.count()).toEqual(3);
expect(await todoList.get(2).getText()).toEqual('write first protractor test');
// You wrote your first test, cross it off the list
todoList.get(2).element(by.css('input')).click();
var completedAmount = element.all(by.css('.done-true'));
expect(await completedAmount.count()).toEqual(2);
});
});
Note: in case element,by,browser shows error then add
import{by,element,browser} from 'protractor'
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js']
};
about async/await promises
https://stackoverflow.com/questions/44691940/explain-about-async-await-in-protractor
TYPESCRIPT
==========
Prerequisite
================
intall Nodejs
Install visual studio code
install type script
npm install -g typescript
or npm install --save-dev typescript
this will avoid possible interactions with other TypeScript projects you may have
tsc --version
tsc -v to know the type script version
Creating Tyspe script
======================
1. Create a folder
2. got to that folder and open command prompt
3. tsc --init which creates tconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}
3. type "code ." and press enter this open visual studio code
4. tsc <<scriptname.ts>> to Transpile typescfripts to java script
create test.ts file
let message : string = "Hello World";
console.log(message);
tsc test.ts
This will create test.js
5. Running
a. running js file with node
node test.js
or node test.ts
b. Running TypeScript build
Execute Run Build Task (Ctrl+Shift+B) from the global Terminal menu.
If you created a tsconfig.json file in the earlier section, this should present the following picker:
c. tsc: build entry. This will produce a HelloWorld.js and HelloWorld.js.map file in the workspace.
d. Make the TypeScript Build the default#
You can also define the TypeScript build task as the default build task so that it is executed directly
when triggering Run Build Task (Ctrl+Shift+B). To do so, select Configure Default Build Task from the global Terminal menu.
This shows you a picker with the available build tasks. Select TypeScript tsc: build which generates the following tasks.json
file in a .vscode folder:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Notice that the task has a group JSON object which sets the task kind to build and makes it the default.
Now when you select the Run Build Task command or press (Ctrl+Shift+B), you are not prompted to select a task and your compile starts.
Download the latest VS Code version - https://code.visualstudio.com/download
Install typescript globally npm install -g typescript
Install protractor globally npm install -g protractor
Create your project folder
Setup you project folder for git, node and typescript -
npm init -f // will create default package.json stating its nodejs project
git init // will create .git file, you project is now git project
tsc --init // will create tsconfig.json stating its typescript project
Note: some times type script type variable of type any may throw error. In that case
mark "noImplicitAny": false in tsconfig.json
Install typings and dev dependencies-
npm install --save-dev protractor // this will install protractor as a dev dependency
npm install --save-dev typescript // this will install typescript as a dev dependency
npm install --save-dev @types/jasmine // jasmine typings
npm install --save-dev @types/node // node typings
Issues and Solutions:
================
Error in require(......)
npm i @types/node
npm install jasmine-spec-reporter --save-dev. for protractor config
npm install jasmine-fail-fast for pluginfolder
npm install handlebars(for html reports)
npm install log4js --save for log4j
For below error
[14:22:08] E/local - Error code: 135
[14:22:08] E/local - Error message: No update-config.json found. Run 'webdriver-manager update' to download binaries.
Reason:This is not an issue with webdriver-manager...it looks like you are confusing the local node modules directory with global. Protractor is looking for the local file update-config.json in the local project node modules directory. The binaries should be installed in:project-dir/node_modules/protractor/node_modules/webdriver-manager/selenium/
Solution:
npm run webdriver-update
In your project, navigate to node_modules/protractor/node_modules/webdriver-manager/selenium/. This is where the update-config.json and your downloaded binaries are located.
Comments