Download to read offline
![[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)](https://cdn.slidesharecdn.com/ss_thumbnails/day4-131216014011-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[NEXT] Android Profiler 사용법](https://cdn.slidesharecdn.com/ss_thumbnails/day6profiler150810-150811041218-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[IGC 2016] 엔씨소프트 김종원 - 모바일 테스트 자동화 시스템](https://cdn.slidesharecdn.com/ss_thumbnails/3-161009030553-thumbnail.jpg?width=640&height=640&fit=bounds)
![[115] clean fe development_윤지수](https://cdn.slidesharecdn.com/ss_thumbnails/115cleanfedevelopment-161023163916-thumbnail.jpg?width=640&height=640&fit=bounds)
![[143]Inside fuse deview 2016](https://cdn.slidesharecdn.com/ss_thumbnails/insidefuse-deview2016-161023163118-thumbnail.jpg?width=640&height=640&fit=bounds)
![[145]5년간의네이버웹엔진개발삽질기그리고 김효](https://cdn.slidesharecdn.com/ss_thumbnails/1455-161023163929-thumbnail.jpg?width=640&height=640&fit=bounds)
![[오픈소스컨설팅]Jira 한글패치가이드 1](https://cdn.slidesharecdn.com/ss_thumbnails/jira-1-160525091448-thumbnail.jpg?width=640&height=640&fit=bounds)
![[140315 박민근] 젠킨스를 이용한 자동빌드 시스템 구축하기(ci)](https://cdn.slidesharecdn.com/ss_thumbnails/140315ci-140316225706-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[112]rest에서 graph ql과 relay로 갈아타기 이정우](https://cdn.slidesharecdn.com/ss_thumbnails/112restgraphqlrelay-161023161032-thumbnail.jpg?width=640&height=640&fit=bounds)
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 –g protractor
- 14. Protractor 사용 –코드 작성 Protractor로 UI 테스트 코드 작성하기 Conf.js – 설정 Spec.js – 테스트 코드
- 15. Protractor 사용 –코드 작성 Protractor로 UI 테스트 코드 작성하기 Conf.js – 설정 Spec.js – 테스트 코드
- 16. Protractor 사용 –코드 작성 Protractor로 UI 테스트 코드 작성하기 Conf.js – 설정 Spec.js – 테스트 코드
- 17. Protractor 사용 –실행 Protractor로 테스트 실행하기 $ protractor conf.js
- 18. Protractor 사용 –추가 요구사항 - 결과가 cli로 그냥 나오는데… 예쁘게 나왔으면~ - UI 테스트 중 문제가 생겼을 때, 상황을 캡쳐 해줬으면~ - 개발 중 나랑 연관된 일부 기능만 테스트 하였으면~ - Jasmin 말고 난 Mocha 를 쓰고 싶은데~ - Unit Test처럼 된다면… TDD처럼 사용하는 형태도 될까~ - 테스트 서버는 browser가 없는데… 테스트 가능 했으면~
- 19. Protractor 사용 –추가 요구사항 - 결과가 cli로 그냥 나오는데… 예쁘게 나왔으면~ - UI 테스트 중 문제가 생겼을 때, 상황을 캡쳐 해줬으면~ - 개발 중 나랑 연관된 일부 기능만 테스트 하였으면~ - Jasmin 말고 난 Mocha 를 쓰고 싶은데~ - Unit Test처럼 된다면… TDD처럼 사용하는 형태도 될까~ - 테스트 서버는 browser가 없는데… 테스트 가능 했으면~ 이 모든 것이 가능합니다! 무료 코드 얻기 https://github.com/angular/protractor 폭넓은 보장 무료! WEB UI TEST엔 Protractor
- 20. Protractor 사용 –report & screenshot Protractor html test result & screenshot
- 21. Protractor 사용 –일부만 테스트하기 Protractor 일부 기능만 테스트 하기 • Conf.js 를 여러 개 • Spec.js 를 여러 개 • Test 서버를 여러 개 • 운영의 문제로 해결 할 수 있어요~!!!
- 22. Protractor 사용 –JS Unit Test FW 현재 팀에서 사용중인 Unit Test FW을 그대로 써도 됩니다~!!! • Jasmine, Mocha, Cucumber, And using a custom FW • 참고: https://angular.github.io/protractor/#/frameworks
- 23. Protractor 사용 –debugging Debugging도 가능합니다. • WebStorm 연동도 되요. • 참고: https://angular.github.io/protractor/#/debugging
- 24. Protractor 사용 –No Browser Browser가 없는 Server 환경에서도 테스트 가능해요!
- 25. Protractor 사용 –Multiple Browser 같은 테스트를 여러 Browser 에서 한번에 테스트도 가능합니다~
- 26. Protractor는 갑? Protractor가 만능은아니에요…. 알파고 에게 아자황(기계제국의 1호 앞잡이?)이 필요하듯… Selenium 기반 – WebDriver 사용 > 동일한 약점을 가져가요. Phantom 연동의 경우 아직 문제가 많아요. 환경구성, CI연동 등, 설정 할 것들.. 배울 것이 많이 있어요.
- 27. Protractor 전문가? 여기까지 봤으면… 나도Protractor 전문가? 사실 공부할 것들이 존재합니다...
- 28. Protractor 정리 언제나 그렇듯.하나의 길만 있는 건 아니에요.. 정답이 아닌, 선택의 문제!
- 29. Protractor 정리 Web UITest를 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 발표자 소개 좋아하는거 – 야구보기, 스타트렉, 영화, 게임
- #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 기존 그래픽 기반 자동화 테스트 소개 – 너무 많아요.. 그리고, 새로운 스크립트나 언어를 배워야 하거나? 이미지 기반의 툴은 정확도가 떨어져요.. 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 –g 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 , 감사합니다. (우정출현 - 사진속 사람들... ㅋ)