개요

결혼을 하게 되어 모바일 청첩장을 직접 만들기로 했다.

기획자가 확실하신 분이라 그분의 니즈를 만족시키기 위한 템플릿을 찾을 수 없었다.

기획자님은 선과 원이 만나 우리가 된다는 것을 강조하길 원하셨고 

나는 스크롤을 내리면 화면의 구성을 변경할 수 있는 parallax scrolling라는 기술로 개발하기로 했다.

Parallax scrolling를 위한 라이브러리는 skrollr.js 를 사용했다.


개발

최대한 단순화 하기 위해서 index.html 안에 css와 js 모두 인라인으로 개발했다.

jquery, skrollr 두개의 라이브러리를 사용했고, 이미지는 상대경로로 설정해서, 사용하고자 하는 분은 이미지만 바꾸면 된다.

나는 AWS S3에 public 저장소를 하나 생성하고, FrontCloud CDN 을 연결해서 하객들에게 공유했다.

사용자 환경은 모바일에 최적화 했고, PC화면에서 보아도 깨지지 않도록 살짝 설정해 두었다.

청첩장을 직접 만드시는 분들께 도움이 될 수 있길 바라며 포스팅한다.


데모

깃헙

스크린샷



Nginx는 컴파일된 바이너리를 제공하지 않는다.

apt-get이나 yum을 통해 설치하면 설정 관리나, 이중화같은 작업이 어렵기 때문에 컴파일 설치를 선호하는 편이다.

2017년 6월 23일 기준 최신 Stable version인 nginx-1.12.0 버전 설치 스크립트를 아래 작성했다.

 

설치 기준 위치는 /home/username/apps/ 로 한다.

 

1. NGINX 다운로드

cd /home/username/apps/
wget https://nginx.org/download/nginx-1.12.0.tar.gz
tar -xvf nginx-1.12.0.tar.gz
rm nginx-1.12.0.tar.gz

2. PCRE 다운로드

cd /home/username/apps/nginx-1.12.0
wget http://downloads.sourceforge.net/project/pcre/pcre/8.37/pcre-8.37.tar.gz
tar -zxf pcre-8.37.tar.gz

3. zlib 다운로드

cd /home/username/apps/nginx-1.12.0
wget http://zlib.net/zlib-1.2.11.tar.gz
tar -zxf zlib-1.2.11.tar.gz

4. OpenSSL 다운로드

cd /home/username/apps/nginx-1.12.0
wget http://www.openssl.org/source/openssl-1.0.2f.tar.gz
tar -zxf openssl-1.0.2f.tar.gz

5. NGINX 설치

cd /home/username/apps/nginx-1.12.0
./configure --prefix=/home/username/apps/nginx --with-zlib=./zlib-1.2.11 --with-pcre=./pcre-8.37 --with-openssl=./openssl-1.0.2f --with-http_ssl_module --with-http_stub_status_module
make install
cd /home/username/apps/
rm -rf nginx-1.12.0

6. 실행권한 설정

cd /home/username/apps/nginx/sbin
sudo chown root nginx
sudo chmod +s nginx

7. 실행 및 테스트

cd /home/username/apps/nginx/sbin
./nginx //시작
//포트 80 이 사용중이면, /home/username/apps/nginx/conf/nginx.conf 에서 liten 80 을 변경해주면 된다.

//자신의 서버 ip:prot 로 접근해보면 nginx index페이지 뜬것을 확인 할 수 있다. 

./nginx -s stop  //종료

 

목적



윈도우 로컬환경에서 셀레늄 테스트 모듈을 구현하는 것은 비교적 쉽게 구현할 수 있다.

문제는 커맨드 환경인 리눅스 서버에서 가상 모니터를 띄우고 젠킨스와 연동하여 테스트를 자동화 하는것이다.

때문에 CentOS 환경에서 셀레늄 테스트를 자동화 하는데 초점을 맞추어 가이드를 썼다. 

해당 포스트는 아래 내용을 포함한다.

  • Selenium을 이용하여 웹 테스트 모듈을 구현.
  • CentOS와 Jenkins를 이용하여 셀레늄 웹 테스트를 자동화.

테스트 환경



최대한 최신환경을 사용하려 노력했다.


셀레늄 : 3.2.0 (selenium-java, selenium-chrome-driver, selenium-server)

브라우저 : Chrome 56.0.2924.87 (64-bit)

크롬 드라이버 : ChromeDriver 2.27

스프링 : 3.2.17.RELEASE

CentOS : CentOS Linux release 7.1.1503 (Core)

Jdk : 1.8.0_101 (Oracle)

테스트 구현



1.Spring Maven 프로젝트를 생성하여, 테스트환경을 구성한다.


2.셀레늄 테스트를 위하여 pom.xml에 라이브러리 의존성을 설정한다.

