protractor로 web ui test 자동화 하기
TRANSCRIPT
Protractor 로Web UI TEST 자동화 하기 web team | 서경석
서경석 이라고 합니다
서경석 이라고 합니다
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 –g protractor
Protractor 사용 – 코드 작성
Protractor 로 UI 테스트 코드 작성하기Conf.js – 설정Spec.js – 테스트 코드
Protractor 사용 – 코드 작성
Protractor 로 UI 테스트 코드 작성하기Conf.js – 설정Spec.js – 테스트 코드
Protractor 사용 – 코드 작성
Protractor 로 UI 테스트 코드 작성하기Conf.js – 설정Spec.js – 테스트 코드
Protractor 사용 – 실행
Protractor 로 테스트 실행하기 $ protractor conf.js
Protractor 사용 – 추가 요구사항
- 결과가 cli 로 그냥 나오는데… 예쁘게 나왔으면 ~- UI 테스트 중 문제가 생겼을 때 , 상황을 캡쳐 해줬으면 ~- 개발 중 나랑 연관된 일부 기능만 테스트 하였으면 ~- Jasmin 말고 난 Mocha 를 쓰고 싶은데 ~- Unit Test 처럼 된다면… TDD 처럼 사용하는 형태도 될까 ~- 테스트 서버는 browser 가 없는데… 테스트 가능 했으면 ~
Protractor 사용 – 추가 요구사항
- 결과가 cli 로 그냥 나오는데… 예쁘게 나왔으면 ~- UI 테스트 중 문제가 생겼을 때 , 상황을 캡쳐 해줬으면 ~- 개발 중 나랑 연관된 일부 기능만 테스트 하였으면 ~- Jasmin 말고 난 Mocha 를 쓰고 싶은데 ~- Unit Test 처럼 된다면… TDD 처럼 사용하는 형태도 될까 ~- 테스트 서버는 browser 가 없는데… 테스트 가능 했으면 ~
이 모든 것이 가능합니다 !무료 코드 얻기https://github.com/angular/protractor
폭넓은보장무료 !
WEB UI TEST엔Protractor
V 가능
V 가능V 가능V 가능V 가능
V 가능
Protractor 사용 – report & screenshot
Protractor html test result & screenshot
Protractor 사용 – 일부만 테스트하기
Protractor 일부 기능만 테스트 하기• Conf.js 를 여러 개• Spec.js 를 여러 개• Test 서버를 여러 개
• 운영의 문제로 해결 할 수 있어요 ~!!!
Protractor 사용 – JS Unit Test FW
현재 팀에서 사용중인 Unit Test FW 을그대로 써도 됩니다 ~!!!
• Jasmine, Mocha, Cucumber, And using a custom FW• 참고 : https://angular.github.io/protractor/#/
frameworks
Protractor 사용 – debugging
Debugging 도 가능합니다 .
• WebStorm 연동도 되요 .• 참고 : https://angular.github.io/protractor/#/
debugging
Protractor 사용 – No Browser
Browser 가 없는Server 환경에서도 테스트 가능해요 !
Protractor 사용 – Multiple Browser
같은 테스트를 여러 Browser 에서한번에 테스트도 가능합니다 ~
Protractor 는 갑 ?
Protractor 가 만능은 아니에요… .
알파고 에게 아자황 ( 기계제국의 1 호 앞잡이 ?) 이 필요하듯…Selenium 기반 – 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/