파이썬 Selenium 상대 로케이터 above below near to_left_of to_right_of 사용법 예제

🔗 Selenium 상대 로케이터란 무엇인가

웹 자동화 테스트를 진행할 때 가장 중요한 작업 중 하나는 원하는 HTML 요소를 정확하게 찾아내는 일입니다.
하지만 웹사이트 구조가 자주 바뀌거나 동적으로 생성되는 요소가 많을 경우, 기존의 XPATH나 CSS 선택자만으로는 한계가 있습니다.
이 문제를 해결하기 위해 Selenium 4에서 새롭게 도입된 기능이 바로 상대 로케이터(Relative Locator)입니다.

상대 로케이터는 다른 요소를 기준점으로 삼아 대상 요소를 찾아내는 방법입니다.
즉, 버튼이나 입력창을 특정 기준 요소의 위(above), 아래(below), 왼쪽(to_left_of), 오른쪽(to_right_of), 가까이(near)에 있다는 조건을 지정할 수 있습니다.
이 방식은 화면에 표시되는 레이아웃 구조를 기준으로 하기 때문에, HTML 구조가 다소 변하더라도 자동화 스크립트가 더 안정적으로 동작할 수 있습니다.

📌 상대 로케이터의 주요 장점

• ✅레이아웃을 기준으로 탐색하기 때문에 코드 변경에 강합니다.
• ✅코드 가독성이 높아져 협업 시 이해하기 쉽습니다.
• ✅동적인 요소를 대상으로 할 때 안정적인 선택이 가능합니다.

📌 상대 로케이터 기본 문법

from selenium.webdriver.common.by import By
from selenium.webdriver.support.relative_locator import locate_with

# 예시: 특정 버튼을 기준으로 위에 있는 입력창 찾기
element = driver.find_element(locate_with(By.TAG_NAME, "input").above(By.ID, "loginButton"))

🛠️ 파이썬 환경에서 Selenium 기본 설정

상대 로케이터를 활용하기 전에 Selenium을 사용할 수 있는 환경을 먼저 준비해야 합니다.
Python 환경에서 Selenium을 설치하고 크롬 드라이버를 연동하는 과정이 기본이 됩니다.
아래 단계들을 차근차근 따라 하면 초보자도 쉽게 준비할 수 있습니다.

📌 Selenium 설치

pip install selenium

명령 프롬프트나 터미널에서 위 명령어를 실행하면 최신 버전의 Selenium이 설치됩니다.
Selenium 4 이상 버전에서만 상대 로케이터 기능을 사용할 수 있으니 반드시 최신 버전을 설치하는 것이 중요합니다.

📌 크롬 드라이버 연결

Selenium이 웹 브라우저를 제어하려면 웹드라이버가 필요합니다.
Google Chrome을 기준으로는 ChromeDriver를 다운로드해야 합니다.
크롬 브라우저의 버전에 맞는 드라이버를 설치하고, 실행 코드에서 드라이버 경로를 지정하면 됩니다.

from selenium import webdriver

# 크롬 드라이버 실행
driver = webdriver.Chrome()

# 웹사이트 접속
driver.get("https://www.example.com")

📌 상대 로케이터 모듈 불러오기

상대 로케이터를 활용하기 위해서는 다음과 같이 모듈을 반드시 불러와야 합니다.

from selenium.webdriver.common.by import By
from selenium.webdriver.support.relative_locator import locate_with

⚙️ above와 below 활용 예제

상대 로케이터의 가장 대표적인 사용법은 특정 요소를 기준으로 위(above)나 아래(below)에 있는 요소를 찾는 것입니다.
예를 들어 로그인 버튼 위에 있는 입력창이나, 특정 레이블 아래에 있는 텍스트 필드를 찾을 때 유용하게 활용됩니다.

📌 above 예제

# 로그인 버튼 위에 있는 입력창 찾기
login_btn = driver.find_element(By.ID, "loginButton")
username_input = driver.find_element(
    locate_with(By.TAG_NAME, "input").above(login_btn)
)

위 코드에서는 loginButton 요소 위쪽에 있는 input 태그를 탐색합니다.
즉, 로그인 버튼 위에 위치한 사용자 이름 입력창을 쉽게 선택할 수 있습니다.

📌 below 예제

# "Email" 라벨 아래에 있는 입력창 찾기
email_label = driver.find_element(By.XPATH, "//label[text()='Email']")
email_input = driver.find_element(
    locate_with(By.TAG_NAME, "input").below(email_label)
)

위 예제는 ‘Email’이라는 텍스트를 가진 라벨을 기준으로 바로 아래에 있는 입력창을 찾습니다.
폼 구조에서 레이블과 입력창이 쌍으로 배치되는 경우가 많기 때문에, below 로케이터는 매우 자주 활용됩니다.

📌 above와 below 비교

🔌 to_left_of와 to_right_of 예제

웹 페이지에서 버튼이나 입력창은 종종 나란히 배치되는 경우가 많습니다.
이럴 때 특정 요소를 기준으로 왼쪽 또는 오른쪽에 있는 대상을 찾고 싶을 때 사용하는 것이 to_left_of 와 to_right_of 입니다.

📌 to_left_of 예제

# 비밀번호 입력창 왼쪽에 있는 사용자 아이디 입력창 찾기
password_input = driver.find_element(By.ID, "password")
username_input = driver.find_element(
    locate_with(By.TAG_NAME, "input").to_left_of(password_input)
)

위 예제는 password 입력창을 기준으로 왼쪽에 있는 입력창을 탐색합니다.
주로 로그인 폼에서 아이디와 비밀번호 입력창이 나란히 배치된 경우에 활용할 수 있습니다.

📌 to_right_of 예제

# "아이디 저장" 체크박스 오른쪽에 있는 라벨 찾기
checkbox = driver.find_element(By.ID, "rememberMe")
label = driver.find_element(
    locate_with(By.TAG_NAME, "label").to_right_of(checkbox)
)

이 코드는 rememberMe 체크박스를 기준으로 오른쪽에 있는 라벨을 선택합니다.
실제 로그인 폼에서는 “아이디 저장” 같은 체크박스 옆에 설명 문구가 붙어있기 때문에 이런 상황에서 유용합니다.

📌 좌우 탐색 시 주의할 점

💡 near를 활용한 요소 탐색

상대 로케이터에서 near는 특정 요소와 가까이에 있는 요소를 찾을 때 사용됩니다.
위, 아래, 좌, 우와 달리 정확한 위치 방향이 필요하지 않고, 단순히 일정 범위 내에 존재하는 요소를 탐색할 때 유용합니다.

📌 near 기본 예제

# 검색 버튼 근처에 있는 입력창 찾기
search_button = driver.find_element(By.ID, "searchBtn")
search_input = driver.find_element(
    locate_with(By.TAG_NAME, "input").near(search_button)
)

위 코드는 검색 버튼을 기준으로 가까운 위치에 있는 입력창을 탐색합니다.
검색창 옆에 검색 버튼이 나란히 붙어있는 UI 환경에서 매우 효과적으로 활용됩니다.

📌 near 활용의 장점

• 🔎위치 방향에 구애받지 않고 범위 내 요소 탐색이 가능
• 🔎동적 UI에서 요소 위치가 조금씩 바뀌더라도 안정적으로 탐색
• 🔎검색창-버튼, 체크박스-라벨 등 인접 관계 요소 탐색에 최적화

📌 주의할 점

❓ 자주 묻는 질문 (FAQ)