Protractor로 web ui test 자동화 하기

669 views

Published on

protractor 소개

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
669
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
1
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • 발표자 소개

    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
  • 참고: https://angular.github.io/protractor/#/browser-setup
  • protractor가 만능은 아니에요......
    알파고에게 아자황이 필요하듯.... (그림 추가)...
    selenium 기반 - webdriver사용 > 동일한 약점들이 있음
    phantom 연동의 경우 아직 문제가 많음.
    환경구성, CI연동, test코드 작성 (배워야함...<-- 쉬운편이긴 하지만....)
  • 정리
    언제나...그렇듯... 하나의 길만 있는것은 아니에요~~
    선택의 영역~~!!
  • Web UI 테스트를 Unit 테스트 처럼?
    떠올려라 Protractor~!
  • 서로 다른 여러 browser 에서 Web UI 테스트를 하고 싶은면.
    떠올려라 Protractor~!
  • 만약 당신의 팀이 Web UI test 가 필요하면.
    그래도 이 발표를 듣고.... Web UI test ~!! 하면 ... Protractor를 떠올려 주세요...
    이거만 성공하면. 발표자의 발표는 성공~!!!
  • Q & A , 감사합니다. (우정출현 - 사진속 사람들... ㅋ)
  • Protractor로 web ui test 자동화 하기

    1. 1. Protractor로 Web UI TEST 자동화 하기 web team | 서경석
    2. 2. 서경석 이라고 합니다
    3. 3. 서경석 이라고 합니다
    4. 4. Web UI Test를 하는 과정 • Web UI Test 하기 1. Test가 Excel, Jira, Confluence에?  관리 불편 2. IE, Firefox, Chrome…  반복 3. Test를 n빵 해서.  결국 사람이 4. 각자 본인 PC에서 수행.  환경 불일치 5. 내가 하면 성공? 니가 하면 실패?  감정의 존재 6. 오늘은 테스트의 날~?  간격의 문제
    5. 5. 해결책은? • 언제나.. 해결책인 있어요…!!!
    6. 6. 해결책은 자동화 • 자동화!
    7. 7. 해결책은 자동화 • 자동화 하면 1. Test를 코드로 작성  관리 2. IE, Firefox, Chrome…? 는 기계가  반복 3. N빵은… 밥 먹고 하는 것!  기계야 일해라 4. 언제나 동일한 환경  환경 일치 5. 테스트 결과는 항상 동일해요  감정 없음 6. 오늘은 테스트의 날~?  언제 어디서나
    8. 8. 해결책은 자동화 • 자동화 테스트
    9. 9. 그래도 힘들어요 하다 보니 불편은 마찬가지… • 새로운 언어를 배워야 하거나… • 설치가 복잡하거나… • 테스트정확도가 떨어져요…
    10. 10. 그래도 힘들어요 이런 기능도 되면 좋겠어요… • Javascript를 그대로 사용하고 싶어요… • Jasmine이나 Mocha같은 unit-test 형태로… • Browser필요 없이 테스트 되었으면...
    11. 11. 그래서 Protractor Unit Test를 작성하듯 UI Test를 작성하자~ 그래서 Protractor
    12. 12. Protractor 소개 Protractor  Node.js & Selenium 기반의 Web UI Test Framework  Node.js program, built on WebDriverJS  https://angular.github.io/protractor  MIT License
    13. 13. Protractor 설치 Protractor 설치 $ npm install –g protractor
    14. 14. Protractor 사용 – 코드 작성 Protractor로 UI 테스트 코드 작성하기 Conf.js – 설정 Spec.js – 테스트 코드
    15. 15. Protractor 사용 – 코드 작성 Protractor로 UI 테스트 코드 작성하기 Conf.js – 설정 Spec.js – 테스트 코드
    16. 16. Protractor 사용 – 코드 작성 Protractor로 UI 테스트 코드 작성하기 Conf.js – 설정 Spec.js – 테스트 코드
    17. 17. Protractor 사용 – 실행 Protractor로 테스트 실행하기 $ protractor conf.js
    18. 18. Protractor 사용 – 추가 요구사항 - 결과가 cli로 그냥 나오는데… 예쁘게 나왔으면~ - UI 테스트 중 문제가 생겼을 때, 상황을 캡쳐 해줬으면~ - 개발 중 나랑 연관된 일부 기능만 테스트 하였으면~ - Jasmin 말고 난 Mocha 를 쓰고 싶은데~ - Unit Test처럼 된다면… TDD처럼 사용하는 형태도 될까~ - 테스트 서버는 browser가 없는데… 테스트 가능 했으면~
    19. 19. Protractor 사용 – 추가 요구사항 - 결과가 cli로 그냥 나오는데… 예쁘게 나왔으면~ - UI 테스트 중 문제가 생겼을 때, 상황을 캡쳐 해줬으면~ - 개발 중 나랑 연관된 일부 기능만 테스트 하였으면~ - Jasmin 말고 난 Mocha 를 쓰고 싶은데~ - Unit Test처럼 된다면… TDD처럼 사용하는 형태도 될까~ - 테스트 서버는 browser가 없는데… 테스트 가능 했으면~ 이 모든 것이 가능합니다! 무료 코드 얻기 https://github.com/angular/protractor 폭넓은 보장 무료! WEB UI TEST엔 Protractor
    20. 20. Protractor 사용 – report & screenshot Protractor html test result & screenshot
    21. 21. Protractor 사용 – 일부만 테스트하기 Protractor 일부 기능만 테스트 하기 • Conf.js 를 여러 개 • Spec.js 를 여러 개 • Test 서버를 여러 개 • 운영의 문제로 해결 할 수 있어요~!!!
    22. 22. Protractor 사용 – JS Unit Test FW 현재 팀에서 사용중인 Unit Test FW을 그대로 써도 됩니다~!!! • Jasmine, Mocha, Cucumber, And using a custom FW • 참고: https://angular.github.io/protractor/#/frameworks
    23. 23. Protractor 사용 – debugging Debugging도 가능합니다. • WebStorm 연동도 되요. • 참고: https://angular.github.io/protractor/#/debugging
    24. 24. Protractor 사용 – No Browser Browser가 없는 Server 환경에서도 테스트 가능해요!
    25. 25. Protractor 사용 – Multiple Browser 같은 테스트를 여러 Browser 에서 한번에 테스트도 가능합니다~
    26. 26. Protractor는 갑? Protractor가 만능은 아니에요…. 알파고 에게 아자황(기계제국의 1호 앞잡이?)이 필요하듯… Selenium 기반 – WebDriver 사용 > 동일한 약점을 가져가요. Phantom 연동의 경우 아직 문제가 많아요. 환경구성, CI연동 등, 설정 할 것들.. 배울 것이 많이 있어요.
    27. 27. Protractor 전문가? 여기까지 봤으면… 나도 Protractor 전문가? 사실 공부할 것들이 존재합니다...
    28. 28. Protractor 정리 언제나 그렇듯. 하나의 길만 있는 건 아니에요.. 정답이 아닌, 선택의 문제!
    29. 29. Protractor 정리 Web UI Test를 Unit Test처럼 쓰고 싶을 땐? 떠올려라 Protractor ~!!
    30. 30. Protractor 정리 여러 Browser 에서 Web UI Test를 하고 싶을 땐? 떠올려라 Protractor ~!!
    31. 31. Protractor 정리 만약 당신의 팀에서 Web UI Test가 필요 할 땐? 떠올려라 Protractor ~!!
    32. 32. Protractor 떠올려라 Q & A 감사합니다. web team | 서경석 프로
    33. 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/

    ×