<!-- pom.xml selenium -->
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>3.2.0</version>
</dependency>
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-chrome-driver</artifactId>
<version>3.2.0</version>
</dependency>
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-server</artifactId>
<version>3.2.0</version>
</dependency>


3.테스트를 작성한다.


  setUp() 에서 크롬 드라이버 위치 지정

  테스트 내용은 구글에서 "어쩌다, 블로그"를 검색 

  -> 검색 결과중  "어쩌다, 블로그"라는 문자열을 가진 링크를 10초간 대기하면 찾기

  -> 클릭

public class SeleniumSampleTest {

private WebDriver driver;

@After
public void tearDown() throws Exception {

Thread.sleep(5000);
driver.quit();
}

@Before
public void setUp() throws Exception {

System.setProperty("webdriver.chrome.driver", "D:\\gecko\\chromedriver.exe");
driver = new ChromeDriver();
}

@Test
public void testGetGoogle() throws Exception {

driver.get("http://www.google.com");
WebElement searchBar = driver.findElement(By.cssSelector("#lst-ib"));
searchBar.sendKeys("어쩌다, 블로그");
driver.findElement(By.cssSelector("#_fZl")).click();
WebElement bkim = new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable( linkText("어쩌다, 블로그"))); bkim.click();
} }


4.테스트 정상작동확인.

리눅스에서 셀레늄 환경 구성 하기



CentOS 메이븐과 젠킨스가 설치되어 있다는 가정하에 진행한다.

젠킨스가 아니더라도 메이븐 테스트를 진행하는 방법은 많다. 

아래 가이드하는 환경 설정 후 메이븐 테스트를 위해 다른 툴을 사용하여도 무방하다.


1. 혹시 GCC가 깔려있지 않으면 설치해주자. 크롬 실행 시 필요한 라이브러리들을 가지고있다.


2. 크롬 설치 (https://tecadmin.net/install-google-chrome-in-centos-rhel-and-fedora/)


위 링크에서 크롬을 설치하여도 GUI 환경이 준비되지 않은채 google-chrome 명령어를 날리면

browser_main_loop.cc(272)] Gtk: cannot open display 와 같은 에러를 뱉으며 크롬이 실행 되지 않는다. 우선 설치만 해두자.


3. 크롬 드라이버 다운로드 (https://chromedriver.storage.googleapis.com/index.html?path=2.27/)


위 링크에서 환경에 맞는 드라이버를 다운로드 후 적절한 경로에 다운 받은 후,

테스트 소스에서 chrome.driver 경로를 맞춰주자.


4. Xwindows 설치 (http://chandrewz.github.io/blog/selenium-on-centos)


위 링크를 참고하거나 아래 명령어를 수행한다.


설치

$ sudo yum install Xvfb libXfont Xorg
$ sudo yum groupinstall "X Window System" "Desktop" "Fonts" "General Purpose Desktop"

99번 포트로 Xwindows 실행 

$ Xvfb :99 -ac -screen 0 1280x1024x24 &

 99번 포트로 XWindows display 포트 지정

$ export DISPLAY=:99

 이제 다시 google-chrome 명령어로 크롬을 실행해보면 cannot open display  와같은 에러가 사라진것을 알 수 있다.

젠킨스 연동



1. 테스트로 만든 maven 프로젝트를 서버로 업로드한다.

   (메이븐으로 테스트를 돌릴것이기 때문에 따로 빌드하여 올릴 필요는 없다.)


2. Jenkins에서 Freestyle project를 하나 생성한다.


3. 프로젝트 이름과 로그 로테이션을 각각 설정한다.


4. 빌드 환경에서 테스트 전후로 Xwindow를 사용할 수 있도록 Start Xvfb before the build, and shut it down after. 를 반드시 체크한다.




5. Build 단계로 이동하여 Execute shell 항목에 테스트를 실행할 쉘 명령어를 입력한다.

  2번단계에서 소스 업로드한 폴더로 이동 (cd /home1/irteam/deploy/test)

  메이븐으로 테스트 실행  -Dtest=클래스명#메소드명 test  (mvn -Dtest=SeleniumSampleTest#testGetGoogle test)

cd /home1/irteam/deploy/test
mvn -Dtest=SeleniumSampleTest#testGetGoogle test

6. 테스트 수행 및 테스트 성공 확인.

마치며



셀레늄은 브라우저를 포함한 사용자 환경을 그대로 재현하여 테스트하기 때문에, 클라이언트에 가장 가까운 테스트 툴이라 할 수 있다.
그 특성때문에 리눅스 서버에서 수행하기에는 어려움이 따른다. 이를 해결하고자 삽질했던 내용들을 블로그에 남겼다.

리눅스에서 셀레늄을 돌리고자하는 분들의 삽질에 도움이 되길바란다.


☞ 관련하여 어떤 내용이듯 댓글로 달아주시면 답글 드리겠습니다. 감사합니다.

+ Recent posts