[20주차 - DAY1] 웹 기반 문서 편집기 제작 프로젝트(5)

 

 

Selenium

셀레니움은 웹 테스트 자동화 프레임워크이다.

 

기초

Docker 실행

아래의 명령으로 컨테이너를 생성하고, 실행하여 브라우저에서 http://localhost:4444로 접속해서 접속이 되는지 확인한다.

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

 

테스트 코드 작성

first_test.py 파일을 아래와 같이 작성하고, 실행하여 테스트를 진행한다.

from selenium import webdriver
import time

print("Test Execution Started")

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
)

# maximize the window size
driver.maximize_window()
time.sleep(10)

# navigate to the notes app
driver.get("https://notes.prgms-fullcycle.com")
time.sleep(10)

# click on the Get started for free button
driver.find_element("link text", "무료로 시작하기").click()
time.sleep(10)

# close the browser
s = input("Done: ")

driver.close()
driver.quit()

print("Test Execution Successfully Completed!")

 

Selenium IDE를 이용한 테스트 케이스 개발

1. 크롬 웹 스토어에서 Selenium IDE를 검색한다.

 

2. Selenium IDE를 실행하여 Create a new project → PROJECT NAME에 프로젝트명을 적고 OK를 누른다.

3. 우측 상단에 REC 버튼을 누른다.

4. BASE URL에 http://localhost:30030을 입력하고 Start Recording을 눌러서 이벤트 기록을 시작한다.

 

종단간 테스트 케이스 개발

1. 위에서 생성한 프로젝트에서 note_view를 클릭한다.

2. click의 타겟을 xpath=//ul[@id='notes-list']/li[last()]/a/span으로 수정한다.

3. 다음과 같은 코드를 생성한다.

BASE_URL = "http://localhost:30030"

class TestNoteview():
   def setup_method(self, method):
     self.driver = webdriver.Chrome()
     self.vars = {}
     self.login()
   
   def teardown_method(self, method):
     self.logout()
     self.driver.quit()

   def test_noteview(self):
     self.driver.get(BASE_URL + "/notes")
     self.driver.find_element(By.XPATH,
     "//ul[@id=\'notes-list\']/li[last()]/a/span").click()
     time.sleep(1)
     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)”
     
     # self.driver.find_element(By.XPATH, "//ul[@id=\'notes-list\']/li[last()]/a/span").click()
       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>"
     
   def login(self):
     self.driver.get(BASE_URL + "/")
     self.driver.implicitly_wait(10)
     self.driver.find_element(By.LINK_TEXT, "무료로 시작하기").click()
     # ...
     
   def logout(self):
     self.driver.find_element(By.CSS_SELECTOR, "#logout-button > span").click()

 

E2E 테스트 자동화

Nginx Reverse Proxy 설정

default.conf 파일을 다음과 같이 작성한다.

FROM nginx:latest

COPY notes.conf /etc/nginx/conf.d/default.conf

server {
	 location / {
         proxy_set_header Host $host;
 		 proxy_set_header X-Real-IP $remote_addr;
   	  	 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		 proxy_set_header X-Forwarded-Proto $scheme;
		 proxy_pass http://frontend:3000/;
 	}
 
 	location /api/ {
 		proxy_set_header Host $host;
 		proxy_set_header X-Real-IP $remote_addr;
 		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 		proxy_set_header X-Forwarded-Proto $scheme;
 		proxy_pass http://backend:3031/;
 	}
}

 

테스트용 네트워크 구성

docker-compose.yaml

services:
  notes:
    build: ./notes-web
    ports:
    - 4000:80
    networks:
    - notes
  // ...
  selenium:
    image: seleniarm/standalone=chromium
  ports:
  - 4444:4444
  networks:
  - notes
  frontend:
    // ...
    environment:
      REACT_APP_BASE_URL: http://notes/api
      // ...
  backend:
    // ...
    environment:
      NODE_ENV: development
      // ...
   // ...
network:
  notes: {}

 

실행

docker compose up -d

python -m pytest