Protractor? web ui test ??? ??

?Download as PPTX, PDF?

5 likes?3,226 views

GyeongSeok Seo

protractor ??

Web UI Test? ?? ??
? Web UI Test ??
1. Test? Excel, Jira, Confluence?? ? ?? ??
2. IE, Firefox, Chrome�� ? ??
3. Test? n? ??. ? ?? ???
4. ?? ?? PC?? ??. ? ?? ???
5. ?? ?? ??? ?? ?? ??? ? ??? ??
6. ??? ???? ?~? ? ??? ??

???? ???
? ??? ??
1. Test? ??? ?? ? ??
2. IE, Firefox, Chrome��? ? ??? ? ??
3. N??�� ? ?? ?? ?! ? ???
???
4. ??? ??? ?? ? ?? ??
5. ??? ??? ?? ???? ? ?? ??
6. ??? ???? ?~? ? ?? ????

??? ????
?? ?? ??? ????��
? ??? ??? ??? ???��
? ??? ?????��
? ??????? ????��

??? ????
?? ??? ?? ????��
? Javascript? ??? ???? ???��
? Jasmine?? Mocha?? unit-test ???��
? Browser?? ?? ??? ????...

??? Protractor
Unit Test? ???? UI Test? ????~
??? Protractor

Protractor ??
Protractor
? Node.js & Selenium ??? Web UI Test Framework
? Node.js program, built on WebDriverJS
? https://angular.github.io/protractor
? MIT License

Protractor ??
Protractor ??
$ npm install �Cg protractor

Protractor ?? �C ?? ??
Protractor? UI ??? ?? ????
Conf.js �C ??
Spec.js �C ??? ??

Protractor ?? �C ??
Protractor? ??? ????
$ protractor conf.js

Protractor ?? �C ?? ????
- ??? cli? ?? ????�� ??? ????~
- UI ??? ? ??? ??? ?, ??? ?? ????~
- ?? ? ?? ??? ?? ??? ??? ????~
- Jasmin ?? ? Mocha ? ?? ???~
- Unit Test?? ???�� TDD?? ???? ??? ??~
- ??? ??? browser? ???�� ??? ?? ???~

Protractor ?? �C ?? ????
- ??? cli? ?? ????�� ???
????~
- UI ??? ? ??? ??? ?, ??? ??
????~
- ?? ? ?? ??? ?? ??? ???
????~
- Jasmin ?? ? Mocha ? ?? ???~
- Unit Test?? ???�� TDD?? ????
??? ??~
- ??? ??? browser? ???�� ??? ??
???~
? ?? ?? ?????!
?? ?? ??
https://github.com/angular/protractor
???
??
??!
WEB UI TEST?
Protractor

Protractor ?? �C report & screenshot
Protractor html test result & screenshot

Protractor ?? �C ??? ?????
Protractor ?? ??? ??? ??
? Conf.js ? ?? ?
? Spec.js ? ?? ?
? Test ??? ?? ?
? ??? ??? ?? ? ? ???~!!!

Protractor ?? �C JS Unit Test FW
?? ??? ???? Unit Test FW?
??? ?? ???~!!!
? Jasmine, Mocha, Cucumber, And using a custom FW
? ??: https://angular.github.io/protractor/#/frameworks

Protractor ?? �C debugging
Debugging? ?????.
? WebStorm ??? ??.
? ??: https://angular.github.io/protractor/#/debugging

Protractor ?? �C No Browser
Browser? ??
Server ????? ??? ????!

Protractor ?? �C Multiple Browser
?? ???? ?? Browser ??
??? ???? ?????~

Protractor? ??
Protractor? ??? ????��.
??? ?? ???(????? 1? ????)? ????��
Selenium ?? �C WebDriver ?? > ??? ??? ????.
Phantom ??? ?? ?? ??? ???.
????, CI?? ?, ?? ? ??.. ?? ?? ?? ???.

Protractor ????
???? ???��
?? Protractor ????
?? ??? ??? ?????...

Protractor ??
??? ???. ??? ?? ?? ? ????..
??? ??, ??? ??!

Protractor ??
Web UI Test? Unit Test?? ?? ?? ??
???? Protractor ~!!

Protractor ??
?? Browser ?? Web UI Test? ?? ?? ??
???? Protractor ~!!

Protractor ??
?? ??? ??? Web UI Test? ?? ? ??
???? Protractor ~!!

Protractor ????
Q & A
?????.
web team | ??? ??

