Automation Testing Interview: Protractor- Angular JS

Code Explanation of spec.js:

1. describe('Explaining describe block', function()

The describe syntax is from the Jasmine framework. Here "describe" ('Explaining describe block') typically defines components of an application, which can be a class or function etc. In the code suite called as 'Explaining describe block' it's just a string and not a code.

2. it('should add a Name as GURU99', function() – it’s the test

3. browser.get('https://angularjs.org')

As like in Selenium Webdriver browser.get will open a new browser instance with mentioned URL.

4. element(by.model('anyName')).sendKeys('protractor')

Here we are finding the web element using the Model name as "'anyName'," which is the value of "ng-model" on the webpage.

Locators

by.css('.myclass') // Find an element using a css selector.

by.id('myid') // Find an element with the given id.

// Note that at the moment, below are only supported for AngularJS apps.

by.model('name') // Find an element with a certain ng-model.

by.binding('bindingname') // Find an element bound to the given variable.

Actions

var el = element(locator);

el.click();  // Click on the element.

el.sendKeys('my text'); // Send keys to the element (usually an input).

el.clear(); // Clear the text in an element (usually an input).

el.getAttribute('value'); // Get the value of an attribute, for example, get the value of an input.

eg:

var el = element(locator);

el.getText().then(function(text) {

console.log(text);

});

Finding Sub-Elements

To find sub-elements, simply chain element and element.all functions together as shown below.

Using a single locator to find:

an element: element(by.css('some-css'));
a list of elements: element.all(by.css('some-css'));

Using chained locators to find:

a sub-element: element(by.css('some-css')).element(by.tagName('tag-within-css'));
to find a list of sub-elements: element(by.css('some-css')).all(by.tagName('tag-within-css'));

You can chain with get/first/last as well like so:

element.all(by.css('some-css')).first().element(by.tagName('tag-within-css'));

element.all(by.css('some-css')).get(index).element(by.tagName('tag-within-css'));

element.all(by.css('some-css')).first().all(by.tagName('tag-within-css'));