개발에는 여러종류의 테스트가 있다.
그 중에서는 e2e테스트라는게 존재한다.
e2e는 end to end라는 뜻이다.
끝에 끝이라는 뜻인데 사용자가 사용하는 그 상황 자체를 의미한다.
더 쉽게 설명하면
사용자가 사용한다고 가정하는 테스트
이다.
이러한 e2e테스트는 시스템 전반을 테스트하는 시스템 테스트의 일부이다.
이러한 테스트는 사실 gui테스트에서 필수적이다.
가령 마우스로 텍스트위에 올려놓으면 tooltip이 표시된다던가 이런 테스트는 unit테스트로는 할 수 없다.
그래서 사용하는게 바로 nightwatch이다.
공식 홈페이지는 여기이다.
여러분은 궁금증을 가질게 사용자가 과연 어떠한 방식으로 실제처럼 테스트할까?이다.
정말로 실제처럼 테스트하는데 이는 아래를 보면 되고 간략하게 원리를 설명하겠다.
셀레니움 - 웹브라우저 조작
셀레니움 드라이버는 브라우저를 아예 직접적으로 조작한다.
그래서 여러분은 이 테스트를 보면 브라우저가 실질적으로 어떻게 동작하게 되는지 사람의 눈으로 볼 수 있다.
또한 코드로도 어느 부분에서 예상대로 동작했는지, 혹은 못했는지 알 수 있다.
셀레니움은 서버로서 동작하므로 e2e테스트를 위해서 셀레니움 서버는 켜져있어야한다.
그럼 이제 사용하는 법을 알아보자.
npm i -g nightwatch
nightwatch를 글로벌로 설치해준다.
경우에 따라서는 global이 아니라 local로 받아야할 때도 있다.
공식사이트에서 보면 각 브라우저별로 드라이버 설치방법이 나온다.
사파리와 edge는 enable만 시켜주면 된다.
나머지도 그냥 설치만 하면 되므로 쉽다.
우리는 chrome으로 해보자.
npm i -D chromedriver
자신의 프로젝트에 chromedrive를 설치해줘야한다.
http://selenium-release.storage.googleapis.com/index.html
그리고 셀레니움 서버 역시 설치해준다. 위 사이트에서 standalone버전을 설치해준다.
다른 녀석들은 실행하기 껄끄러우므로 이 버전이 가장 낫다.
설치가 완료되면 실행해준다.
java -jar selenium-server-standalone-<version>.jar
java로 설치해준다.
자바가 설치 안됬다고 뜨면 설치해준다.
윈도우에서 자바를 설치하는 방법은 이 포스팅을 참조하라.
이제 테스트를 해보자. 위는 테스트 프로젝트이다.
//nightwatch.json
{
"src_folders" : ["tests"],
"webdriver" : {
"start_process": true,
"server_path": "node_modules/.bin/chromedriver",
"port": 9515
},
"test_settings" : {
"default" : {
"desiredCapabilities": {
"browserName": "chrome"
}
}
}
}
위처럼 만들어준다.
하나하나 정말 직관적으로 되있기에 영어만 읽어도 해설이 된다.
src_folder는 테스트를 시행할 폴더이다.
안에 있는 모든 js파일을 테스트한다.
webdriver는 사용할 webdriver다.
사실 크롬에서 테스트할거면 위에거 복사해서 넣으면 된다.
// nightwatch.conf.js
module.exports = (function (settings) {
settings.test_workers = false;
return settings;
})(require('./nightwatch.json'));
아까 그 설정파일을 넣어준다.
//tests/mytest.js
module.exports = {
'버튼 누르면 채팅에 추가 됨': (browser)=>{
browser
.url('http://localhost:5500/index.html')
.waitForElementVisible('body', 1000)
.pause(200)
.setValue('input[type=text]#mytext', '안녕하십니까')
.pause(200)
.click('input[type=button]#mybtn')
.pause(1000)
.assert.value('textarea#myarea','안녕하십니까\n')
.end();
}
}
이 파일은 이제 우리가 짠 test script이다.
사용법은 공식홈페이지를 참조하자.
너무 다양하기 때문에 다 보여줄 수 없다.
위의 루틴을 해석하면 해당 url에서 body가 로딩될 때까지 1000ms를 기다리고 200ms를 기다린후
mytext에 안녕하십니까를 넣고 200ms를 기다린후 mybtn을 클릭하고 1000ms를 기다린후 textarea가 안녕하십니까가 나오는지 확인한다.
그럼 이제 테스트를 해보자.
스크립트를 보면 테스트가 모두 성공했음을 알 수 있다.
e2e테스트는 실제로 볼 수 있다.
실제로는 어떻게 동작하느냐면 아래의 영상을 보라.
이렇게 테스트 과정을 눈으로 확인할 수 있다.
테스트를 하면 테스트결과가 나온다.
tests_output을 보자.
테스트의 결과를 눈으로 확인할 수 있다.
만약 틀리게 하면 어떨까?
틀리게하면 어디서 틀렸는지 확인할 수 있다.
실패하면 위처럼 되는걸 확인할 수 있다.
이 결과를 활용해서 이때까지의 테스트상태를 저장할 수 있다.
'Usage > JavaScript' 카테고리의 다른 글
| JavaScript지원 확인하기 - 내가 사용하는 플랫폼(브라우저, 모바일, 서버) 버전확인 하는 방법(1) (0) | 2019.06.05 |
|---|---|
| [HTML][Javascript]console로 태그(엘리먼트, dom객체)정보 자세히 출력하고 싶다면 console.dir (0) | 2019.03.23 |
| [Mocha]JavaScript에서 Unit Test하기 - 왕초보만 (0) | 2019.02.08 |
| [RESTful][ajax]jquery ajax사용법 - (2) (0) | 2019.01.13 |
| [RESTful][ajax]ajax란? XMLHttpRequest사용법 - (1) (0) | 2018.12.28 |