4. Web UI Test를 하는 과정
• Web UI Test 하기
1. Test가 Excel, Jira, Confluence에? 관리 불편
2. IE, Firefox, Chrome… 반복
3. Test를 n빵 해서. 결국 사람이
4. 각자 본인 PC에서 수행. 환경 불일치
5. 내가 하면 성공? 니가 하면 실패? 감정의 존재
6. 오늘은 테스트의 날~? 간격의 문제
7. 해결책은 자동화
• 자동화 하면
1. Test를 코드로 작성 관리
2. IE, Firefox, Chrome…? 는 기계가 반복
3. N빵은… 밥 먹고 하는 것! 기계야
일해라
4. 언제나 동일한 환경 환경 일치
5. 테스트 결과는 항상 동일해요 감정 없음
6. 오늘은 테스트의 날~? 언제 어디서나
12. Protractor 소개
Protractor
Node.js & Selenium 기반의 Web UI Test Framework
Node.js program, built on WebDriverJS
https://angular.github.io/protractor
MIT License
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
24. Protractor 사용 – No Browser
Browser가 없는
Server 환경에서도 테스트 가능해요!
25. Protractor 사용 – Multiple Browser
같은 테스트를 여러 Browser 에서
한번에 테스트도 가능합니다~
26. Protractor는 갑?
Protractor가 만능은 아니에요….
알파고 에게 아자황(기계제국의 1호 앞잡이?)이 필요하듯…
Selenium 기반 – WebDriver 사용 > 동일한 약점을 가져가요.
Phantom 연동의 경우 아직 문제가 많아요.
환경구성, CI연동 등, 설정 할 것들.. 배울 것이 많이 있어요.
발표자 소개
Web team 에서 일하고 있습니다. Html, css, javascript, node 등을 하고 있어요..
발표자 소개
좋아하는거 – 야구보기, 스타트렉, 영화, 게임
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. 모든 팀원이 마음 먹고 시간내서. 테스트를 돌리는.... (대청소??)
우리의 극복 방안은 자동화~!! (autumation 관련 이미지들..)
문제가 해결되는걸 보여줌
1. Test를 코드로 작성 - 주석 or 테스트 이름으로 구분 가능 - 소스 코드 Or Unit test 코드와 같이 관리 가능.
2. 수가 많아도 문제 없어요.. - 나만 아니면 됨... (기계님이 해주심..~!!)
3. n빵은... 밥먹고 하느거죠..~!!, 기계야 일해라.. (인간이 컴퓨터를 채찍질 하는 사진..)
4. 언제나 동일한 환경이 되어요~!!, 고정된 환경 (테스트 환경의 일치..) - 테스트 서버(혹은 pc - 에 고정된 모습 - 사진)
5. 동일환경, 동일 코드에서, 동일 테스트는 항상 결과가 같아요.. (감정없는 ..... 기계적인 그림...)
6. 팀장님의 신뢰...
7. 언제든 돌려볼 수 있어요~, 업무 중간 중간.. anytime (anytime 광고? 사진 같은거...)
잡았다 요놈 그림 이용...
기존 그래픽 기반 자동화 테스트 소개 – 너무 많아요..
그리고, 새로운 스크립트나 언어를 배워야 하거나? 이미지 기반의 툴은 정확도가 떨어져요..
https://en.wikipedia.org/wiki/List_of_GUI_testing_tools
그래도 힘들어요...
테스팅 framewor이 많다. 막상 선택하면 사용하기 힘들고..
1. 그래픽 기반 - 픽셀에 민감 - 테스트가.. 거짓말을 함...
2. 그래픽 기반 - 속도가 너무 느림
3. 그래픽 기반 - 코드 작성이 복잡
4. 그래픽 기반 - 설치 과정이 복잡
5. 셀레니움 - 또 너무 많은걸 배워야함? (진짜 넣을지 고민 필요..)
하다보니 사용하기 불편한건 마찬가지...
이런것도 되면 좋겠어요...
1. browser 띄울 필요 x 테스트가 되었으면..
2. unit-test 작성 하듯이 작성 할 수 있었으면.
표어?
unit test를 작성 하듯 UI test를 작성 하자~
그래서 protractor~!
page12 - protractor 소개
1. 셀레니움 기반(webdriver)의 UI 테스트 F/W
2. 홈피 주소
1. angular JS 을 위해 만들어짐, node 기반
2. 라이선스
3. 버전
4. git 주소 등..
page13 - protractor 설치
스크린샷으로 - node, java, npm 3가지만 기억하면 설치 완료~
$ npm install –g protractor 설치
$ webdriver-manager update 업데이트
$ webdriver-manager start 실행
page14 - protractor 사용 - 코드 작성
config.js (설정) - 전체 내용 볼 필요 없음 - 중요 내용만. - , js unit - test 처럼 작성 가능은 강조.
spec.js (테스트) - 실제 테스트 코드 - 동일하게 전체 내용 볼 필요 없음 - 중요 내용만.
가장 핵심 - 이것만 알면, 당신도 이제 UI 테스트를 만들 수 있어요....
page14 - protractor 사용 - 코드 작성
config.js (설정) - 전체 내용 볼 필요 없음 - 중요 내용만. - , js unit - test 처럼 작성 가능은 강조.
spec.js (테스트) - 실제 테스트 코드 - 동일하게 전체 내용 볼 필요 없음 - 중요 내용만.
가장 핵심 - 이것만 알면, 당신도 이제 UI 테스트를 만들 수 있어요....
page14 - protractor 사용 - 코드 작성
config.js (설정) - 전체 내용 볼 필요 없음 - 중요 내용만. - , js unit - test 처럼 작성 가능은 강조.
spec.js (테스트) - 실제 테스트 코드 - 동일하게 전체 내용 볼 필요 없음 - 중요 내용만.
가장 핵심 - 이것만 알면, 당신도 이제 UI 테스트를 만들 수 있어요....
protractor 사용 - 런런런~~~
protractor conf.js 로 실행~!! (protractor 로 실행~~ 을 강조)
실행 결과 (스크린샷 이용.)
protractor 사용 - 추가 요구사항 (상황극?)
(팀장님 - 사진사용) - 결과가 cli상에 그냥 떨어지는데... 이쁘게 떨어지고 Html로 떨어지면 좋겠어...
(오 - 사진사용) - UI 테스트중 문제가 생겼을때, 문제 상황을 캡쳐해주면 좋지 않나?
(김 - 사진사용) - 개발중 나랑 연관된 일부 기능들만 테스트 하는것도 되니?
(배 - 사진사용) - js unit test fs 이 jasmine이 아니면?
(황 - 사진사용) - unit test처럼 된다면...TDD처럼 사용도 가능할까?
(박 - 사진사용) - 테스트 서버는 chrome 이나 firefox같은 실제 브라우저가 없어. 서버 os라서.. 그런데서도 가능할까?
(서 - 사진사용) - 서버 분리의 의미가 모지? (혹은 모바일 지원등 여러 브라우저 지원 관련 내용으로...)?
protractor 사용 - 이 모든것이 가능합니다~!! (홈쇼핑에서 이모든게 29,900 원~!! 하듯....)
protractor 사용 - 추가 요구사항 (상황극?)
(팀장님 - 사진사용) - 결과가 cli상에 그냥 떨어지는데... 이쁘게 떨어지고 Html로 떨어지면 좋겠어...
(오 - 사진사용) - UI 테스트중 문제가 생겼을때, 문제 상황을 캡쳐해주면 좋지 않나?
(김 - 사진사용) - 개발중 나랑 연관된 일부 기능들만 테스트 하는것도 되니?
(배 - 사진사용) - js unit test fs 이 jasmine이 아니면?
(황 - 사진사용) - unit test처럼 된다면...TDD처럼 사용도 가능할까?
(박 - 사진사용) - 테스트 서버는 chrome 이나 firefox같은 실제 브라우저가 없어. 서버 os라서.. 그런데서도 가능할까?
(서 - 사진사용) - 서버 분리의 의미가 모지? (혹은 모바일 지원등 여러 브라우저 지원 관련 내용으로...)?
protractor 사용 - 이 모든것이 가능합니다~!! (홈쇼핑에서 이모든게 29,900 원~!! 하듯....)
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 참고.
protractor 사용 - 일부 기능만 테스트하기 기능
conf.js를 여러개로 구성해서..
혹은 spec.js를 여러개로 구성해서..
혹은 test서버 (환경)을 여러개로 구성해서..
운영의 문제로 해결 할 수 있어요~~!!!
protractor 사용 - js unit test - jasmin, mocha, custom(junit..)
현재 팀에서 사용중인 unit test형태를 그대로 써도 됩니다~!!
page21 - protractor 사용 - debug 기능도 제공~
TDD형태.. unit test코드 자체도 debug가능~~
protractor 사용 - 브라우저 없어도 되요.. phantom 하고도 연동 가능
phantom 구동 화면 스크린샷 ?
참고: https://angular.github.io/protractor/#/browser-setup