Difference between revisions of "IT-SDK-Protractor"

From wiki.samerhijazi.net
Jump to navigation Jump to search
(Expect)
(Initial)
 
(11 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
* src: https://www.tutorialspoint.com/protractor/protractor_core_apis.htm
 
* src: https://www.tutorialspoint.com/protractor/protractor_core_apis.htm
 
* src: https://chercher.tech/protractor/api-testing-protractor#testing-works
 
* src: https://chercher.tech/protractor/api-testing-protractor#testing-works
 +
* src: https://github.com/angular/protractor/blob/master/docs/faq.md
 +
* src: https://www.toolsqa.com/protractor/typescript/
 +
* src: https://www.typescriptlang.org/docs/
 +
* src: https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/object-oriented-programming
 +
* src: https://livebook.manning.com/book/testing-angular-applications/chapter-9/30
 +
* src: https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/
  
=Browser=
+
=Configuration=
 
src: https://github.com/angular/protractor/blob/master/docs/browser-setup.md#using-headless-chrome
 
src: https://github.com/angular/protractor/blob/master/docs/browser-setup.md#using-headless-chrome
 
<pre class="code">
 
<pre class="code">
Line 15: Line 21:
 
</pre>
 
</pre>
  
=Element=
+
=TimeOuts=
==By==
+
configuration file
* src: http://www.webdriverjs.com/protractor-element-locators/
 
 
<pre class="code">
 
<pre class="code">
- by.css
+
Protractor  10000 >> getPageTimeout: timeout_in_millis
- by.xpath
+
Angular     11000 >> allScriptsTimeout: timeout_in_millis
- by.partialLinkText
+
WebDriver  11000 >> allScriptsTimeout: timeout_in_millis
- by.name
+
Jasmine    30000 >> jasmineNodeOpts: {defaultTimeoutInterval: timeout_in_millis}
- by.tagName
 
- by.cssContainingText
 
- by.className
 
 
</pre>
 
</pre>
==##==
+
Individual call
src:
 
 
<pre class="code">
 
<pre class="code">
browser.findElement(by.name('dog_name'));
+
Jasmine     >> it(description, testFn, timeout_in_millis)
element(##).
+
Protractor  >> browser.get(address, timeout_in_millis)
-
+
Angular     >> browser.waitForAngularEnabled(false);
</pre>
+
Angular     >> browser.waitForAngularEnabled(true);
==Expect==
 
<pre class="code">
 
- expect($ELEMENT).toBe($VALUE);
 
 
</pre>
 
</pre>
  
=XXX=
+
=Protractor API=
# Protractor API
+
* src: http://angular.github.io/protractor/#/api
http://angular.github.io/protractor/#/api
+
* src: http://www.webdriverjs.com/protractor-element-locators/
 
+
* Note: Most commands return promises, so you only resolve their values through using jasmine expect API or using .then(function()) structure
Note: Most commands return promises, so you only resolve their values through using jasmine expect API or using .then(function()) structure
 
 
 
Based on this post: https://spagettikoodi.wordpress.com/2015/01/14/angular-testing-cheat-sheet/ by @crystoll
 
 
 
#### Control browser
 
```javascript
 
browser.get('yoururl'); // Load address, can also use '#yourpage'
 
  
 +
==Control browser==
 +
<pre class="code">
 +
browser.get('yoururl');                        // Load address, can also use '#yourpage'
 
browser.navigate().back();
 
browser.navigate().back();
 
 
browser.navigate().forward();
 
browser.navigate().forward();
 
+
browser.sleep(10000);                         // if your test is outrunning the browser
browser.sleep(10000); // if your test is outrunning the browser
+
browser.waitForAngular();                     // if your test is outrunning the browser
 
+
browser.getLocationAbsUrl()                   // get the current address
browser.waitForAngular(); // if your test is outrunning the browser
+
browser.ignoreSynchronization = true;         // If true, Protractor will not attempt to synchronize with the page before performing actions
 
+
browser.findElement(by.name('dog_name'));      // refere to "Find an element by *"
browser.getLocationAbsUrl() // get the current address
+
</pre>
 
 
browser.ignoreSynchronization = true; // If true, Protractor will not attempt to synchronize with the page before performing actions
 
 
 
 
 
```
 
 
 
 
Here's a trick how to wait for something to become present/visible:
 
Here's a trick how to wait for something to become present/visible:
 
+
<pre class="code">
```javascript
 
 
 
 
browser.wait(function() {
 
browser.wait(function() {
 
   return element(by.id('create')).isPresent();
 
   return element(by.id('create')).isPresent();
}, 5000);
+
}, 5000);  
 
 
 
element(by.id('create')).click();
 
element(by.id('create')).click();
```
+
</pre>
 
+
== Visibility ==
#### Check visibility
+
<pre class="code">
 
 
```javascript
 
 
element(by.id('create')).isPresent() // Be careful with this: element is often present while it's not displayed...
 
element(by.id('create')).isPresent() // Be careful with this: element is often present while it's not displayed...
 
 
element(by.id('create')).isEnabled() //Enabled/disabled, as in ng-disabled...
 
element(by.id('create')).isEnabled() //Enabled/disabled, as in ng-disabled...
 
 
element(by.id('create')).isDisplayed() //Is element currently visible/displayed?
 
element(by.id('create')).isDisplayed() //Is element currently visible/displayed?
```
+
</pre>
 
 
#### Find an element by id, model, binding, ...
 
 
 
```javascript
 
element(by.id('user_name'))
 
 
 
element(by.css('#myItem'))
 
 
 
element(by.model('person.name')) // refers to ng-model directive
 
 
 
element(by.binding('person.concatName')); // refers to ng-bind directive
 
  
 +
==Find an element by==
 +
* src: https://www.protractortest.org/#/api?view=ProtractorBy
 +
<pre class="code">
 +
element(by.id('user_name'))                    # <ul id="pet_id"><li id="dog_id">Dog</li></ul>
 +
element(by.css('#myItem'))                      # <ul class="pet"><li class="cat">Cat</li></ul>
 +
element(by.className('dog'));                  # <li class="dog">Dog</li>
 +
element(by.tagName('a'))                        # <a href="http://www.google.com">Google</a>
 +
element(by.model('person.name'))                # refers to ng-model directive
 +
element(by.binding('person.concatName'));      # refers to ng-bind directive
 
element(by.textarea('person.extraDetails'));
 
element(by.textarea('person.extraDetails'));
 
+
element(by.input( 'username' ));
element (by.input( 'username' ));
+
element(by.input( 'username' )).clear();
 
 
element (by.input( 'username' )).clear();
 
 
 
 
element(by.buttonText('Save'));
 
element(by.buttonText('Save'));
 
 
element(by.partialButtonText('Save'));
 
element(by.partialButtonText('Save'));
 
 
element(by.linkText('Save'));
 
element(by.linkText('Save'));
 
 
element(by.partialLinkText('Save'));
 
element(by.partialLinkText('Save'));
 
+
element(by.css('[ng-click="cancel()"]'));
element(by.css('[ng-click="cancel()"]'));  
 
  
 
var dog = element(by.cssContainingText('.pet', 'Dog'));
 
var dog = element(by.cssContainingText('.pet', 'Dog'));
 +
var allOptions = element.all(by.options('c c in colors'));  //When ng-options is used with selectbox
 +
</pre>
  
var allOptions = element.all(by.options('c c in colors')); //When ng-options is used with selectbox
+
==Collection of elements==
```
+
<pre class="code">
 
 
#### Find collection of elements by css, repeater, xpath..
 
 
 
```javascript
 
 
var list = element.all(by.css('.items));
 
var list = element.all(by.css('.items));
 
 
var list2 = element.all(by.repeater('personhome.results'));
 
var list2 = element.all(by.repeater('personhome.results'));
 
 
var list3 = element.all(by.xpath('//div
 
var list3 = element.all(by.xpath('//div
 
 
expect(list.count()).toBe(3);
 
expect(list.count()).toBe(3);
 
 
expect(list.get(0).getText()).toBe('First’)
 
expect(list.get(0).getText()).toBe('First’)
 
 
expect(list.get(1).getText()).toBe('Second’)
 
expect(list.get(1).getText()).toBe('Second’)
 
 
expect(list.first().getText()).toBe('First’)
 
expect(list.first().getText()).toBe('First’)
 
 
expect(list.last().getText()).toBe('Last’)
 
expect(list.last().getText()).toBe('Last’)
```
+
</pre>
 
+
== Send keystrokes==
#### Send keystrokes, clear
+
<pre class="code">
 
 
```javascript
 
 
element(by.id('user_name').sendKeys("user1");
 
element(by.id('user_name').sendKeys("user1");
 
 
sendKeys(protractor.Key.ENTER);
 
sendKeys(protractor.Key.ENTER);
 
 
sendKeys(protractor.Key.TAB);
 
sendKeys(protractor.Key.TAB);
 
 
element(by.id('user_name')).clear()
 
element(by.id('user_name')).clear()
```
+
</pre>
  
#### Position and size, also how to deal with promises:
+
== Position and Size==
 
+
<pre class="code">
```javascript
 
 
element(by.id('item1')).getLocation().then(function(location) {
 
element(by.id('item1')).getLocation().then(function(location) {
 
   var x = location.x;
 
   var x = location.x;
Line 163: Line 119:
 
   var height = size.height;
 
   var height = size.height;
 
});
 
});
```
+
</pre>
 
+
==Jasmine Matchers==
#### Jasmine Matchers
+
<pre class="code">
 
 
```javascript
 
 
to(N­ot)­Be( null | true | false )
 
to(N­ot)­Be( null | true | false )
 
to(N­ot)­Equ­al( value )
 
to(N­ot)­Equ­al( value )
Line 182: Line 136:
 
toBe­Clo­seTo( number, precision )
 
toBe­Clo­seTo( number, precision )
 
toTh­row()
 
toTh­row()
```
+
</pre>

Latest revision as of 17:05, 17 August 2020

Initial

Configuration

src: https://github.com/angular/protractor/blob/master/docs/browser-setup.md#using-headless-chrome

browserName: 'chrome',
chromeOptions: {args: [ "--headless", "--disable-gpu", "--window-size=1100,800" ]},

TimeOuts

configuration file

Protractor  10000 >> getPageTimeout: timeout_in_millis 
Angular	    11000 >> allScriptsTimeout: timeout_in_millis
WebDriver   11000 >> allScriptsTimeout: timeout_in_millis
Jasmine     30000 >> jasmineNodeOpts: {defaultTimeoutInterval: timeout_in_millis}

Individual call

Jasmine	    >>	it(description, testFn, timeout_in_millis)
Protractor  >>	browser.get(address, timeout_in_millis)
Angular	    >>	browser.waitForAngularEnabled(false);
Angular	    >>	browser.waitForAngularEnabled(true);

Protractor API

Control browser

browser.get('yoururl');                        // Load address, can also use '#yourpage'
browser.navigate().back();
browser.navigate().forward();
browser.sleep(10000);                          // if your test is outrunning the browser
browser.waitForAngular();                      // if your test is outrunning the browser
browser.getLocationAbsUrl()                    // get the current address
browser.ignoreSynchronization = true;          // If true, Protractor will not attempt to synchronize with the page before performing actions
browser.findElement(by.name('dog_name'));      // refere to "Find an element by *"

Here's a trick how to wait for something to become present/visible:

browser.wait(function() {
   return element(by.id('create')).isPresent();
}, 5000); 
element(by.id('create')).click();

Visibility

element(by.id('create')).isPresent() // Be careful with this: element is often present while it's not displayed...
element(by.id('create')).isEnabled() //Enabled/disabled, as in ng-disabled...
element(by.id('create')).isDisplayed() //Is element currently visible/displayed?

Find an element by

element(by.id('user_name'))                     # <ul id="pet_id"><li id="dog_id">Dog</li></ul>
element(by.css('#myItem'))                      # <ul class="pet"><li class="cat">Cat</li></ul>
element(by.className('dog'));                   # <li class="dog">Dog</li>
element(by.tagName('a'))                        # <a href="http://www.google.com">Google</a>
element(by.model('person.name'))                # refers to ng-model directive
element(by.binding('person.concatName'));       # refers to ng-bind directive
element(by.textarea('person.extraDetails'));
element(by.input( 'username' ));
element(by.input( 'username' )).clear();
element(by.buttonText('Save'));
element(by.partialButtonText('Save'));
element(by.linkText('Save'));
element(by.partialLinkText('Save'));
element(by.css('[ng-click="cancel()"]'));

var dog = element(by.cssContainingText('.pet', 'Dog'));
var allOptions = element.all(by.options('c c in colors'));  //When ng-options is used with selectbox

Collection of elements

var list = element.all(by.css('.items));
var list2 = element.all(by.repeater('personhome.results'));
var list3 = element.all(by.xpath('//div
expect(list.count()).toBe(3);
expect(list.get(0).getText()).toBe('First’)
expect(list.get(1).getText()).toBe('Second’)
expect(list.first().getText()).toBe('First’)
expect(list.last().getText()).toBe('Last’)

Send keystrokes

element(by.id('user_name').sendKeys("user1");
sendKeys(protractor.Key.ENTER);
sendKeys(protractor.Key.TAB);
element(by.id('user_name')).clear()

Position and Size

element(by.id('item1')).getLocation().then(function(location) {
  var x = location.x;
  var y = location.y;
});

element(by.id('item1')).getSize().then(function(size) {
  var width = size.width;
  var height = size.height;
});

Jasmine Matchers

to(N­ot)­Be( null | true | false )
to(N­ot)­Equ­al( value )
to(N­ot)­Mat­ch( regex | string )
toBe­Def­ine­d()
toBe­Und­efi­ned()
toBe­Nul­l()
toBe­Tru­thy()
toBe­Fal­sy()
to(N­ot)­Con­tain( string )
toBe­Les­sTh­an( number )
toBe­Gre­ate­rTh­an( number )
toBe­NaN()
toBe­Clo­seTo( number, precision )
toTh­row()