어쩌다, 블로그

1. Node.js 설치

https://nodejs.org/ko/ 에 접속하여 stable 버전인 v6.10.3 LTS 를 다운받고 설치한다.

2. Angular CLI 설치 (https://cli.angular.io/)

cmd 창에서 

npm install -g @angular/cli@latest 

npm install --save-dev @angular/cli@latest

여기까지 설치 후 cmd 창에서 ng -v를 날려보면 다음과 같은 버전 정보가 나와야한다.

#최근 angular 패키지의 이름이 변경되었고, 이전버전을 디프리케이트 했다. 

골뱅이가 붙어서 시작하는게 변경된 버전이니 책이나 구버전 문서들을 볼때 주의해야겠다.

3. IntelliJ 플러그인 설치

IntelliJ에는 Angular 프레임워크가 없다. (Web Storm 에는 있음)

플러그인으로 설치 하기 위해 IntelliJ Settings -> Plugins -> Browse Repositories -> AngularJS 를 검색 설치한다.

재시작 후 File -> New -> Project -> Static Web 을 보면 Angular CLI 를 확인할 수 있다. 

4. 프로젝트 생성

File -> New -> Project -> Static Web 을 보면 Angular CLI 후 Next를 클릭하면,

프로젝트 이름과 위치를 지정할 수 있으며, Node Interpreter 와 Angular CLI를 선택 할 수 있다. 

Node 는 1번 단계에서 설치한 node.exe.의 위치를, Angular CLI 는 npm으로 설치한 Angular CLI 패키지 위치를 지정해주면된다.

프로젝트 생성을 마치면 IntelliJ가 자동으로 Angular CLI에 new 명령어를 날려 필요한 라이브러리들을 다운받고 설치한다.

Angular CLI 위치가 목록에 보이지 않는다면 다음 사이트를 참조해보자.

https://www.jetbrains.com/help/idea/2017.1/using-angular.html

http://revf.tistory.com/entry/IntelliJ%EC%97%90%EC%84%9C-Angular2-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-with-Angular-CLI

5. output 세팅

AngularJs는 타입스크립트를 사용하기 때문에 타입스크립트를 자바스크립트로 컴파일 하는 빌드과정이 필요하다.

IntelliJ 터미널 또는 좌측 하단 npm 창에서 build 를 클릭하면 명시적으로 컴파일할 수 있다. 

이때 컴파일 결과물들을 임의의 위치에 저장하려면  angular-cli.json 설정을 수정하면 된다.

추후 스프링과 연동할때 필요할것으로 보이므로 관심이 있으면 수정해보자.

"outDir": "dist",  --> "outDir": "output",  

빌드 시작

빌드 성공

빌드 결과물

6. 프로젝트 실행

생성한 프로젝트를 실행하기 위해 Angular CLI 는 serve 명령어를 지원해준다.

IntellJ의 npm 창에는 start로 표시되어있는데, 클릭해보면 터미널 창에서 ng serve 명령어를 날리는 것을 볼 수 있다.

ng serve 를 하면 콘솔창에서 연결정보 (localhost:4200)를 확인 할 수있다.

(ng serve 는 ng build 를 포함한다.)

7. 실행 확인

별다른 설정을 하지 않았다면, ng serve로 시작한 어플리케이션은 라이브 코딩을 지원한다. (자동 빌드)

src/app/app.component.ts 의 title 변수를 변경하고 저장하면 자동으로 업데이트 되는것을 확인 할 수 있다.

목적

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

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

때문에 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. 테스트 수행 및 테스트 성공 확인.

마치며

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

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

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

목적

 빌드 서버를 설치, 설정 및 확장 및 패치 등에 신경쓰지 않고, CodeBuild를 활용하여 개발 과정에서 유연상을 보장하고 여러 형태의 빌드 상태나 호환성의 불일치 문제를 해결할 수 있습니다. CodeBuild를 사용 하면, 사전에 빌드 서버를 프로비저닝 할 필요가 없으며, 대기중인 빌드를 쌓아 두는 대신에 빌드 볼륨을 활용할 수 있도록 자동으로 확장됩니다. 분당 $0.005부터 시작하는 가격으로 분당 기준으로 빌드 리소스에 비용을 지불하기 때문에 사용한 시간만 비용을 지불합니다.

• CodeBuild 프로젝트 생성 (Configure your Project)
• CodeBuild 서비스에서 Create Project를 클릭한다.
• Project name은 아무거나 상관없다. 
• 
• Source: What to build
• 소스코는 github에서 가져오려고한다. 간단하게 사용자 인증을 하면, 내 깃헙의 레파지토리를 볼 수 있다.
• 
• buildspec.yml 작성
• 프로젝트 루트레벨에 buildspec.yml 이름의 파일을 생성한다.
• 실직적으로 빌드를 위한 스크립트내용을 담고 있는 파일이다.
  
  version : 0.1 (빌드할 프로젝트의 버전)
  environment_variables : (환경 변수로 빌드 시 입력받을 수도 있지만 여기서도 받을 수 있다. 없어도 됨)
  phases : 빌드 단계별 설정으로 pre bulid 와 build만 작성했다.
  artifacts : 빌드 완료 후 결과물 경로를 위한 설정으로 AWS S3에 업로드하기 위한 필수조건이다.
  
  
• 

• Environment: How to build
• 빌드 스크립트를 buildspec.yml를 통해 정의했다면 빌드 환경만 선택해 주면 된다.
• OS는 현재 Ubuntu만 사용가능하다. (Java, jdk8 선택)
  
• 
  
  
• Artifacts: Where to put the artifacts from this build project
• 빌드 후 생성되는 war 파일을 저장할 곳을 지정한다.
• 같은 리전의 S3 저장소만 사용할 수 있음에 유의한다.
  
• 
• Service role & Advanced settings
• 서비스 롤과 빌드 서버 성능, 환경변수값을 지정할 수 있다.
• 자세한 설명은 생략한다.
  
• 

빌드하기

삽질내용,  앞으로 AWS CodeDeploy 연동