[해줌테크] e2e TEST를 통해 사용자의 입장을 이해하기 by 해줌

안녕하세요 해줌 IT사업실 핵인싸 천재개발자를 담당하고 있는 민지아빠입니다.

프론트엔드 챕터 PM이자, 해줌의 다트왕이자 볼링왕 타이틀을 가지고 있는 해줌 대표 10잡스인데요. 업무와 함께 해줌의 문화를 만들어나가는데에 관심을 많이 가지고 있습니다.

제가 한 인터뷰는 아래 링크에서 확인 가능합니다.

[해줌피플] #6 해줌의 천재 개발자, 최재현님

잠들어있는 tech란을 다시 살리기 위해 짧은 글 하나를 올려보려고 하는데요. 최근에 최근 프론트엔드 챕터 시간에 진행한 e2e 테스트에 대한 내용입니다.

그럼, 시작해보겠습니다.

# 스쿼드? 챕터?

우선, 조금은 낯설수도 있는 스쿼드와 챕터에 대해 설명드리겠습니다.

해줌에서는 스쿼드와 챕터의 구성으로 조직을 운영하고 있는데요(https://m.post.naver.com/viewer/postView.nhn?volumeNo=17233698&memberNo=43908477&vType=VERTICAL), 그 중에 챕터는 같은 업무를 하는 사람들의 조직입니다. 매주 정기적으로 모여 프론트엔드 관련된 작업을 진행 하고 있으며 최근에는 유닛테스트와 e2e테스트를 진행 중입니다.

# e2e 테스트란 무엇인가

e2e 테스트는 end to end test로 사용자의 입장에서 테스트 하는 것을 말합니다. 홈페이지에서 원하는 텍스트가 제대로 출력이 되었는지, 버튼을 클릭 했을 때, 기대하는 동작을 수행하는 지 등을 테스트 하게 됩니다.

# e2e 테스트 프레임워크

e2e 테스트 프레임워크에는 testcafe(https://devexpress.github.io/testcafe), cypress(https://www.cypress.io/), nightwatch(https://nightwatchjs.org/) 등이 있는데요, 저는 파이썬의 유닛테스트 프레임워크인 pytest(https://docs.pytest.org/en/latest/)와 selenium 을 사용해서 작업을 해보았습니다. (pytest-selenium 플러그인을 설치하면 좀 더 쉽게 사용 할 수 있습니다.)

# 테스트 코드 작성

구글에서 ‘e2e test’를 검색해서 제대로 된 결과가 나오지를 확인하는 테스트 코드를 작성해 보겠습니다.

from selenium.webdriver.common.keys import Keys    from selenium.webdriver.support import expected_conditions as EC    from selenium.webdriver.support.ui import WebDriverWait      def test_google(selenium):        selenium.get('https://google.com')          input = selenium.find_element_by_xpath("//input[@name='q']")        input.send_keys('e2e test')        input.send_keys(Keys.RETURN)          WebDriverWait(selenium, 10).until(EC.url_contains('google.com/search'))          ellip = selenium.find_element_by_class_name('ellip')        assert ellip.text == 'E2E Test 알아보기 - HardBoiledSmith Stories - Medium'

구글 웹페이지를 호출
인풋창에 텍스트 입력
enter 키 입력(==검색버튼 클릭)
첫번째 검색결과의 텍스트와 비교

의 순서로 진행이 됩니다.

실행

pytest --driver=Chrome --driver-path=node_modules/chromedriver/bin/chromedriver test_google.py

셀레늄 웹드라이버 경로와 소스코드 경로을 옵션으로 넣은 후 실행을 하면 자동으로 테스트를 진행 하게 됩니다.

결과

테스트 결과를 확인 할 수 있습니다. 100% 통과!

마지막 라인의 텍스트 비교 부분을 수정해서 테스트에서 실패하게 해보겠습니다.

테스트에서 실패한 부분을 한 눈에 알아 볼 수 있습니다.

실행 시에 —htrml 옵션을 줄 경우, 결과가 html 파일로 출력되어, 실패한 부분의 스크린샷을 같이 확인 해 볼 수 있습니다.

같은 테스트를 nightwatch(node.js) 를 사용해서 테스트 할 경우의 코드입니다.

module.exports = {      'test google' : function (client) {        client          .url('https://google.com')          .waitForElementVisible('body', 10000)          .setValue('input[name=\'q\']', 'e2e test')          .pause(1000)          .submitForm('#tsf')          .assert.containsText('.ellip', 'E2E Test 알아보기')          .end();      },    };

# 마무리

예전 게임 개발을 할 때부터 클라이언트 테스트, UI 테스트, 프론트엔드 테스트에 고민이 많았었는데, e2e 테스트를 진행하면서 조금의 실마리를 찾은 것 같았습니다.

보통은 백엔드 쪽의 유닛테스트에만 신경을 쓰는 경우가 많은데, e2e 테스트까지 신경을 쓰게 된다면, 제품 자체의 버그나 외부 연동 api 등의 오류까지 쉽고 빠르게 찾아 낼 수 있을 것입니다. 또한 크롬 뿐만 아니라 사파리, 파이어폭스 등의 다양한 브라우저에서 자동으로 테스트를 할 수 있기 때문에, qa 시간 절약에도 큰 도움이 될 것입니다.

이상으로 e2e 테스트에 대해 간단히 소개해 보았습니다. 마지막으로 해줌 홈페이지의 수익성 계산기 부분을 테스트하는 영상을 첨부하며 마치겠습니다. 감사합니다.

# 참고

E2E Test 알아보기(https://medium.com/hbsmith/e2e-test-알아보기-3c524862469d)
Selenium에서 Cypress로 갈아탄 후기(https://medium.com/hbsmith/selenium에서-cypress로-갈아탄-후기-324f224c14db)
E2E 테스트와 나이트왓치(https://blog.coderifleman.com/2016/06/17/e2e-test-and-nightwatch/)
Selenium with Python(https://selenium-python.readthedocs.io/)
첫 인상이 좋은 E2E 테스트 프레임워크, TestCafe(https://blog.coderifleman.com/2016/10/31/good-first-impression-testcafe/)
테스트 (https://ui.toast.com/fe-guide/ko_TEST/)
[Nightwatch]JavaScript에서 e2e Test하기(https://kamang-it.tistory.com/entry/NightwatchJavaScript에서-e2e-Test하기-왕초보만)
실용적인 프론트엔드 테스트 전략(https://meetup.toast.com/posts/174)
pytest-selenium(https://pytest-selenium.readthedocs.io/en/latest/user_guide.html)