Difference between revisions of "IT-SDK-Protractor"
Jump to navigation
Jump to search
(→Initial) |
(→Initial) |
||
| (13 intermediate revisions by the same user not shown) | |||
| Line 5: | Line 5: | ||
* src: http://devhints.io/jasmine | * src: http://devhints.io/jasmine | ||
* src: https://www.linkedin.com/pulse/api-automation-now-made-simple-protractor-sudharsan-selvaraj | * src: https://www.linkedin.com/pulse/api-automation-now-made-simple-protractor-sudharsan-selvaraj | ||
| + | * src: https://www.tutorialspoint.com/protractor/protractor_core_apis.htm | ||
| + | * 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/ | ||
| − | = | + | =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 13: | Line 21: | ||
</pre> | </pre> | ||
| − | = | + | =TimeOuts= |
| − | == | + | configuration file |
| + | <pre class="code"> | ||
| + | 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} | ||
| + | </pre> | ||
| + | Individual call | ||
| + | <pre class="code"> | ||
| + | Jasmine >> it(description, testFn, timeout_in_millis) | ||
| + | Protractor >> browser.get(address, timeout_in_millis) | ||
| + | Angular >> browser.waitForAngularEnabled(false); | ||
| + | Angular >> browser.waitForAngularEnabled(true); | ||
| + | </pre> | ||
| + | |||
| + | =Protractor API= | ||
| + | * src: http://angular.github.io/protractor/#/api | ||
* src: http://www.webdriverjs.com/protractor-element-locators/ | * 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 | ||
| + | |||
| + | ==Control browser== | ||
<pre class="code"> | <pre class="code"> | ||
| − | + | 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 *" | ||
</pre> | </pre> | ||
| − | + | Here's a trick how to wait for something to become present/visible: | |
| − | |||
<pre class="code"> | <pre class="code"> | ||
| − | browser. | + | browser.wait(function() { |
| − | element(##). | + | return element(by.id('create')).isPresent(); |
| − | - | + | }, 5000); |
| + | element(by.id('create')).click(); | ||
| + | </pre> | ||
| + | == Visibility == | ||
| + | <pre class="code"> | ||
| + | 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? | ||
| + | </pre> | ||
| + | |||
| + | ==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.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 | ||
| + | </pre> | ||
| + | |||
| + | ==Collection of elements== | ||
| + | <pre class="code"> | ||
| + | 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’) | ||
| + | </pre> | ||
| + | == Send keystrokes== | ||
| + | <pre class="code"> | ||
| + | element(by.id('user_name').sendKeys("user1"); | ||
| + | sendKeys(protractor.Key.ENTER); | ||
| + | sendKeys(protractor.Key.TAB); | ||
| + | element(by.id('user_name')).clear() | ||
| + | </pre> | ||
| + | |||
| + | == Position and Size== | ||
| + | <pre class="code"> | ||
| + | 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; | ||
| + | }); | ||
</pre> | </pre> | ||
| − | == | + | ==Jasmine Matchers== |
<pre class="code"> | <pre class="code"> | ||
| − | + | to(Not)Be( null | true | false ) | |
| + | to(Not)Equal( value ) | ||
| + | to(Not)Match( regex | string ) | ||
| + | toBeDefined() | ||
| + | toBeUndefined() | ||
| + | toBeNull() | ||
| + | toBeTruthy() | ||
| + | toBeFalsy() | ||
| + | to(Not)Contain( string ) | ||
| + | toBeLessThan( number ) | ||
| + | toBeGreaterThan( number ) | ||
| + | toBeNaN() | ||
| + | toBeCloseTo( number, precision ) | ||
| + | toThrow() | ||
</pre> | </pre> | ||
Latest revision as of 17:05, 17 August 2020
Contents
Initial
- src: http://protractortest.org/#/tutorial
- src: http://jasmine.github.io/
- src: http://jasmine.github.io/2.0/introduction
- src: http://devhints.io/jasmine
- src: https://www.linkedin.com/pulse/api-automation-now-made-simple-protractor-sudharsan-selvaraj
- src: https://www.tutorialspoint.com/protractor/protractor_core_apis.htm
- 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/
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
- src: 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
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(Not)Be( null | true | false ) to(Not)Equal( value ) to(Not)Match( regex | string ) toBeDefined() toBeUndefined() toBeNull() toBeTruthy() toBeFalsy() to(Not)Contain( string ) toBeLessThan( number ) toBeGreaterThan( number ) toBeNaN() toBeCloseTo( number, precision ) toThrow()