🎯 Selenium을 통해 E2E 테스트 하는 방법을 정리합니다.

📗 Today I Learned

Selenium

Selenium은 웹 애플리케이션을 자동으로 제어하고 테스트할 수 있게 해주는 브라우저 자동화 도구입니다. 다양한 브라우저와 언어를 지원하며, 실제 사용자의 행동을 흉내 내는 방식으로 동작합니다.

주요 구성 요소

• Selenium WebDriver

  • 다양한 브라우저 자동화를 지원하는 드라이버 (Chrome, Firefox 등)

• Selenium IDE

  • 브라우저 상의 사용자 동작을 녹화/재생할 수 있는 도구 (Chrome/Firefox 확장 프로그램)

• Selenium Grid

  • 여러 테스트 머신에 병렬로 테스트를 분산해 실행할 수 있게 해주는 분산 실행 플랫폼
    출처: selenium
    
    

---

Selenium + Docker 구성

• 사용 이미지: selenium/standalone-chrome ( Apple Silicon(M1/M2 등)에서는 seleniarm/standalone-chromium 사용 )

• 포트: 4444 → Selenium Web UI + WebDriver 접근 포트

• 실행 명령어

docker run -d --rm -p 4444:4444 \
  -v /dev/shm:/dev/shm \
  selenium/standalone-chrome

• 확인 주소: http://localhost:4444

❗ 실습에서는 Grid(hub/node 분리)는 사용하지 않고, standalone 이미지로 진행합니다.

---

Python 테스트 코드 흐름

• Selenium 라이브러리 설치
  

• 테스트 코드 예시 (first_test.py)

from selenium import webdriver
import time

options = webdriver.ChromeOptions()
options.add_argument('--ignore-ssl-errors=yes')
options.add_argument('--ignore-certificate-errors')

driver = webdriver.Remote(
  command_executor='http://localhost:4444/wd/hub',
  options=options
)

driver.maximize_window()
time.sleep(10)  # 확인용 지연

driver.get("https://notes.prgms-fullcycle.com")  # 페이지 열기
time.sleep(10)

driver.find_element("link text", "무료로 시작하기").click()  # 버튼 클릭
time.sleep(10)

s = input("Done: ")  # 사용자가 Enter 누를 때까지 대기
driver.close()
driver.quit()

print("Test Execution Successfully Completed!")

• 한계: 브라우저 자동화 시연일 뿐, 테스트 결과 검증(assertion)이 없음

  • 특정 요소가 존재하는지 확인 (assert)

  • 페이지 이동 결과 검증

  • 오류 발생 시 처리 등 테스트 검증 로직 추가 필요

---

E2E 테스트

사용자의 관점에서 시스템 전체를 입력 → 출력까지 검증하는 테스트 방식

E2E 테스트의 특징

• 시스템 내부 로직은 보지 않음 (Black-box 테스트)

• 실제 사용자처럼 입력하고 결과를 확인함

• 단위 테스트로는 확인할 수 없는 흐름을 검증 가능

프로젝트 적용

1. Selenium standalone (Chrome)을 로컬 Kubernetes 클러스터에 설치

2. Selenium IDE를 통해 테스트 시나리오를 녹화 → 코드로 변환

3. 변환된 코드를 보완하여 자동 실행 가능한 테스트 스크립트 확보

4. 향후 CI/CD 파이프라인에서 실행 가능한 테스트 환경 구성

---

Selenium IDE로 시나리오 녹화

1. Firefox 확장 프로그램 설치

⚠️ 2024년 기준, Chrome 확장 프로그램 정책(Manifest V3) 변경으로 인해 Selenium IDE는 더 이상 Chrome에서 설치할 수 없고, 공식적으로도 지원되지 않습니다.

• Firefox에서 Selenium IDE을 설치

2. 테스트 시나리오 녹화

• REC 버튼 클릭 → Base URL 입력

• 자동으로 열리는 페이지에서 시나리오 수행

  • "무료로 시작하기" 클릭

  • 이메일/비밀번호 입력

  • 로그인 버튼 클릭

  • 로그아웃 버튼 클릭

