Difference between revisions of "IT-SDK-Protractor"

From wiki.samerhijazi.net
Jump to navigation Jump to search
(XXX)
(Find an element by id, model, binding)
Line 67: Line 67:
 
</pre>
 
</pre>
  
==Find an element by id, model, binding==
+
==Find an element by *==
 
<pre class="code">
 
<pre class="code">
 
element(by.id('user_name'))
 
element(by.id('user_name'))
 
element(by.css('#myItem'))
 
element(by.css('#myItem'))
element(by.model('person.name')) // refers to ng-model directive
+
element(by.model('person.name'))             // refers to ng-model directive
element(by.binding('person.concatName')); // refers to ng-bind 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'));
Line 82: Line 82:
 
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
+
var allOptions = element.all(by.options('c c in colors')); //When ng-options is used with selectbox
 
</pre>
 
</pre>
 +
 
==Collection of elements==
 
==Collection of elements==
 
<pre class="code">
 
<pre class="code">

Revision as of 12:24, 28 July 2020

Initial

Browser

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" ]},

Element

By

- by.css
- by.xpath
- by.partialLinkText
- by.name
- by.tagName
- by.cssContainingText
- by.className

##

src:

browser.findElement(by.name('dog_name'));
element(##).
- 

Expect

- expect($ELEMENT).toBe($VALUE);

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

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'))
element(by.css('#myItem'))
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()