Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Testing Angular apps with Protractor

Testing Angular apps with Protractor

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

7c834502d1618bca028fa6cd285ef8db?s=128

Tomohiro Akutsu

June 18, 2017
Tweet

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