Testing Angular apps with Protractor

angularを使用したwebアプリケーションにおけるE2Eテストに関するスライドです。また、こちらは2017年6月16日に行われたD-cubeの資料となっています。

Transcript

1. Testing ɹngular apps with Protractor June 2017 v.1.0.0 Tomohiro Akutsu Front-end Engineer BizReach, Inc. June 16 2017 @Bizreach, Inc.
2. Introduce Myself - ࣗݾ঺հ -
3. ## Introduce Myself Tomohiro Akutsu Ѩٱ௡
   ஐେ @TomohiroAkutsu HRMOS Div. BizReach, Inc. Front-end Engineer
4. Introduce Our Product - )3.04ͷ঺հ -
5. ## Introduce Our Product https://hrmos.co/
6. Agenda - ຊ೔͓࿩͢Δ͜ͱ -
7. ## Agenda ### E2E Testing and Protractor ### Install and Setup ### API/Usage ### Resource of Learning 1SPUSBDUPSͷ֓ཁ 1SPUSBDUPSͷΠϯετʔϧɺ$POGKTͷهड़ ༻ҙ͞Ε͍ͯΔ"1*΍ه๏ ࠓޙɺΑΓ஌ࣝΛਂΊΔ͋ͨͬͯ
8. Do not Talk - ຊ೔͓࿩͠ͳ͍͜ͱ -
9. ## Do not Talk ### Unit Testing of Front-end ### Comparison with Other Testing Framework ϑϩϯτΤϯυʹ͓͚ΔϢχοτςετ ଞͷςετπʔϧͱͷൺֱݕ౼
10. E2E Testing and Protractor - Protractorͷ֓ཁ -
11. ## Introduce Protractor http://www.protractortest.org/#/
12. ## Introduce Protractor https://github.com/angular/protractor
13. ## Overview of Protractor ɾ1SPUSBDUPS͸
    ෼౓ث
    ͷҙຯΛ࣋ͭ
    ɾͪͳΈʹBOHVMBS͸
    ֯ͷ͋Δ
    Έ͍ͨͳҙຯ
    ɾBOHVMBS ֯ Λςετ ଌΔ ͢Δ1SPUSBDUPS ෼౓ث
    ɾ/PEFKT͔Β4FMFOJVNΛѻ͏ϥΠϒϥϦͱͯ͠8FC%SJWFS+4Λར༻
14. ## Built on top of WebDriverJS https://www.thoughtworks.com//insights/blog/testing-angularjs-apps-protractor
15. Install and Setup - ProtractorͷΠϯετʔϧɺConf.jsͷهड़ -
16. ## Install OQNͰ1SPUSBDUPSΛΠϯετʔϧ npm install protractor QSPUSBDUPS
    XFCESJWFSNBOBHFSίϚϯυ͕࢖͑ΔΑ͏ʹͳΔɻ 4FMFOJVN΍8FC%SJWFSΛϩʔΧϧ؀ڥ΁Πϯετʔϧ webdriver-manager update αʔόʔͷىಈ webdriver-manager start IUUQMPDBMIPTUXEIVC
    ΁ͷΞΫηε͕ՄೳʹͳΔɻ
17. ## Example QBDLBHFKTPOͷTDSJQUT಺ʹهड़ “scripts”: { … “test”: “protractor ./test/protractor/conf.js”, “webdriver”: “webdriver-manager update && webdriver-manager start”, … } ίϚϯυͰςετͷ࣮ߦ͕Մೳɻ஫ҙͱͯ͠͸ͦΕͧΕผλϒͰ։͘͜ͱɻ
18. ## Setup DPOGKTʹ֤छઃఆΛهड़ɹhttps://github.com/angular/protractor/blob/master/lib/config.ts export.config = { seleniumAddress: ‘http://localhost:4444/wd/hub’, capabilities: { ‘browserName’: ‘chrome’ }, specs: [spec.js], baseUrl: ‘http://localhost:9000/’, jasminNodeOpts: { showColors: true, defaultTimeoutInterval: 30000 } };
19. API/Usage - ༻ҙ͞Ε͍ͯΔAPI΍ه๏ -
20. Basic Example - spec.jsͷجຊతͳߏจ -
21. ## Basic Example spec.js describe(‘this test description is Hoge.’, function() { it(‘Fuga in Hoge’, function() { browser.get(‘https://angular.io/’); expect(browser.getTitle()).toEqual(‘Angular Docs’); }); it(‘Piyo in Hoge’, function() { … }); });
22. Global Variables - άϩʔόϧม਺ -
23. ## browser browser.get(‘url’) var baseUrl = ‘http://localhost:3000’; … browser.get(baseUrl + ‘/path/’); expect(browser.getTitle()).toEqual(‘This page title is Hoge’); browser.waitForAngular() browser.waitForAngular();
24. ## element, by <p class=“name”>My name is {{person.name}}.</p> <input type=“text” ng-model=“person.name”> var input = element(by.model(‘person.name’)); input.sendKeys(‘Tomohiro’); expect(element(by.css(‘p.name’)).getText()).toEqual(‘…is Tomohiro.’); element(by.model(‘modelName’)); <ul> <li>Blue</li> <li>Green</li> <li>Yellow</li> </ul> var yellow = element(by.cssContainingText(‘li’, ‘Yellow’)); element(by.cssContainingText(‘cssSelector’, ‘searchString’));
25. ## element, by <ul ng-repeat=“item in items”> <li>{{item.name}}</li> </ul> element(by.repeater(‘item in items’)).row(0).column(‘name’); element(by.repeater(‘repeatDescriptor’)); <a href=“url” class=“button”>Click</a> var button = element(by.className(‘button’)); expect(button.getText()).toEqual(‘Click’); button.click(); element(by.className(‘className’));
26. Handling Events - Πϕϯτͷॲཧ -
27. ## Handling Events .click(); <button ng-click=“submit()”>submit</button> element(by.css(‘[ng-click=“submit()”]’)).click(); sendKeys(); var inputMail = element(by.model(‘modelName’)); inputText.sendKeys(‘hoge@xxxx.com’, protractor.Key.ENTER);
28. Resource of Learning - ࠓޙΑΓ஌ࣝΛਂΊΔ͋ͨͬͯ -
29. ## Resource of Learning ɾެࣜυΩϡϝϯτ
    ɾ(JU)VC
    ɾ1SPUSBDUPS
    "OHVMBS+4ͷ࣍ੈ୅&&ςετϑϨʔϜϫʔΫ
    ɾ"OHVMBS+4ʹ&&ςετ؀ڥͱͯ͠1SPUSBDUPSΛಋೖ͢Δɻ
30. Thank You for Listening. - Let’s Work Together! -