Testing Angular apps with Protractor

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! -