기능 자동화 동작 방식과 식별자

기능 자동화 테스트 구현에 있어서 가장 중요하다고 생각하는 식별자에 대한 얘기를 해보려고 합니다.
실제 예제를 추가해서 왜 필요한지에 대해 알아보도록 하겠습니다!

---

기능 테스트 자동화 수행 방식

기능 테스트 자동화는 어떻게 동작하는 것 일까요 ??

A : 모션을 녹화해서 그대로 돌아가게 하는것이잖아! 요즘은 내가 수행하는 과정들을 녹화해서 코드로 만들어주던데?
라고 말하시는 분도 있었고,
B : 내가 동작하는 위치의 좌표를 저장했다가 그대로 수행하는 방식!
이라고 답변해주시기도 했습니다.

물론 위 방법이 완전 틀린 것이라고는 생각하지 않습니다! 자동화 유료 도구 중에는 녹화를 수행하여 기록을 완료하면 바로 스크립트를 구성해주는 도구도 있었습니다 (ex: Katalon Studio)

그리고, 항상 고정된 위치에 버튼이 있는 경우라면 좌표를 기억해서 해당 위치만 찍어주면 나름의 자동화라고 생각될 수 있습니다. 좌표를 기억해서 자동화 하는 방법은 제가 2017년도 쯤 야구 티켓팅을 빠르게 해보겠다고 실제로 사용했던 방법입니다. 나름 잘 써먹긴 했는데 불안 요소가 너무 많아서 버린 프로그램이 됐죠... 😂😂

그렇다면 자동화 테스트는 어떤 방식으로 동작하는 것 일까요?

제가 생각하는 답은 웹 페이지에 들어가서 자동화를 수행하려는 페이지에서 개발자도구(F12)를 눌렀을때 표시되는 많은 코드들 중 동작을 수행하려고 하는 태그를 찾아서 대상 항목에 액션을 수행하는 방식이라고 생각합니다.

 

위에서 A가 답변한 모션 녹화 후 코드 생성 방식도 동일한 방식으로 코드가 생성됩니다. 모션이 수행되는 곳에 태그를 읽어서 스크립트를 생성하는 방식이죠. 하지만 이 방식은 맞으면서도 틀릴 수 있습니다.

 

이유는 모션으로 녹화하는 방식은 대상 태그에 어떤 데이터를 읽어올지 모르고, 생성된 코드를 추가 가공해야 더 명확하게 동작할 것 입니다. 자동 녹화하는 방식은 Chrome 플러그인에 있는 Seleinum 기능과 katalon Studio 제품의 녹화 기능 그리고 Playwright에서도 지원하는 기능(playwright codegen)으로 수행해봤는데, 코드 생성은 잘 되지만, 생성 시 적용한 태그값이 명확하지 않을 경우 코드를 자동화 수행했을 때, 혹은 다른 브라우저로 수행하면 안돌아가는 경우가 종종 발생했습니다.

 

그래서 자동화 테스트를 개발하는분들은 자동 생성을 사용한다면 스크립트 참고용으로 사용하지 않을까 생각됩니다. 물론 이후에 말씀드릴 "식별자"가 명확하게 잘 되어있는 웹 페이지라면 자동 생성기능이 잘 될 수 있을 것 같기도 합니다.

---

식별자? 식별자를 통한 자동화? 그게 몬뎅?

식별자는 코딩에서는 변수명, 함수명 이런 이름들이 될 것이고 웹 페이지에서는 HTML 요소를 고유하게 식별하기 위한 속성입니다. 가장 흔히 사용되는 식별자는 'id'와 'class' 속성이 있습니다.

제가 가장 많이 접속하는 네이버 메인 페이지로 예시를 들어보겠습니다.
가장 상단에 검색바, 그 아래에 메뉴로 이동하는 다양한 링크 이미지들이 있습니다.

 

개발자 도구(F12)를 켜서 확인해보면 <ul class="shortcut_list"> 항목 안에 여러 링크들이 구분되어 속해있다는 것을 볼 수 있습니다. 그 중 "메일" 항목을 나타내는 식별자는 <li class="shortcut_item"> 이 그룹 안에 속해있네요.

 

그렇다면 <li class="shortcut_item"> 이 값으로 선택하면 될까요..? 이 li 속성은 다른 링크에도 들어가있는 것을 확인할 수 있습니다. 이 태그 값으로 한다면 자동화 진행 시 어떤 <li class="shortcut_item">를 클릭해야 하는지 컴퓨터는 모를 수 있습니다. 

 

그래서 조금 더 명확한 <a href="https://mail.naver.com" class="link_service" target="_blank"> 값이나, <span class="service_icon type_mail"> 값을 사용하거나, "메일" 이라는 글자로 대상을 찾을 수도 있습니다. 자동화를 수행하는 방법은 같은 동작이지만 다양한 방식으로 수행할 수 있습니다.

 

이처럼 원하는 위치 값을 명확하게 선택하기 위해서는 식별자가 필요합니다. 그렇다고 모든 버튼이나 모든 항목에 필요한 것은 아닙니다. 동작을 원하는 대상의 범위가 좁혀지면 특정 글자나, 이미지 태그로 찾을 수 있기 때문이죠.

 

저 자동화 만들어야하니까 모든 항목에 식별자 넣어주세요! 하고 개발팀에 요청하면 바로 혼꾸녕날 수 있으니 조심하세요!

 

위 이야기를 쉽게 예를 들자면, 지구상에 있는 사람 중 "수비"라는 사람을 찾아봐! 라고 하는 것 보단 범위를 좁혀서 대한민국 경기도 수원시에 있는 "수비"라는 사람을 찾아봐! 라고 하는 것이 더 정확도가 높은 것 처럼 말이죠.

정확도를 더 높이려면 상세한 주소까지 작성하면 명확할 수 있으나, 하나 하나 지정한다면 비용이 많이 들겠죠 😥

 

대략적인 동작 방식이 설명이 되었을까요..? 설명을 못해서 이해가 안될 수 있을 것 같습니다 😓

 

그래서 다음 포스팅에는 실제 예제를 하나 만들어서 테스트 동작 하는 방식을 알아보도록 하겠습니다 타겟은 올리브영 페이지로 할 예정입니다! 이유는 올리브영 페이지는 식별자 구분이 잘 되어있어서 예제를 만들어보기 편할 것 같아요 😋
Playwright를 활용해서 올리브영 페이지 간단한 자동화 하는 것을 다음 포스팅으로 생각하고 돌아오겠습니다.