페이지 이동 자동화하기 - 총 페이지 개수 확인하기

URL은 인터넷 상에서 자원의 위치를 나타내는 주소로, 웹 페이지나 파일에 접근하기 위해 사용됩니다. 쿼리 스트링은 URL의 일부로, '?' 다음게 위치하여 웹 서버에 추가적인 정보를 전달하는 키-쌍의 집합입니다. 각 키-쌍은 '&'로 구분하고, 키와 값은 '='로 연결합니다. 예를 들어, "?page=2&sort=desc'sms page 키에 '2', sort 키에 'desc'를 전달하라는 의미입니다.

 

총 페이지 개수 확인하기

코스피 시장에서 2,000개가 넘는 종목이 있습니다. 네이버페이 증권은 한 페이지에 50개의 종목을 표시하며, 전체 항목을 수집하려면 페이지를 변경하면서 데이터를 수집해야 합니다. 여기서는 총 페이지 개수를 확인하는 함수를 만들어 보겠습니다.

크로미움 웹 브라우저를 사용하여 네이버페이 증권 웹 사이트의 시가총액 페이지로 이동합니다.

비주얼 스튜디오 코드에서 소스 코드 'step_1_2.py'를 열고, 실행 버튼을 클릭하여 크로미움 웹 브라우저로 네이버페이 증권에 접속합니다.

 

HTML 구조 파악

01 네이버페이증권에서 [국내중시]-[시가총액] 메뉴를 차례대로 클릭하여 시가총액 페이지로 이동합니다.

 

 

02 크로미움 웹 브라우저에서 F12 키를 눌러 개발자 도구를 엽니다. 개발자 도구 왼쪽 상단의 검사 모드 아이콘을 클릭한 후, 화면 하단 [2] 페이지 메뉴를 클릭합니다.

 

03 다음과 같이 개발자 도구의 [요소] 탭에서 검사 결과를 확인할 수 있습니다. 여기서 <a> 태그의 href 속성에 적힌 쿼리 스트링 '?&page=2'에 주목합니다.

<a href="/sise/sise_market_sum.naver?&page=2">2</a>

 

04 다시 검사 모드 아이콘을 클릭한 후 이어서 [맨 뒤] 메뉴를 클릭하여 전체 페이지 개수를 확인합니다. <a> 태그의 href 속성에서 '?/page=49'을 확인할 수 있습니다. 시가총액 페이지 URL을 '?&page=<이동하려는 페이지>' 형식의 문자열로 추가하면 해당 페이지로 이동한다는 사실을 알았습니다.

<a href="/sise/sise_market_sum.naver?&page=49">49</a>

 

05 [맨뒤] 메뉴의 <a> 태그에서 href 속성값을 추출하기 위해 주변 HTML 요소를 분석합니다. 개발자 도구의 [요소] 탭에서 [맨뒤] 메뉴 주변의 HTML 요소 구조를 파악합니다. 페이지 이동 관련 태그의 구조는 다음과 같습니다.

<table summary="페이지 네비게이션 리스트" class="Nnavi" align="center">
  <caption>
    페이지 네비게이션
  </caption>
  <tbody>
    <tr>
      <td class="on">
        <a href="/sise/sise_market_sum.naver?&amp;page=1">1</a>
      </td>
      <td>
        <a href="/sise/sise_market_sum.naver?&amp;page=2">2</a>
      </td>
      ... 중략...
      <td class="pgRR">
        <a href="/sise/sise_market_sum.naver?&amp;page=49"
          >맨뒤
          <img
            src="https://ssl.pstatic.net/static/n/cmn/bu_pgarRR.gif"
            width="8"
            height="5"
            alt=""
            border="0"
          />
        </a>
      </td>
    </tr>
  </tbody>
</table>

 

먼저 '페이지 네비게이션' 텍스트를 포함하는 <table> 태그를 찾고, 이어서 <tbody>, <tr>, <td>, <a> 순으로 페이지 메뉴 태그를 검색하면 [맨뒤] 메뉴를 추출힐 수 있습니다. 인스펙터에서 확인합니다.

인스펙터의 [Locator] 탭에서 다음의 CSS 셀렉터를 입력한 후, Enter 키를 누릅니다. 여기서 속성 last는 추출된 태그 목록의 마지막 태그를 의미합니다.

locator("table", has_text='페이지 네비게이션').locator("tbody > tr > td").last.locator("a")

 

전체 페이지 수를 반환하는 함수 작성

지금까지 분석한 내용을 바탕으로 총 페이지 개수를 반환하는 함수를 만듭니다. 비주얼 스튜디오 코드에서 새로운 파일을 만들고, 파일명을 'step_2_1.py'로 저장하세요. 다음 코드를 입력한 뒤 실행 버튼을 클릭하여 입력한 코드를 실행합니다.

from playwright.sync_api import Page
from step_1_2 import run_playwright
from step_1_3 import goto_market_cap

def fetch_total_page(page: Page) -> int: # 05
    table = page.locator("table", has_text="페이지 네비게이션") # <table> 태그 추출
    td = table.locator("tbody > tr > td").last # 마자막 <td> 태그 추출
    href = td.locator("a").get_attribute("href") # <a> 태그의 href 속성값 추출
    return int(href.split("=")[-1]) # URL에서 페이지 추출 # 09

if __name__ == "__main__":
    play, browser, page = run_playwright(slow_mo=1000)
    goto_market_cap(page) # 시가총액 페이지로 이동
    total_page = fetch_total_page(page) # 총 페이지 수 추출 # 14
    print(f"{total_page=}")
    browser.close()
    play.stop()

 

실행결과 total_page=49

 

05 페이지 네비게이션 표에서 홈 페이지 개수를 추출하는 함수 fetch_total_page()를 정의합니다.

09 함수 split()를 사용하여 '=' 문자를 기준으로 문자열을 분리한 후, 마지막 요소를 반환합니다.

14 함수 fetch_total_page()를 호출하여 총 페이지 개수를 추출합니다.