Playwright를 이용한 마비노기 모바일 스트리머 전투력 확인(1)

시작

요즘 인터넷방송을 좋아하는 저는 스트리머들이 최근에 좋아하는 마비노기 모바일 캐릭더들의 정보를 모으고 이를 한번에 확인하는 사이트를 만들고싶어서 시작하게 되었습니다. 겸사겸사 웹크롤링을 배우면서 말이죠. 여기서는 playwright패키지를 사용해서 진행해보려고 합니다. 따로 api가 주어지지않아서 웹크롤링을 사용할예정이며 서로 부담되지않게 24시간에 한번만 계획할 예정입니다.

 

1. 가상환경 생성 및 활성화

vscode를 실행하고 먼저 터미널을 열고 다음 명령어를 실행합니다.

 

python -m venv venv
source venv/Scripts/activate

 

 

2.필요한 패키지 설치

가상환경이 활성화된 상태에서 다음 명령어를 실행하여 필요한 패키지를 설치합니다.

pip install django
pip install playwright
playwright install chromium
pip install beautifulsoup4

3. Django 프로젝트 생성

이제 Django 프로젝트와 앱을 생성하겠습니다. 터미널에서 다음 명령어를 실행합니다. 해당 폴더에 프로젝트르 생성해야하므로 마지막에 "."을 붙입니다.

django-admin startproject mabi_ranking .
python manage.py startapp tracker

 

4. 앱 등록 및 설정

settings.py 파일을 열고 이번에 추가한 tracker를 추가해줍니다.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    # 추가 앱
    "tracker",
]

 

5. 기본적인 코드

아무래도 처음 사용하는거다보니 일단 어떤식으로 작동하는지 테스트를 해보았습니다.

from playwright.sync_api import sync_playwright
import time


def test():
    # 0)
    with sync_playwright() as p:
        # 1)
        browser = p.chromium.launch(headless=False) 
        
        # 2)
        page = browser.new_page()
        
        # 3)
        page.goto("https://mabinogimobile.nexon.com/Ranking/List?t=1")
        print("페이지 열림")
        
        time.sleep(5)
        
        # 4)
        browser.close()
        print("종료")
        
if __name__ == "__main__":
    test()

일단 기본적인 툴은 이런식으로 합니다. (참고)

1. 브라우저를 실행합니다. 
   - headless = False : 이렇게 지정해야 브라우저 창이 보입니다. 테스트이므로 false로 합니다.
   - chromum : 크롬
2. 새 페이지를 열도록 합니다.
3. 스크랩할 웹사이트 주소를 입력합니다.
4. 브라우저를 종료합니다.

이렇게 되면 브라우저 창이 열리고 해당사이트로 이동합니다. 그리고 지정된 시간만큼 지난후 꺼지게 됩니다.

 

6. 서버 선택

이제 서버창을 눌러서 서버를 선택하도록 해야합니다.  

        # 1)
        page.click("div.select_box[해당 div값]")
        time.sleep(1) 
        print("서버 선택 드롭다운을 클릭했습니다!")
        
        # 2)
        server_name = "아이라"
        server_option = f"li:has-text('{server_name}')"
        page.click(server_option)
        print(f"서버 '{server_name}'을 선택했습니다!")

1. page.click 을 이용해서 내가 원하는 div창을 누르도록 선택해야합니다
   - f12를 눌러서 서버 선택창의 div 값을 구해야합니다.
2. 이러면 서버 선택 창이 나오는데 여기서 특정 서버를 선택하도록 합니다.

7. 캐릭터명 입력 및 검색 버튼 클릭

이제는 캐릭터명을 입력하고 검색해야합니다.

        # 1)
        character_name = "닉네임"  
        page.fill("input[name='이름값']", character_name)
        print(f"캐릭터명 '{character_name}'을 입력했습니다!")
        
        # 2)
        page.click("검색버튼 id")
        print("검색 버튼을 클릭했습니다!")

 

1. page.fill을 이용해서 닉네임을 입력하도록합니다.
   - f12버튼을 이용해서 해당 name이 무엇인지 찾아서 넣으면 됩니다.
2. page.click을 이용해서 검색하도록합니다.
   - 마찬가지로 검색버튼을 찾아서 입력하시면 됩니다.

이제 기본적으로 서버와 이름을 넣고 검색하는 방법을 구현하였습니다. 후에 여기서 입력한 해당 값을 추출해서 원하는 값을 찾고 이를 여러번 반복시행해야합니다.