3. 시나리오 저장

.side 확장자를 가진 파일(simple_test.side)로 저장됨. 이 파일은 나중에 다시 불러와 재생하거나 코드로 변환 가능

4. 테스트 케이스 코드 생성

Untitled로 생성된 파일을 우클릭하여 Export를 누르고, Python pytest를 눌러 Export 합니다.

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

class TestUntitled():
    def setup_method(self, method):
        self.driver = webdriver.Chrome()

    def teardown_method(self, method):
        self.driver.quit()

    def test_untitled(self):
        self.driver.get("http://localhost:30030/")
        self.driver.find_element(By.LINK_TEXT, "무료로 시작하기").click()
        self.driver.find_element(By.NAME, "email").send_keys("test@example.com")
        self.driver.find_element(By.NAME, "password").send_keys("1234")
        self.driver.find_element(By.ID, "login-button").click()
        self.driver.implicitly_wait(2)  # 로딩 대기
        self.driver.find_element(By.CSS_SELECTOR, "#logout-button > span").click()

💡 E2E 테스트에서는 페이지 로딩 시간이나 요소 렌더링 지연으로 테스트가 실패할 수 있기 때문에 Selenium의 wait 기능을 활용해야 합니다.

대기 전략

• Implicit Wait: 정해진 시간 동안 요소가 나타날 때까지 대기
• Explicit Wait: 특정 조건이 충족될 때까지 폴링(polling)하면서 기다림

5. 테스트 실행 (pytest 라이브러리가 설치되어 있어야 함)

pytest test_untitled.py

---

테스트 시나리오 구성

공통 로직: 로그인/로그아웃 메서드화

def login(self):
    self.driver.find_element(By.LINK_TEXT, "무료로 시작하기").click()
    self.driver.find_element(By.NAME, "email").send_keys("test@example.com")
    self.driver.find_element(By.NAME, "password").send_keys("1234")
    self.driver.find_element(By.ID, "login-button").click()

def logout(self):
    self.driver.find_element(By.CSS_SELECTOR, "#logout-button > span").click()

테스트 시작과 종료 시에는 아래처럼 적용합니다.

 def setup_method(self, method):
    self.driver = webdriver.Chrome()
    self.login()

def teardown_method(self, method):
    self.logout()
    self.driver.quit()

노트 목록 및 노트 상세 테스트

def test_noteview(self):
    self.driver.get(BASE_URL + "/notes")
    self.driver.implicitly_wait(10)

    # 로그인된 사용자 정보 확인
    assert self.driver.find_element(By.ID, "current-user").text == "test@example.com"

    # 노트 리스트 검증
    notes_list = self.driver.find_element(By.ID, "notes-list")
    assert notes_list.find_element(By.CSS_SELECTOR, "li:nth-child(1) span").text == "Test (2)"
    assert notes_list.find_element(By.CSS_SELECTOR, "li:nth-child(2) span").text == "Test (1)"

    # 노트 선택 후 내용 검증
    notes_list.find_element(By.XPATH, "li[last()]/a/span").click()
    self.driver.implicitly_wait(2)
    assert self.driver.find_element(By.CSS_SELECTOR, "article header textarea").text == "Test (1)"
    assert self.driver.find_element(By.CSS_SELECTOR, "article main div div").get_attribute("innerHTML") == \
        "<p>This note is for testing.</p><p>Note number: 1</p>"

로그인 실패 시나리오와 Alert 처리

def test_loginfail(self):
    self.driver.get("http://localhost:30030/")
    self.driver.find_element(By.LINK_TEXT, "무료로 시작하기").click()
    self.driver.find_element(By.NAME, "email").send_keys("test@example.com")
    self.driver.find_element(By.NAME, "password").send_keys("1235")  # 잘못된 비번
    self.driver.find_element(By.ID, "login-button").click()

    alert = self.driver.switch_to.alert
    assert alert.text == "이메일 또는 비밀번호가 일치하지 않습니다."
    alert.accept()

---

✏️ 회고

사용자 관점의 흐름을 자동화할 수 있다는 것이 좀 놀라운 거 같다.