상품 이미지 캡처하기

쇼핑 트렌드 보고서에는 인기 상품의 이미지도 삽입되어 있습니다. 이번에는 카테고리 메뉴 아래 개별의 상품의 미리보가 이미지를 캡처하는 코드를 작성해 봅시다. 상품 목록을 가리키는 CSS 셀럭터를 찾고, 이미지를 캡처하는 순서로 진행하겠습니다.

 

상품 목록 셀럭터 탐색

비주얼 스튜디오 코드에서 'step_1_3_.py' 파일을 열고 실행 아이콘을 클릭하면, 크로미움 웹 브라우저와 인스펙터가 생성됩니다. '베스트상품' 페이지에서 크로미움 개발자 도구를 엽니다. 앞서 카테고리 셀렉터를 찾던 방식과 동일하게 상품 목록을 가리키는 셀렉터를 찾겠습니다.

 

01 검사 모드 아이콘을 클릭하고 상품의 미리보기 이미지를 클릭하세요.

 

02 개발자 도구의 [요소(Elements)] 탭에서 상품 이미지를 둘러싼 테그 구조를 태그 구조를 살펴보세요. 여기서 버튼을 추출하는 CSS 셀렉터는 li 태그와 class 속성의 'productCardResponsive_product_card' 문자열을 조합하는 "li[class*='productCardResponsive_product_card']"입니다.

 

03 인스펙터의 [Locator] 탭에 아래 명령어를 입력하여 셀럭터를 테스트하세요.

locator("li[class*='productCardResponsive_product_card']")

 

04 상품 목록이 활성화됩니다.

 

 

캡처 자동화 코드

locator() 함수와 CSS 셀렉터를 사용해 상품의 미리보기 이미지를 캡처하는 함수 take_screenshots()를 작성해 봅시다. playwright 패키지가 제공하는 함수 screenshot()은 스크린 샷을 캡처한 뒤 이미지를 파일로 저장하는 함수로, Page 객체에서 호출하면 전체 화면을, Locator 객체에서 호출하면 Locator가 가리키는 영역을 캡처합니다.

실행 중인 프로그램을 종류한 뒤, 비주얼 스튜디오 코드에서 새로운 파일을 만들고, 파일명을 'step_2_2.py'로 지정하세요. 다음 코드를 입력한 후 실행 아이콘을 클릭하세요. 크로미움 웹 브라우저가 네이버플러스 스토어의 '베스트상품'으로 이동한 후, 인스펙터의 Resume 아이콘을 클릭하면 상품의 미리보기 이미지를 캡처합니다. 캡처한 이미지는 'output' 폴더에 저장됩니다.

import json
from pathlib import Path
from playwright.sync_api import Page
from step_1_1 import OUT_DIR # 이전에 작성한 모듈을 불러옵니다.
from step_1_2 import run_playwright
from step_1_3 import goto_best_goods

OUT_2_2 = OUT_DIR / f"{Path(__file__).stem}.json"

def take_screenshots(page: Page, count: int = 15): # 10
    locs = page.locator( # 11
        "li[class*='productCardResponsive_product_card']").all() # 12
    imgs_path = [] # 이 변수에 검색 결과를 저장
    for idx, loc in enumerate(locs[:count]): # li 태그 추출
        path = OUT_DIR / f"{Path(__file__).stem}_{idx+1:03}.png" # 캡처 이미지 경로
        loc.screenshot(path=path) # 화면 캡처 # 16
        imgs_path.append(path.as_posix()) # 17
    with open(OUT_2_2, "w", encoding="utf-8") as fp: # 이미지 경로를 JSON으로 저장 # 18
        json.dump(imgs_path, fp, ensure_ascii=False) # 19

if __name__ == "__main__":
    play, browser, page = run_playwright(slow_mo=1000)
    goto_best_goods(page) # 베스트상품으로 이동
    page.pause() # 인스펙터 실행
    take_screenshots(page) # 25
    browser.close()
    play.stop()

 

10 개별 상품의 미리보기 화면을 캡처하는 take_screenshots() 함수를 정의합니다.

11~12 locator() 함수에 셀렉터를 전달하여 개별 상품 목록을 가리키는 Locator 객체를 생성합니다. 모든 상품 태그를 반복 처리하기 위해 Locator 객체의 all() 함수를 호출하고, 변수 locs에 저장합니다.

16 Locator 객체의 screenshot() 함수를 호출하여 해당 객체가 가리키는 화면을 캡처합니다. 이때 매개변수 path에 캡처한 이미지를 저장할 파일 경로를 전달합니다.

17 이미지 파일 경로를 리스트 imgs_path에 추가합니다. JSON 형식으로 저장할 것이기 때문에 as_posix() 함수를 사용하여 문자열로 변환합니다.

18~19 img_path 리스트를 OUT_2_2 경로에 JSON 형식으로 저장합니다.

25 take_screenshots() 함수를 호출하여 개별 상품의 미리보기 이미지를 캡처합니다.