Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Protractor under the hood

567 Aufrufe

Veröffentlicht am

ng-japan 2018 https://ngjapan.org/
にてお話しした「Protractor under the hood」の資料です。

angular-cli の e2eテストコマンド ng e2e の裏側で、Protractorがどんな仕組みを作ってテストを実行しているかについてお話ししました。

動画はこちらです。
https://youtu.be/_eMrDsLjIOM?t=13345

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Protractor under the hood

  1. 1. 2018/06/16 (Sat) Protractor under the hood @akirakoyasu
  2. 2. Copyright © 2018 Akira Koyasu. All rights reserved. こんにちは !2
  3. 3. Copyright © 2018 Akira Koyasu. All rights reserved. !3 ✴⾃動翻訳の結果ではありません
  4. 4. Copyright © 2018 Akira Koyasu. All rights reserved. 今⽇のお話 !4
  5. 5. Copyright © 2018 Akira Koyasu. All rights reserved. 今⽇のお話 !4 > ng e2e ↩
  6. 6. Copyright © 2018 Akira Koyasu. All rights reserved. !5
  7. 7. Copyright © 2018 Akira Koyasu. All rights reserved. !5 e eテストに必要なお膳⽴てをしてくれるフレームワーク (Angular専⽤というわけではない)
  8. 8. Copyright © 2018 Akira Koyasu. All rights reserved. テスト実⾏時のコミュニケーション !6 HTTP Server Browser Test
  9. 9. Copyright © 2018 Akira Koyasu. All rights reserved. テスト実⾏時のコミュニケーション !6 HTTP Server Browser Test Phase 0
  10. 10. Copyright © 2018 Akira Koyasu. All rights reserved. テスト実⾏時のコミュニケーション !6 HTTP Server Browser Test Phase 0 Phase 1
  11. 11. Copyright © 2018 Akira Koyasu. All rights reserved. テスト実⾏時のコミュニケーション !6 HTTP Server Browser Test Phase 0 Phase 1 Phase 2
  12. 12. Copyright © 2018 Akira Koyasu. All rights reserved. テスト実⾏時のコミュニケーション !6 HTTP Server Browser Test Phase 0 Phase 1 Phase 2
  13. 13. Copyright © 2018 Akira Koyasu. All rights reserved. !7
  14. 14. Copyright © 2018 Akira Koyasu. All rights reserved. !7 HTTP Server Browser Test
  15. 15. Copyright © 2018 Akira Koyasu. All rights reserved. Phase 0: HTTP Server !8 angular-cliの担当範囲 内部的にはangular-devkit/build-angular ng serve 相当のDevサーバを起動 Ref:
 https://github.com/angular/devkit/blob/v6.0.2/packages/angular_devkit/build_angular/src/protractor/index.ts#L41
 https://github.com/angular/protractor/blob/5.3.2/lib/launcher.ts#L96 Protractorを起動
  16. 16. Copyright © 2018 Akira Koyasu. All rights reserved. Phase 1: Browser !9 Selenium Serverを起動
 またはBrowser Driverを直接起動 ProtractorBrowser(WebDriverの拡張)を
 グローバルスコープに `browser` として登録 Ref:
 https://github.com/angular/protractor/blob/5.3.2/lib/runner.ts#L223
 https://github.com/angular/protractor/blob/5.3.2/lib/runner.ts#L179
  17. 17. Copyright © 2018 Akira Koyasu. All rights reserved. Phase 2: Test !10 テストフレームワークの起動 Ref:
 https://github.com/angular/protractor/blob/5.3.2/lib/runner.ts#L223 テストの実⾏ browser.get(”http://example.com”);
  18. 18. Copyright © 2018 Akira Koyasu. All rights reserved. 再び、テスト実⾏時のコミュニケーション !11
  19. 19. Copyright © 2018 Akira Koyasu. All rights reserved. 再び、テスト実⾏時のコミュニケーション !11 Protractor(WebDriver) API browser.get(”http://example.com”)
  20. 20. Copyright © 2018 Akira Koyasu. All rights reserved. 再び、テスト実⾏時のコミュニケーション !11 WebDriver Protocol POST /session/:session/url
 {”url”: ”http://example.com”}
  21. 21. Copyright © 2018 Akira Koyasu. All rights reserved. 再び、テスト実⾏時のコミュニケーション !11 HTTP Protocol http://example.com
  22. 22. Copyright © 2018 Akira Koyasu. All rights reserved. オプション: Control Browsers !12 Browser Driver Selenium Server SaaS Ref:
 https://github.com/angular/protractor/blob/5.3.2/lib/driverProviders/
  23. 23. Copyright © 2018 Akira Koyasu. All rights reserved. Versions ✤ angular-cli: 6.0.2
 https://github.com/angular/angular-cli/tree/v6.0.2 ✤ protractor: 5.3.2
 https://github.com/angular/protractor/tree/5.3.2 ✤ selenium-webdriver: 3.6.0
 https://github.com/SeleniumHQ/selenium/tree/selenium-3.6.0 ✤ jasmine: 2.8.0
 https://github.com/jasmine/jasmine-npm/tree/v2.8.0 !13
  24. 24. Copyright © 2018 Akira Koyasu. All rights reserved. References ✤ Protractor: 
 https://www.protractortest.org/ ✤ WebDriver Protocol: 
 https://www.w3.org/TR/webdriver/ ✤ Selenium WebDriver: 
 https://www.seleniumhq.org/docs/03_webdriver.jsp ✤ ChromeDriver: 
 http://chromedriver.chromium.org/home ✤ Jasmine: 
 https://jasmine.github.io/ !14
  25. 25. Copyright © 2018 Akira Koyasu. All rights reserved. Thank you! Feedback is welcome 15 https://flic.kr/p/9uf9Qg
  26. 26. Copyright © 2018 Akira Koyasu. All rights reserved. !16 We’re hiring! https://www.wantedly.com/projects/30487

×