Selenium으로 네이버 중고나라 iframe 웹 구조 분석해서 검색 결과 제목 출력 자동화하기

 

이번 예제는 네이버 중고나라 카페에 접속해서 검색어 키워드를 입력한 후, 검색결과에서 게시글 제목들을 자동으로 출력하는 Selenium 자동화 테스트 예제를 실습해본다. 테스트 자동화에서도 웹 구조를 정확히 분석하는 게 중요한데, 특히 이번 케이스처럼 iframe이 사용된 구조에서는 일반적인 태그 접근 방식으로는 원하는 데이터를 제대로 뽑아낼 수 없기 때문에 iframe이라는 개념을 명확히 이해하고 활용할 필요가 있다.

Selenium으로 네이버 중고나라 iframe 웹 구조 분석해서 검색 결과 제목 출력 자동화하기

iframe이란?

iframe이란 건 HTML에서 "inline frame"의 줄임말이다. 쉽게 말하면 하나의 웹페이지 안에 또 다른 웹페이지를 창 형태로 삽입해놓은 구조다. 겉보기에는 하나의 페이지처럼 보여도, 사실상 별도의 DOM(Document Object Model) 구조를 가지기 때문에 Selenium으로 자동화 작업을 할 때 iframe 안에 있는 태그는 외부에서 직접 접근할 수 없다. 그래서 무조건 Selenium의 switch_to.frame()을 사용해서 그 iframe으로 먼저 들어가야 하고, 그 다음에 원하는 태그들을 검색할 수 있다.

예를 들어 중고나라에서 검색창에 키워드를 입력한 다음 검색 버튼을 누르면, 검색결과가 iframe 안에서 나타난다. 이걸 모르면 아무리 클래스 이름이나 XPath로 검색해도 엘리먼트를 못 찾는다. 테스트 자동화 중간에 "no such element" 같은 에러가 계속 나온다면 iframe을 의심해봐야 하는 이유가 바로 여기에 있다.

• iframe 창으로 전환하는 코드: driver.switch_to.frame(iframe)
• 새로 열린 탭으로 전환하는 switch 함수를 유사하게 사용: driver.switch_to.window(new_driver[-1])

중요한 건, iframe 안으로 들어가면 그 시점부터는 iframe 바깥의 태그에는 접근할 수 없다. 다시 말해서, iframe 안에 들어갔다면 그 프레임 바깥에 있는 모든 HTML 요소는 더 이상 조작할 수 없다. 반대로, iframe 밖에 있는 상태에서는 iframe 내부의 요소도 검색이 불가능하다. 그래서 반드시 상황에 맞춰 전환을 잘 해줘야 한다. switch_to_default.content() 함수로 원래의 메인 문서 구조로 돌아올 수 있다. 만약 이 코드를 생략하고 계속 iframe 내부에 있는 상태로 바깥 태그에 접근하려고 하면 에러가 발생한다.

• iframe 밖으로 나오는 함수: driver.switch_to_default.content()

iframe 구조의 장점

이번 예제를 실습하면서 느낀 건, iframe 구조는 겉으로 봤을 때는 일반적인 div나 section처럼 보일 수 있지만, 실제 구조를 보면 iframe 태그로 따로 나뉘어져 있어서 접근 방식 자체가 달라진다. 그래서 웹 자동화 테스트를 할 때는 단순히 눈에 보이는 UI만 믿지 말고, 개발자 도구(F12)를 열어서 실제 DOM 구조를 반드시 체크해야 한다.

또 하나 유용한 점은, iframe 구조를 알면 오히려 원하는 태그를 더 빠르게 찾을 수 있다. iframe 내부는 상대적으로 구조가 단순한 경우가 많고, 외부와 분리된 DOM 구조를 가지고 있어서 내부 탐색이 제한적인 대신 명확하다. 태그를 찾기 위한 XPath 경로나 class 이름이 덜 복잡한 경우도 많다.

결론적으로 QA 자동화에서는 웹 페이지의 전체 구조를 잘 이해하는 게 가장 우선이다. 특히 iframe이 쓰인 페이지에서는 반드시 switch_to.frame()을 써서 내부로 들어가야 태그를 제대로 컨트롤할 수 있다. 네이버 카페 중고나라처럼 복잡한 웹 서비스도 iframe 구조만 잘 파악하면 원하는 데이터를 추출하는 자동화를 충분히 구현할 수 있다.

예제 코드

from selenium.webdriver.common.by import By

from selenium.webdriver.common.keys import Keys

from selenium import webdriver

import time

 

driver = webdriver.Chrome()

driver.maximize_window()

 

try:

    driver.get("https://cafe.naver.com/joonggonara")

    elem = driver.find_element(By.ID, "topLayerQueryInput")

    elem.send_keys("자전거")

    elem.send_keys(Keys.RETURN)

    time.sleep(5)

 

    iframe = driver.find_element(By.ID, "cafe_main")

    driver.switch_to.frame(iframe)

    form = driver.find_element(By.XPATH, '//*[@id="main-area"]/div[5]')

 

    rows = form.find_elements(By.XPATH, './table/tbody/tr')

    for row in rows:

        elem = row.find_element(By.XPATH, './td/div/div/a')

        print(elem.text)

 

except Exception as e:

    print(e)

 

finally:

    driver.quit()