UI, 프론트, 서버를 모두 한방에 점검하는 스크립트 만들기

 

 

얼마 전 서비스 전체에 영향을 미치는 수정 사항이 있었어요. 이에 대해서 저희 팀은 여러가지 대비를 했고, 저는 그 중 Python을 이용해 UI와 프론트, 서버의 에러를 점검하는 스크립트를 만들었습니다.

수정 사항으로 인해 영향을 받거나, 유저 유입량이 높은 URL을 수집하고 해당 URL들의 전반적인 상태를 점검하는데 활용했습니다.

전에 공유해드린 적이 있는 Python과 Selenium + Pyautogui + Requests 모듈들로 모든 기능을 구현할 수 있었는데요. 세 가지 모듈 모두 테스트 자동화를 위해 사용할 수 있으며 Requests 모듈은 크롤링, 스크래핑 등 서버에 요청을 보낼 때 사용합니다.

이 세 가지 모듈로 어떻게 UI, 프론트, 서버를 모두 점검할 수 있었는지 공유해 보겠습니다.

 

URL 수집하기

점검에 앞서 어떤 웹 페이지를 점검할 것인지 대상을 선정해야 했습니다. 선정 기준은 아래와 같았습니다. 1. 수정 사항에 직접적으로 영향을 받는 페이지. 2. 유저의 유입이 많은 페이지. 3. 서비스의 주요 기능을 제공하는 페이지. 4. 그 외 점검 요청이 있는 페이지. 위의 기준에 따라 60개의 URL을 선정했습니다.

그리고 Python 코드로 URL을 읽어올 때 딕셔너리 형태로 용이하게 사용하기 위해서 해당 URL들을 json파일 형식으로 저장했습니다.

 

Copy

 

예시
{
	"wanted": "https://www.wanted.co.kr",
	"google": "https://www.google.co.kr",
	"naver": "https://www.naver.com"
}

json 파일의 Key(wanted, google, naver)와 value(각 URL들)구조와 Python의 딕셔너리 자료형의 구조가 동일하여 코드에서 파일을 읽어와 그대로 사용할 수 있었습니다.

 

웹 페이지 점검하기

우선 웹 페이지의 점검 결과를 저장하기 위해 “Pass” 리스트와 “Fail” 리스트를 생성해 주었습니다. Selenium으로 수집한 URL에 브라우저를 열어 접근했고 아래 방법들로 웹 페이지와 서버를 점검했습니다.

가장 먼저 Requests를 이용해 해당 웹 페이지의 HTTP Code를 확인했습니다.

Copy

response = requests.get('url') #url에 get요청을 보내 response에 할당.
response.status_code() #response에 할당된 값에서 status_code를 확인.
>>> 200

위의 코드로 대상 URL에서 HTTP Code를 확인할 수 있고, 코드가 300 이상인 경우 에러가 발생했다고 간주합니다.

HTTP Code가 300 미만인 경우 웹 페이지의 서버 상태는 정상이나 프론트 단에서 발생하는 에러가 있을 수 있어 Selenium을 이용해 웹 페이지의 콘솔 에러를 확인했습니다.

Copy

console_error = driver.get_log('browser')
print(console_error)
>>>[
{'level': 'WARNING', 
'message': "security - Error with Permissions-Policy header: Origin trial con...",
'source': 'security',
'timestamp': 1689239730855},
]

driver.get_log()로써 프론트 단에서 발생하는 콘솔 에러를 확인할 수 있습니다. 그 결과로는 여러가지 항목들을 확인할 수 있는데 아래와 같습니다. - 에러의 레벨 - 에러의 내용 - 소스 - 타임 스탬프

이 결과는 리스트([]) 내에 딕셔너리({}) 형태로 반환 되므로 인덱스와 키를 이용해 원하는 요소에 접근이 가능합니다.

증거 수집하기

에러가 발생한 경우 그 결과를 확인할 수 있도록 증거를 남기고 있습니다. (이 프로젝트, 코드의 이름이 파파라치가 된 이유이기도 합니다.)

증거는 2가지 방법으로 남깁니다.

1.스크린 샷 촬영 pyautogui 모듈로 에러가 발생한 경우 해당 웹 페이지의 스크린 샷을 촬영합니다.

Copy

pyautogui.screenshot(파일명, 촬영범위)

위의 코드로 촬영 범위를 촬영하여 파일 명으로 저장합니다. 온전한 스크린 샷을 촬영하기 위해서는 항상 동일한 위치와 크기에 브라우저가 열려야 했기 때문에 Selenium으로 브라우저를 열 때 브라우저의 위치와 위치를 지정해 주었습니다.

