Protractor framework – how to make stable e2e tests for Angular applications
-
Upload
ludmila-nesvitiy -
Category
Technology
-
view
56 -
download
0
Transcript of Protractor framework – how to make stable e2e tests for Angular applications
![Page 1: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/1.jpg)
Protractor framework – how to make stable e2e tests for Angular applications
![Page 2: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/2.jpg)
Ludmila NesvitiyQA Automation Engineer
https://github.com/ludmilanesvitiyhttps://ua.linkedin.com/in/[email protected]
![Page 3: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/3.jpg)
Choosing a testing strategy
![Page 4: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/4.jpg)
E2E approach
Separation On reusing components, parts, functions
Describing Each test-case
Writing Easy to read and run
Supporting Easy to support and rewrite
![Page 5: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/5.jpg)
Optimal coverage
quantity e2e / time for runningmanual tests => mindifferent goals = different testing scope
Customer: “Automate everything”
PM:“Automate everything, that you can”
QA:“I can automate everything,
but i know my priorities”
![Page 6: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/6.jpg)
Test-cases priorities
![Page 7: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/7.jpg)
Protractor framework
![Page 8: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/8.jpg)
5 main points
➢ Performance
➢ Stability
➢ Timeouts
➢ Testing different modules
➢ Supporting
![Page 9: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/9.jpg)
Performance
1
![Page 10: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/10.jpg)
Protractor.conf
specs: ['../test/**/*.e2e-spec.ts'],exclude: ['../test/**/needToExclude.e2e-spec.ts'],framework: 'jasmine',allScriptsTimeout: 110000,directConnect: true
![Page 11: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/11.jpg)
multiCapabilities
multiCapabilities: [ {browserName: 'chrome'}, {browserName: 'firefox'}, {browserName: 'internet explorer'}],
![Page 12: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/12.jpg)
shardTestFiles + maxInstances
multiCapabilities: [{ browserName: 'chrome', shardTestFiles: true, maxInstances: 1 }, { browserName: 'firefox', shardTestFiles: true, maxInstances: 3 }, { browserName: 'internet explorer', shardTestFiles: false, maxInstances: 4 }],
![Page 13: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/13.jpg)
count
![Page 14: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/14.jpg)
useAllAngular2AppRoots
![Page 15: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/15.jpg)
Stability
2
![Page 16: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/16.jpg)
onPrepare: function ()
onPrepare: () => { browser.ignoreSynchronization = true; browser.driver.manage().window().maximize(); jasmine.getEnv().addReporter(new SpecReporter());}
![Page 17: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/17.jpg)
Cloud services
const browserstackUser = process.env.BROWSERSTACK_USERNAME;const browserstackKey = process.env.BROWSERSTACK_KEY;
exports.config = { multiCapabilities: [{ 'browserstack.user': browserstackUser, 'browserstack.key': browserstackKey, 'browserName': 'internet explorer', 'browser_version': '10' }]};
![Page 18: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/18.jpg)
PROMISES
![Page 19: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/19.jpg)
Timeouts
3
![Page 20: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/20.jpg)
Wait - how much, why and where?
browser.get(address, timeout); // Default = 10
allScriptsTimeout: timeout; // Default = 11
getPageTimeout: timeout; // Default = 10
browser.sleep(timeout);
EC = protractor.ExpectedConditions;
browser.wait(EC.not(EC.visibilityOf(loader)), 80000); // not / and / or
browser.wait(EC.visibilityOf(menu), timeout);
browser.wait(EC.invisibilityOf(loader), timeout);
![Page 21: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/21.jpg)
Testing different modules
4
![Page 22: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/22.jpg)
Browser.ignoreSynchronization
or
Testing non-angular modules
![Page 23: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/23.jpg)
Window handles, testing Share/Follow buttons
afterEach(() => browser.ignoreSynchronization = false);
it('Check twitter', () => { MatrixPage.hamburgerMenu.click(); MatrixPage.getShareButtonInHamburgerMenu('twitter').click().then(() => { browser.getAllWindowHandles().then((handles: any) => { browser.ignoreSynchronization = true; browser.switchTo().window(handles[1]).then(() => { expect(browser.getCurrentUrl()).toContain('Some URL'); expect(SharePages.inputFieldTwitter.getText()).toContain('Some text and link'); }); browser.switchTo().window(handles[0]); }); });});
![Page 24: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/24.jpg)
Supporting
5
![Page 25: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/25.jpg)
Main reasons of failed tests
Selectors
Waits for loading elements
Incorrect configuration
Lobster
Failures Protractor framework
![Page 26: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/26.jpg)
How to hold of the browser's console?
browser.manage().logs().get('browser').then((browserLog) => { console.log('log: ' + require('util').inspect(browserLog));});
![Page 27: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/27.jpg)
Screenshots with Protractordescribe('Take screenShot', () => { using(DataProvider.allUrls, (data: any, description: string) => { it('from page' + description, () => { browser.get(data.url); const writeScreenShot = (info: any, filename: string) => { let stream = fs.createWriteStream(filename); stream.write(new Buffer(info, 'base64')); stream.end(); }; browser.takeScreenshot().then((png: any) => { writeScreenShot(png, description + '.png'); }); }); });});
![Page 28: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/28.jpg)
Make screenshot for failures
jasmine.getEnv().addReporter(() => { this.specDone = (result: any) => { if (result.failedExpectations.length > 0) { takeScreenShot(); } };});
![Page 29: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/29.jpg)
Tips & Tricks
![Page 30: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/30.jpg)
Protractor + Page Object
Main Page
Login Page
Abstract Page
Test
beforeAll : Login
test: Main Page
using: Abstract Page
![Page 31: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/31.jpg)
export class AbstractPage { public static getEC(): ProtractorExpectedConditions { return protractor.ExpectedConditions; }; public static sendQuery(field: ElementFinder, query: string): any { field.clear().then(() => field.sendKeys(query)); };}
Abstract Page
Login Page
export class LoginPage { public static emailInput: ElementFinder = element(by.id('JobSeekerLogin')); public static passwordInput: ElementFinder = element(by.id('JobSeeker')); public static loginButton: ElementFinder = element(by.id('signin')); public static redirectWindow: ElementFinder = $('.inner-g');
public static login(): any { browser.get('/'); browser.wait(AbstractPage.getEC().inVisibilityOf(this.redirectWindow)), 9000); AbstractPage.sendQuery(this.emailInput, '[email protected]'); AbstractPage.sendQuery(this.passwordInput, 'testPass'); this.loginButton.click();};}
![Page 32: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/32.jpg)
Test
describe('Main page ', () => { beforeAll(() => { LoginPage.login(); });
it('check visibility of elements ', () => { expect(MainPage.personifiedDropDown.isDisplayed()).toBe(false); expect(MainPage.filtersH3.getText()).toEqual('Test String H3'); expect(MainPage.searchButton.isPresent()).toBeTruthy(); });});
![Page 33: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/33.jpg)
Protractor + Page Object + Data Provider
Main Page
Login Page
Abstract Page
Test
beforeAll : Login
test: Main Page
using: Abstract Page
DataProvider
![Page 34: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/34.jpg)
Test
export class DataProvider { public static mainPageBoolean: any = { 'Logo': {element: (): ElementFinder => $('img[src*="Logo."]')}, 'LogOut Button': {element: (): ElementFinder => element(by.id('sign-out-link'))}, 'All Products button': {element: (): ElementFinder => $('a[class*="shopping"]')}, 'Input for keywords': {element: (): ElementFinder => $('input[class*="keyword"]')} };}
const using = require('jasmine-data-provider');describe('Main page ', () => { using(DataProvider.mainPageBoolean, (data: any, description: string) => { it('check visibility of: ' + description, () => { expect(data.element().isDisplayed()).toBe(true); }); });
DataProvider
![Page 35: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/35.jpg)
Checking web-UI data after XLS parsing. -xlsjs- + Protractor
const xlsJs = require('xlsjs');
export class XLS { public static getDataFromXLS(cellId: string): string { let fileNamePath = './example.xls'; let workbook = xlsJs.readFile(fileNamePath); let sheetNumberlist = workbook.SheetNames; return workbook.Sheets[sheetNumberlist['1']][cellId].v; };}
![Page 36: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/36.jpg)
Checking web-UI data after XLS parsing. -xlsjs- + Protractor
const using = require('jasmine-data-provider');const colEn: string = 'A';
describe('Checking countries in language: ', () => { using(DataProvider.countyPageId, (data: any, description: string) => { it('English, country: ' + description, () => { browser.get('country/en' + data.countryId); expect(CountryPage.countryName.getText()).toEqual(description); expect(CountryPage.countryName.getText())
.toEqual(XLS.getDataFromXLS(colEn + data.numberOfCell)); }); });});
![Page 37: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/37.jpg)
Tests for drag&drop checking import { browser, protractor } from 'protractor';import { DropMePage } from '../pages/dropMePage';const dropFile = require('../helpers/dragAndDrop');let EC = protractor.ExpectedConditions;
describe('Drag and Drop Tests: ', () => { beforeAll(() => { browser.ignoreSynchronization = true; browser.get('https://dropfile.to/'); }); it('move files to service and check link as a result', () => { dropFile(DropMePage.inputFieldForImages, 'e2e/data/3.jpg'); DropMePage.startUploadingButton.click(); browser.wait(EC.visibilityOf(DropMePage.urlLoadedImage), 20000); expect(DropMePage.urlLoadedImage.getText()).toContain('https://dropfile.to/'); });});
![Page 38: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/38.jpg)
A few lines of code = many different testsusing(DataProvider.searchKeywordsQuery, (data: any, query: string) => { it('check suggestions in search field by keywords: ' + query, () => { AbstractPage.sendQuery(MainPage.inputKeyword, query); expect(MainPage.suggestionsKeywordsField.count())
.toBe(data.quantitySuggestions);
MainPage.suggestionsKeywordsField.each((suggestion: any) => {
expect(suggestion.isDisplayed()).toBeTruthy(); }); });});
1 it
2 expect
20 tests
11 checks in each test==>
![Page 39: Protractor framework – how to make stable e2e tests for Angular applications](https://reader035.fdocuments.net/reader035/viewer/2022062412/58ce5b251a28ab2f268b49f5/html5/thumbnails/39.jpg)
Questions?http://www.protractortest.org/
https://github.com/angular/protractor
https://github.com/angular/protractor/blob/master/CHANGELOG.md
https://github.com/ludmilanesvitiy/ProtractorExample
https://github.com/ludmilanesvitiyhttps://ua.linkedin.com/in/[email protected]