Protractor

Protractor End to End testing framework for AngularJS Apps
Angular 14.1 was released on 20 july 22
Angular 9 was released on February 6, 2020. Version 9 moves all applications to use the Ivy compiler and runtime
protractor 7.0
Node-14.9.0
javascript is synchronous- ajax(),settimeout() shows aysnchronous nature
asynchronous- multiple work at a time
https://github.com/LaxminarayanJena/ProtractorFramework-Cucumber-POM-

npm --version
npm install -g protractor
protractor --version
webdriver-manager update
webdriver-manager start
npm init -creates package.json
http://localhost:4444/wd/hub/static/resource/hub.html

---

protractor conf.js

---

C:\Program Files\nodejs\node_modules\npm\bin in path settings

npm i npm@latest -g

Download all the packages where package.json file is there
npm install
webstorm configuration

Every javascript return promises.promises resembles state of your step.1)pending 2)resolved 3)rejected 90% actions-protractor will not move forward unless promise is resolved If you want to retrieve anything from browser then that particular functionality related methods have no support of promise resolving The promise fulfilled with its value will be returned.

The main difference between callbacks and promises is that with callbacks you tell the executing function what to do when the asynchronous task completes, whereas with promises the executing function returns a special object to you (the promise) and then you tell the promise what to do when the asynchronous task in call back we pass functions as parameters to other functions and call them inside the outer functions

function print(callback) { 
    callback();
}

describe('angularjs homepage', function() {
  it('should greet the named user', async function() {
    await browser.get('http://www.angularjs.org');

    await element(by.model('yourName')).sendKeys('Julie');

    var greeting = element(by.binding('yourName'));

    expect(await greeting.getText()).toEqual('Hello Julie!');
  });

Javascript

String represents textual data 'hello', "hello world!" etc
Number- an integer or a floating-point number 3, 3.234, 3e-2 etc.
BigInt an integer with arbitrary precision 900719925124740999n , 1n etc.
Boolean -true and false
undefined-a data type whose variable is not initialized let a;
null- denotes a null value let a = null;
Symbol- data type whose instances are unique and immutable let value = Symbol('hello');
Object -key-value pairs of collection of data let student = { };

var string = "Some string";
for (var i = 0; i < string.length; i++) {
 console.log(string.charCodeAt(i));
}

Let vs Var vs Const:

If you declare a variable using the “var” keyword, it will be in the global scope(accessible to the whole program) if declared outside all functions. It will have a local scope(accessible within the function only) if defined inside a function. If you declare a variable using the “let” keyword, it will be blocked scope, i.e., any variable declared using let, will be accessible with the surrounding curly brackets ({ }) only. If you declare a variable using the “const” keyword, you will not be able to change its value later on. As per scope, it will be the same as variables declared using the “let” keyword.

Locators:

WaitForAngular ,By.Binding, By.repeater,By.textarea,By.model,WebElelement.all,WebElement.evaluate

Find all links
browser.get("https://google.com")
element.all(by.tagname("a")).count().then(function(allLinks){
	console.log("Number of links in page  : " +allLinks);
})

is selected
browser.get("https://google.com")
element(by.xpath("//input[@id='selected'] [value='Bangalore']")).isSelected().then(function(selectedFlag){
	console.log("Is element selected : "+selectedFlag);
})

move to element
browser.actions.moveToElement(menuElement).moveToElement(element(by.xpath("xpath-of-menu-item-element"))).click().perform()

xit("test description)

element(by.xpath("xpath of box")).getAttribute ("value")).then(function(textValue){
	console.log(textValue)
})

element(by.id("some")).getAttribute("title").then(function(tooltip){
	console.log(tooltip)
}


browser.actions().dragAndDrop(
	element(by.id("drag1")),
	element(by.id("div2"))
).perform();

let EC = ExpectedConditions;
let condition = EC.visibilityOf(element(by.id("hidden")))
browser.wait(condition, 30000)

browser.wait(ExpectedConditions.alertIsPresent(), 30000)


browser.getCurrentUrl().then(function(url){
	console.log("Web page url is : " +url )
})

Reporting

cucumber-html-reporter

1)In package.json -------

"devDependencies": {
    "cucumber-html-reporter": "^5.2.0",
    "protractor-cucumber-framework": "^6.2.1"
  }



 "scripts": {
    "test": "protractor config.js && node report-config.js",
    "protractor": "./node_modules/protractor/built/cli.js",
    "setup": "npm install && webdriver-manager update"
  },




2)In report-config.js--------

var reporter = require('cucumber-html-reporter');

var options = {
    theme: 'bootstrap',
    jsonFile: './reports/cucumber_report.json',
    output: './reports/cucumber_report.html',
    reportSuiteAsScenarios: true,
    launchReport: true,
    metadata: {
        "App Version":"0.3.2",
        "Test Environment": "Prod Env",
        "Browser": "Chrome  54.0.2840.98",
        "Platform": "Windows 7",
        "Parallel": "Scenarios",
        "Executed": "Remote"
    }
};

3)In config.js
cucumberOpts: {
        tags: false,
        format: 'json:./reports/cucumber_report.json',
        require: ['./src/step_defination/*.js', './src/util/*.js']
    }
};

reporter.generate(options);

4)npm test  
reports will be created under ./reports folder