[82일차]Selenium 개요 및 구성 요소 및 테스트 예시

Selenium은 웹 브라우저 자동화를 위한 오픈소스 프레임워크이다. 주로 웹 애플리케이션의 테스트 자동화에 사용되며, 웹 기반의 반복적인 행정 업무 자동화 등 브라우저 제어가 필요한 다양한 영역에 활용될 수 있다. Selenium은 크게 세 가지 주요 구성 요소로 이루어진다.

1.1. Selenium WebDriver

• 여러 브라우저(Chrome, Firefox, Safari, Edge 등)를 제어할 수 있는 언어별 라이브러리를 제공한다.
• 개발자는 이를 통해 직접 코드를 작성하여 브라우저의 동작을 세밀하게 제어할 수 있다.

1.2. Selenium IDE

• 브라우저에서의 사용자 상호작용을 녹화하고 재생할 수 있는 도구이다.
• Chrome이나 Firefox의 확장 프로그램 형태로 설치하여 별도의 코딩 없이 테스트 케이스를 생성할 수 있으며, 빠른 프로토타이핑에 적합하다.

1.3. Selenium Grid

• 분산 환경에서 테스트를 수행하기 위한 도구이다.
• Hub가 중앙에서 요청을 수신하고 이를 여러 Node(테스트 머신)에 분배하여 병렬로 테스트를 실행한다.
• 이를 통해 테스트 시간을 단축하고 다양한 OS 및 브라우저 환경에서�� 호환성을 효율적으로 검증할 수 있다.

---

E2E(End-to-End) 테스트의 이해

E2E 테스트는 시스템의 종단 간 테스트를 의미하며, 사용자 관점에서 애플리케이션의 흐름이 처음부터 끝까지 올바르게 동작하는지 확인하는 과정이다.

목적

유닛 테스트(Unit Test)만으로는 확인하기 어려운 GUI와 백엔드 로직 간의 연결성, 실제 데이터 ��름, 시스템 전체의 동작 여부를 검증하는 것을 목적으로 한다.

특징

실제 브라우저 환경에서 사용자의 입력과 그에 따른 출력을 확인하므로, 사용자 경험과 가장 밀접한 테스트 방식이다.

---

Selenium 기반 E2E 테스트 실습 절차

웹 기반 문서 편집기 프로젝트에서 효율적인 테스트를 수행하기 위한 단계별 프로세스는 다음과 같다.

3.1. 시나리오 기록 및 기초 검증

• Selenium IDE 활용: 브라우저에서 문서 작성, 저장, 수정 등 주요 사용자 시나리오를 녹화한다.
• 재생 및 확인: Command-line runner를 통해 기록된 시나리오를 재생하며 초기 단계의 결함을 발견한다.

3.2. 코드 기반 자동화 테스트 전환

• Selenium IDE에서 생성된 시나리오를 Pytest 등의 프레���워크용 코드로 내보내기(Export)한다.
• 이후 객체 지향적인 코드 구조로 재구성하여 유지보수성을 높인다.

3.3. 동적 요소 처리 (Timing 이슈 해결)

• Implicit Wait: 특정 요소가 나타날 때까지 일정 시간 동안 브라우저를 전역적으로 대기시킨다.
• Explicit Wait: 특정 조건(예: 요소의 가시성, 클릭 가능 여부)이 충족될 때까지 특정 요소만 대기한다. 이는 불필요한 대기 시간을 줄여 테스트 효율을 높인다.

---

테스트 고도화 전략

4.1. 검증(Assertion) 강화

• 시나리오가 단순히 동작하는 것을 넘어, 올바른 결과값이 출력되었는지 확인하기 위해 적절한 위치에 Assertion을 삽입한다.
• 텍스트 일치 여부, 요소의 존재 여부, URL 변경 등을 체크하여 테스트의 신뢰도를 확보한다.

4.2. 코드 공용화 및 구조화

• 여러 테스트 케이스에서 공통으로 사용되는 로그인 과정, 페이지 이동 등의 로직은 별도의 모듈로 분리하여 공용화한다.
• 이는 코드 중복을 방지하고 브라우저 환경 변화에 유연하게 대응하게 한다.

4.3. Headless Browser 활용