References
? https://angular.github.io/protractor/#/
? https://github.com/angular/protractor
? https://www.npmjs.com/package/protractor-html-screenshot-reporter
? https://www.npmjs.com/package/protractor-jasmine2-screenshot-reporter
? https://github.com/angular/protractor/blob/master/lib/frameworks/README.md
? https://www.youtube.com/watch?v=N3lzyPd6Xxc
? http://jasmine.github.io/2.2/custom_reporter.html
? http://vorachet.github.io/protractor-build-verification-testreport/

Protractor? web ui test ??? ??

1. Protractor? Web UI TEST ??? ?? web team | ???

2. ??? ??? ???

3. ??? ??? ???

4. Web UI Test? ?? ?? ? Web UI Test ?? 1. Test? Excel, Jira, Confluence?? ? ?? ?? 2. IE, Firefox, Chrome�� ? ?? 3. Test? n? ??. ? ?? ??? 4. ?? ?? PC?? ??. ? ?? ??? 5. ?? ?? ??? ?? ?? ??? ? ??? ?? 6. ??? ???? ?~? ? ??? ??

5. ????? ? ???.. ???? ???��!!!

6. ???? ??? ? ???!

7. ???? ??? ? ??? ?? 1. Test? ??? ?? ? ?? 2. IE, Firefox, Chrome��? ? ??? ? ?? 3. N??�� ? ?? ?? ?! ? ??? ??? 4. ??? ??? ?? ? ?? ?? 5. ??? ??? ?? ???? ? ?? ?? 6. ??? ???? ?~? ? ?? ????

8. ???? ??? ? ??? ???

9. ??? ???? ?? ?? ??? ????�� ? ??? ??? ??? ???�� ? ??? ?????�� ? ??????? ????��

10. ??? ???? ?? ??? ?? ????�� ? Javascript? ??? ???? ???�� ? Jasmine?? Mocha?? unit-test ???�� ? Browser?? ?? ??? ????...

11. ??? Protractor Unit Test? ???? UI Test? ????~ ??? Protractor

12. Protractor ?? Protractor ? Node.js & Selenium ??? Web UI Test Framework ? Node.js program, built on WebDriverJS ? https://angular.github.io/protractor ? MIT License

13. Protractor ?? Protractor ?? $ npm install �Cg protractor

14. Protractor ?? �C ?? ?? Protractor? UI ??? ?? ???? Conf.js �C ?? Spec.js �C ??? ??

15. Protractor ?? �C ?? ?? Protractor? UI ??? ?? ???? Conf.js �C ?? Spec.js �C ??? ??

16. Protractor ?? �C ?? ?? Protractor? UI ??? ?? ???? Conf.js �C ?? Spec.js �C ??? ??

17. Protractor ?? �C ?? Protractor? ??? ???? $ protractor conf.js

18. Protractor ?? �C ?? ???? - ??? cli? ?? ????�� ??? ????~ - UI ??? ? ??? ??? ?, ??? ?? ????~ - ?? ? ?? ??? ?? ??? ??? ????~ - Jasmin ?? ? Mocha ? ?? ???~ - Unit Test?? ???�� TDD?? ???? ??? ??~ - ??? ??? browser? ???�� ??? ?? ???~

19. Protractor ?? �C ?? ???? - ??? cli? ?? ????�� ??? ????~ - UI ??? ? ??? ??? ?, ??? ?? ????~ - ?? ? ?? ??? ?? ??? ??? ????~ - Jasmin ?? ? Mocha ? ?? ???~ - Unit Test?? ???�� TDD?? ???? ??? ??~ - ??? ??? browser? ???�� ??? ?? ???~ ? ?? ?? ?????! ?? ?? ?? https://github.com/angular/protractor ??? ?? ??! WEB UI TEST? Protractor

20. Protractor ?? �C report & screenshot Protractor html test result & screenshot

21. Protractor ?? �C ??? ????? Protractor ?? ??? ??? ?? ? Conf.js ? ?? ? ? Spec.js ? ?? ? ? Test ??? ?? ? ? ??? ??? ?? ? ? ???~!!!

22. Protractor ?? �C JS Unit Test FW ?? ??? ???? Unit Test FW? ??? ?? ???~!!! ? Jasmine, Mocha, Cucumber, And using a custom FW ? ??: https://angular.github.io/protractor/#/frameworks

23. Protractor ?? �C debugging Debugging? ?????. ? WebStorm ??? ??. ? ??: https://angular.github.io/protractor/#/debugging

24. Protractor ?? �C No Browser Browser? ?? Server ????? ??? ????!

25. Protractor ?? �C Multiple Browser ?? ???? ?? Browser ?? ??? ???? ?????~

26. Protractor? ?? Protractor? ??? ????��. ??? ?? ???(????? 1? ????)? ????�� Selenium ?? �C WebDriver ?? > ??? ??? ????. Phantom ??? ?? ?? ??? ???. ????, CI?? ?, ?? ? ??.. ?? ?? ?? ???.