Copy

driver.set_window_position(0, 0)
driver.set_window_size(1920, 1080)
pyautogui.screenshot(파일명, region=(0, 0, 1920, 1080))

위 코드로써 Selenium으로 실행되는 브라우저는 모니터의 0, 0에서 1920x1080px로 열리게 됩니다. 모니터가 여러 개 있어도, 다른 PC에서 코드를 실행해도 항상 동일한 위치에서 동일한 크기의 브라우저가 열리게 되고, 해당 범위를 찍는다면 온전한 브라우저 전체를 촬영할 수 있습니다.

2.에러 발생 정보 활용 점검 결과를 저장하기 위한 Pass, Fail 리스트에 점검 결과를 저장했습니다. - 에러가 발생한 URL - 콘솔 에러의 메시지 - 콘솔 에러의 타임 스탬프 - 점검 결과 - 에러 타입 - 스크린 샷 파일 명

위의 내용들을 하나의 딕셔너리로 묶어 테스트 결과 리스트에 저장하였습니다.

 

스크립트를 실행하고 나면 점검 결과 폴더에 위와 같이 에러가 발생했던 페이지의 스크린 샷과 점검 결과를 가지고 있는 json파일이 떨어집니다.

이렇게 웹 페이지의 서버와 프론트 상태를 점검하고 에러가 발생한 페이지의 에러 내용과 UI 상태를 같이 확인할 수 있었습니다.

 

여기까지 현재 구현되어 있고 활용했던 내용이었습니다. 지금은 추가로 구현하고 있는 내용에 대해 간단히 소개해 드리려고 합니다.

Python의 pyautogui 모듈로 이미지를 인식하는 봇을 만들 수 있습니다. 해당 내용은 아래 링크에서 이미 소개해 드린 적이 있습니다.

 

🖼️

파이썬 이미지 인식 기반 자동화 테스트

 

이미지를 인식하는 기능을 이용해 점검이 필요한 웹 페이지의 UI를 스크린 샷으로 찍어둡니다. 웹 페이지의 로딩이 끝나고 해당 이미지를 인식 시켜 정상적으로 로딩이 완료 되었는지 확인하는 기능을 추가하고 있습니다. (어렵지는 않을 거라 생각됩니다. 언제나 시간이 문제입니다..🥲)

이 기능까지 구현된다면 UI, 프론트, 서버의 에러를 모두 확인할 수 있는 하나의 스크립트를 완성할 수 있게 됩니다.

마무리

이번엔 서비스의 상태를 다방면으로 점검할 수 있는 스크립트를 만들었던 과정에 대해 소개해 드렸습니다.

원티드랩의 QA팀의 좋은 점 중 하나는 동료들이 끝없이 스스로 공부하고 전파하는 문화입니다.

Python 코드로 스크린 샷을 촬영하거나 서버의 상태를 점검하고, Selenium, pyautogui의 사용법 들은 제가 이미 알고 있었던 내용이지만, Selenium으로 콘솔 에러를 확인할 수 있다는 내용은 팀장이신 승훈님께서 새롭게 알려주신 내용이었습니다.

이와 더불어 어떻게 활용하면 좋겠다는 아이디어까지(파파라치 라는 이름도) 함께 주셔서 너무 재미있게 기능을 구현했습니다.

이것으로 서비스의 프론트/백엔드의 전반적인 모니터링을 할 수 있게 되어 서비스를 지켜보는 든든한 기반을 하나 더 마련해 둔 기분이 듭니다.

지금은 기존에 만들어 둔 스크립트와 겹치는 기능을 덜어내는 작업도 하고 있습니다. 아마 파파라치 스크립트는 이름 답게 이미지 인식, 비교, 촬영에 특화된 자동화 테스트 코드가 될 듯 합니다.

재작년 말에 만들었던 서비스 모니터링 스크립트도 2년 가까운 세월이 지나며 많은 발전을 거듭했는데 앞으로 파파라치 스크립트도 어떻게 발전해서 서비스 안정성에 도움을 줄 지 많은 기대가 됩니다.

감사합니다.

어쩌다 보니 Python을 이용한 ~~ 만들기 라는 글로 몇 가지 모듈들의 사용법을 소개 시켜드렸었는데 이 글에서 마치 이전 글들을 마무리하며 종합하게 된 것 같네요.

별 것 없는 일기 같은 글이지만 MCU의 페이즈 하나를 마무리 한 것 같은 기분이 들었습니다.

재미있었습니다! 🕺