• GUI가 없는 Headless Browser 모드를 적용하면 리소스를 절약하고 테스트 실행 속도를 향상시킬 수 있다.
• 이는 특히 지속적 통합(CI) 환경에서 자동화 테스트를 수행할 때 필수적이다.
• 필요에 따라 옵션을 조정하여 디버깅 시에는 화면을 보고, 실제 배포 파이프라인에서는 화면 없이 실행한다.

4.4. 환경 설정 최적화 (Nginx Reverse Proxy)

• 개발 환경에서 프론트엔드와 백엔드의 Origin이 달라 발생하는 CORS 문제를 해결하기 위해 Nginx Reverse Proxy를 활용할 수 있다.
• 이를 통해 FE와 BE를 Same Origin으로 구성하면 보안 정책으로 인한 테스트 제약을 최소화할 수 있다.

---

Selenium 테스트 코드 구현 예시

다음은 Python의 pytest 프레임워크와 Selenium WebDriver를 활용한 구체적인 구현 방법이다.

5.1. 기초적인 문서 작성 테스트 코드

import pytest
from selenium import webdriver
from selenium.webdriver.common.by import By

def test_document_creation():
    # WebDriver 설정 (Chrome)
    driver = webdriver.Chrome()
    driver.get("http://localhost:3000") # 편집기 접속 주소

    # 요소 찾기 및 동작 수행
    title_input = driver.find_element(By.ID, "doc-title")
    title_input.send_keys("테스트 문서 제목")

    save_button = driver.find_element(By.ID, "save-btn")
    save_button.click()

    # 결과 검증 (Assertion)
    success_message = driver.find_element(By.ID, "status-msg").text
    assert "저장되었습니다" in success_message

    driver.quit()

5.2. Explicit Wait를 활용한 동적 요소 처리

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

def test_dynamic_loading(driver):
    # 특정 요소가 화면에 나타날 때까지 최대 10초간 대기
    wait = WebDriverWait(driver, 10)
    editor_area = wait.until(
        EC.presence_of_element_located((By.CLASS_NAME, "ql-editor"))
    )

    editor_area.send_keys("문서 본문 내용을 입력한다.")

설명: presence_of_element_located는 해당 요소가 DOM에 존재할 때까지 기다린다. 이를 통해 네트워크 지연이나 렌더링 속도 차이로 발생하는 에러를 방지할 수 있다.

5.3. Headless Browser 및 옵션 설정

from selenium.webdriver.chrome.options import Options

def setup_headless_driver():
    options = Options()
    options.add_argument('--headless')          # 화면 없이 실행
    options.add_argument('--no-sandbox')        # 리눅스 환경 필수 옵션
    options.add_argument('--disable-dev-shm-usage') # 공유 메모리 부족 방지

    driver = webdriver.Chrome(options=options)
    return driver

5.4. 공통 기능의 모듈화 (Page Object Model 개념 적용)

class EditorPage:
    def __init__(self, driver):
        self.driver = driver
        self.url = "http://localhost:3000/edit"

    def navigate(self):
        self.driver.get(self.url)

    def write_content(self, text):
        self.driver.find_element(By.ID, "editor").send_keys(text)

    def save(self):
        self.driver.find_element(By.ID, "save").click()

# 실제 테스트 케이스에서의 활용
def test_with_pom(driver):
    editor = EditorPage(driver)
    editor.navigate()
    editor.write_content("공용화된 코드를 통한 테스트 실행")
    editor.save()

---

테스트 수행 시 주의사항 및 결론

1. ID 값의 고유성 확보: 테스트 안정성을 위해 HTML 요소에 data-testid와 같은 테스트 전용 속성을 부여하는 것이 권장된다.
2. 독립적인 테스트 환경: 각 테스트 케이스는 서로 의존성 없이 독립적으로 실행되어야 한다. 테스트 시작 전후에 데이터베이스를 초기화하거나 세션을 정리하는 과정이 필요하다.
3. 에러 스크린샷 활용: 테스트 실패 시 driver.save_screenshot('error.png')를 호출하도록 구성하면 실패 원인을 빠르게 파악할 수 있다.

위와 같은 자동화 테스트 도입을 통해 웹 기반 문서 편집기 프로젝트는 코드 변경에 따른 사이드 이펙트를 최소화하고, 안정적인 사용자 경험을 제공하는 고품질의 서비스를 구축할 수 있다.