27. Protractor ???? ???? ???�� ?? Protractor ???? ?? ??? ??? ?????...

28. Protractor ?? ??? ???. ??? ?? ?? ? ????.. ??? ??, ??? ??!

29. Protractor ?? Web UI Test? Unit Test?? ?? ?? ?? ???? Protractor ~!!

30. Protractor ?? ?? Browser ?? Web UI Test? ?? ?? ?? ???? Protractor ~!!

31. Protractor ?? ?? ??? ??? Web UI Test? ?? ? ?? ???? Protractor ~!!

32. Protractor ???? Q & A ?????. web team | ??? ??

33. References ? https://angular.github.io/protractor/#/ ? https://github.com/angular/protractor ? https://www.npmjs.com/package/protractor-html-screenshot-reporter ? https://www.npmjs.com/package/protractor-jasmine2-screenshot-reporter ? https://github.com/angular/protractor/blob/master/lib/frameworks/README.md ? https://www.youtube.com/watch?v=N3lzyPd6Xxc ? http://jasmine.github.io/2.2/custom_reporter.html ? http://vorachet.github.io/protractor-build-verification-testreport/

Editor's Notes

#3: ??? ?? Web team ?? ??? ????. Html, css, javascript, node ?? ?? ???..
#4: ??? ?? ????? �C ????, ????, ??, ??
#5: page3 - UI ???? ?? ???? ?? ?? -> ??? ??... ?? - Web UI ? ??? ?? (???? ???...) 1. Test ??? ??? ????. (Excel, Jira, etc...) ? ?? ?? 2. OH-NO~��. ?? ??��. ? ?? IE, Firefox, Chrome ?... ??? ?? n? ?? test ??... 3. ?? Test case ? n? (????....) ?? ? ? ?? ??? 4. ?? ?? PC?? ???? ????. (?? ???...??? ???? ???...) ? ?? ??? 5. ?? ???? ??? ? ??? ?? ?? ??? ???? ??. (?? ????...!!!) ? ??? ?? ??? ???? ????.. ???... ??..., ????? ???? ????? 6. ???? ??? ??? ?? ??.....? 7. ?? ??? ?? ?? ????. ???? ???.... ? (?????)
#7: ??? ?? ??? ???~!! (autumation ?? ????..)
#8: ??? ????? ??? 1. Test? ??? ?? - ?? or ??? ???? ?? ?? - ?? ?? Or Unit test ??? ?? ?? ??. 2. ?? ??? ?? ???.. - ?? ??? ?... (???? ???..~!!) 3. n??... ??? ????..~!!, ??? ???.. (??? ???? ??? ?? ??..) 4. ??? ??? ??? ???~!!, ??? ?? (??? ??? ??..) - ??? ??(?? pc - ? ??? ?? - ??) 5. ????, ?? ????, ?? ???? ?? ??? ???.. (???? ..... ???? ??...) 6. ???? ??... 7. ??? ??? ? ???~, ?? ?? ??.. anytime (anytime ??? ?? ???...) ??? ?? ?? ??...
#9: ?? ??? ?? ??? ??? ?? �C ?? ???.. ???, ??? ????? ??? ??? ???? ??? ??? ?? ???? ????.. https://en.wikipedia.org/wiki/List_of_GUI_testing_tools
#10: ??? ????... ??? framewor? ??. ?? ???? ???? ???.. 1. ??? ?? - ??? ?? - ????.. ???? ?... 2. ??? ?? - ??? ?? ?? 3. ??? ?? - ?? ??? ?? 4. ??? ?? - ?? ??? ?? 5. ???? - ? ?? ??? ????? (?? ??? ?? ??..)
#11: ???? ???? ???? ????... ???? ?? ????... 1. browser ?? ?? x ???? ????.. 2. unit-test ?? ??? ?? ? ? ????.
#12: ??? unit test? ?? ?? UI test? ?? ??~ ??? protractor~!
#13: page12 - protractor ?? 1. ???? ??(webdriver)? UI ??? F/W 2. ?? ?? 1. angular JS ? ?? ????, node ?? 2. ???? 3. ?? 4. git ?? ?..
#14: page13 - protractor ?? ?????? - node, java, npm 3??? ???? ?? ??~ $ npm install �Cg protractor ? ?? $ webdriver-manager update ? ???? $ webdriver-manager start ? ??
#15: page14 - protractor ?? - ?? ?? config.js (??) - ?? ?? ? ?? ?? - ?? ???. - , js unit - test ?? ?? ??? ??. spec.js (???) - ?? ??? ?? - ???? ?? ?? ? ?? ?? - ?? ???. ?? ?? - ??? ??, ??? ?? UI ???? ?? ? ???....
#16: page14 - protractor ?? - ?? ?? config.js (??) - ?? ?? ? ?? ?? - ?? ???. - , js unit - test ?? ?? ??? ??. spec.js (???) - ?? ??? ?? - ???? ?? ?? ? ?? ?? - ?? ???. ?? ?? - ??? ??, ??? ?? UI ???? ?? ? ???....
#17: page14 - protractor ?? - ?? ?? config.js (??) - ?? ?? ? ?? ?? - ?? ???. - , js unit - test ?? ?? ??? ??. spec.js (???) - ?? ??? ?? - ???? ?? ?? ? ?? ?? - ?? ???. ?? ?? - ??? ??, ??? ?? UI ???? ?? ? ???....
#18: protractor ?? - ???~~~ protractor conf.js ? ??~!! (protractor ? ??~~ ? ??) ?? ?? (???? ??.)
#19: protractor ?? - ?? ???? (????) (??? - ????) - ??? cli?? ?? ?????... ??? ???? Html? ???? ???... (? - ????) - UI ???? ??? ????, ?? ??? ????? ?? ??? (? - ????) - ??? ?? ??? ?? ???? ??? ???? ??? (? - ????) - js unit test fs ? jasmine? ???? (? - ????) - unit test?? ???...TDD?? ??? ????? (? - ????) - ??? ??? chrome ?? firefox?? ?? ????? ??. ?? os??.. ????? ????? (? - ????) - ?? ??? ??? ??? (?? ??? ??? ?? ???? ?? ?? ????...)? protractor ?? - ? ???? ?????~!! (????? ???? 29,900 ?~!! ??....)
#20: protractor ?? - ?? ???? (????) (??? - ????) - ??? cli?? ?? ?????... ??? ???? Html? ???? ???... (? - ????) - UI ???? ??? ????, ?? ??? ????? ?? ??? (? - ????) - ??? ?? ??? ?? ???? ??? ???? ??? (? - ????) - js unit test fs ? jasmine? ???? (? - ????) - unit test?? ???...TDD?? ??? ????? (? - ????) - ??? ??? chrome ?? firefox?? ?? ????? ??. ?? os??.. ????? ????? (? - ????) - ?? ??? ??? ??? (?? ??? ??? ?? ???? ?? ?? ????...)? protractor ?? - ? ???? ?????~!! (????? ???? 29,900 ?~!! ??....)
#21: protractor ?? - html? ?? ???, ?? ???? ??? ??? ??? ???? ?? ???? ???? ?? ?? ???? ??? function ?? ???? ???.. browser.takeScreenshot().then(function (png) { writeScreenShot(png, 'exception.png'); }); https://www.npmjs.com/package/protractor-jasmine2-screenshot-reporter ??. Jasmine?? ???? html report ? ?? ?? ?? ???? ???? ??? ??. ?? node app?? ??? ? ?? ?? ?? https://www.youtube.com/watch?v=N3lzyPd6Xxc ??.
#22: protractor ?? - ?? ??? ????? ?? conf.js? ???? ????.. ?? spec.js? ???? ????.. ?? test?? (??)? ???? ????.. ??? ??? ?? ? ? ???~~!!!
#23: protractor ?? - js unit test - jasmin, mocha, custom(junit..) ?? ??? ???? unit test??? ??? ?? ???~!!
#24: page21 - protractor ?? - debug ??? ??~ TDD??.. unit test?? ??? debug??~~
#25: protractor ?? - ???? ??? ??.. phantom ??? ?? ?? phantom ?? ?? ???? ? ??: https://angular.github.io/protractor/#/browser-setup
#26: ??: https://angular.github.io/protractor/#/browser-setup
#27: protractor? ??? ????...... ????? ???? ????.... (?? ??)... selenium ?? - webdriver?? > ??? ???? ?? phantom ??? ?? ?? ??? ??. ????, CI??, test?? ?? (????...<-- ????? ???....)
#29: ?? ???...???... ??? ?? ???? ????~~ ??? ??~~!!
#30: Web UI ???? Unit ??? ??? ???? Protractor~!
#31: ?? ?? ?? browser ?? Web UI ???? ?? ???. ???? Protractor~!
#32: ?? ??? ?? Web UI test ? ????. ??? ? ??? ??.... Web UI test ~!! ?? ... Protractor? ??? ???... ??? ????. ???? ??? ??~!!!
#33: Q & A , ?????. (???? - ??? ???... ?)

�ݺ�ߣ

Protractor? web ui test ??? ??

More Related Content

Protractor? web ui test ??? ??

Editor's Notes