어쩌다, 블로그

안드로이드 빌드 서버를 구성하면서 메모한 내용을 정리한다.

빌드환경은  CentOS7, Jenkins, Github, Sdkmanager 로 구성하였다.

안드로이드 25 버전부터는 GLIBC_2.14 를 사용하기 때문에 CentOS 6이 아닌 7을 사용해야한다.

CentOS 6에도 GLIBC_2.14를 설치할 수 있지만, 커널쪽 라이브러리를 수정하는건 부담이다. 피하자.

안드로이드 SDK설치

안드로이드 SDK설치 과정이 바뀌었다. 포스트를 쓰게 된 가장 큰 이유다.

안드로이드 빌드환경 구성 방법을 구글링 해보면 adnroid-sdk r24.4.1 압축파일을 다운받아 SDK를 설정하는 방법이 대부분이다.

여기서는 최신버전 SDK로 빌드하기 위해, 안드로이드 공식 홈에 나와있는 sdkmanager를 사용했다.

sdkmanger 설치 & 경로 설정

android 폴더를 만들어 sdkmanger를 다운 받는다.

sdkmanger의 bin 폴더를 PATH에 추가 후 sdkmanger --list 명령어로 테스트 해본다.

안드로이드 패키지 리스트가 나오면 설치완료.

mkdir android
cd android
wget https://dl.google.com/android/repository/sdk-tools-linux-3859397.zip
unzip sdk-tools-linux-3859397.zip
rm sdk-tools-linux-3859397.zip
PATH=$PATH:/절대경로/android/tools/bin
sdkmanager --list

sdkmanger로 sdk 다운로드 

아까 생성한 android 폴더에서 platform-tools와 android-25, 26 platform을 설치한다.

설치가 완료되면 몇몇 폴더들이 추가되어있다.

지금의 android 폴더가 ANDROID_HOME이니 경로를 기억해두자.

sdkmanager "platform-tools" "platforms;android-25" "platforms;android-26"

[bkim@server android]$ ls
build-tools  licenses  output  platforms  platform-tools  tools

깃 설치

깃허브에서 안드로이드 프로젝트 소스를 받아올것이다. 젠킨스 세팅 전에 git을 설치하자.

설치 후 git 명령어를 날려보면 깃 명령어 리스트가 보인다.

yum update
yum install git
git

젠킨스 세팅

젠킨스 설치

젠킨스 설치 과정은 따로 설명하지 않겠다. jar 파일을 다운받아 바로 실행하는 방법도 좋고, tomcat으로 띄우는 방법도 좋다.

젠킨스 공식 사이트를 참고하면 최신버전을 설치 할 수 있다.

환경변수 설정

ANDROID_HOME을 설정하자. 젠킨스는 편리하게 환경변수를 추가할 수 있는 메뉴를 제공한다.

왼쪽 메뉴 중 Jenkins 관리 -> 시스템 설정 -> Global properties에 추가 -> 이름 ANDROID_HOME -> 값 아까 SDK 설치 경로 (/절대경로/android)

플러그인 설치

github 연동을 위하여 git 관련 플러그인들을 설치해주자.

왼쪽 메뉴 중 Jenkins 관리 -> 플러그인 관리 -> 설치가능 -> git plugin, github plugin 설치

(gradle이 설치되어있지않으면 gradle 플러그인도 추가하자)

빌드 테스크설정

빌드 테스크 설정을 위해 새로운 Item을 추가하자.

왼쪽 메뉴 중 새로운 Item -> Item 이름입력 -> Freestyle project 선택 -> OK

아이템이 생성되었으면, 아이템 설정을 해주자. 단순 빌드를 위한 설정은 단순하다.

소스 코드 관리 탭 -> git 선택 -> Repository 주소 입력 -> 깃헙 계정 입력 (나는 서버에 깃헙 키를 등록해두어서 따로 사용자 연동을 하진 않았다)

빌드 탭 -> Use Gradle Wrapper 선택 -> Make gradlew executable 체크 -> Tasks 에 clean assembleDebug 입력 (gradle 명령어는 각자에 맞게 수정)

빌드 후 조치 탭 -> 빌드 후 조치 추가에서 Archive the artifacts 선택 -> Files to archive에 빌드 완료시 apk 결과물이 떨어지는 경로 입력 (따로 세팅 안했으면 app/build/outputs/apk/*.apk 로 입력하면 된다.)

빌드 후 조치에서 Jenkins 저장 이외에 메일로 apk를 보내준다던지, 배포서비스로 apk를 전달하는 것 같은 태스크를 추가 할 수 있다.

또한 빌드 유발 탭에서 깃헙 push 할때마다 빌드도록 세팅해두고, 빌드 후 조치 탭에서 빌드 결과를 메일이나 메신저로 전달하면... 좋다.

설정 저장 -> Build Now 클릭 -> 빌드 결과로 들어가면 빌드된 이미지를 확인할 수 있다

마치며

젠킨스를 이용해서 안드로이드 빌드 서버를 구성했다.

빌드 서버를 구성하는 이유는 대부분 CI 환경을 만들기 위함일 것이다.

이제 젠킨스에 Findbugs 같은 코드 분석툴을 붙이고, 그래들 스크립트로 테스트 검증도 할 수 있다.

Deploy Gate라는 서비스를 이용하면 apk를 배포하고, 무선으로 테스트폰에 설치까지 해준다고한다.

결국에는 편하자고 하는 일들이니 우리들 모두 화이팅!!!

Maven vs Gradle

Maven

Gradle

Maven VS Gradle

Maven에는 gradle과 비교 문서가 없지만, gradle에는 비교문서가 존재. (비교에 자신있는 모습 ..ㅋ)

Gradle이 시기적으로 늦게 나온만큼 사용성, 성능 등 비교적 뛰어난 스펙을 가지고있다.

Gradle이 Maven보다 좋은점

• Build라는 동적인 요소를 XML로 정의하기에는 어려운 부분이 많다.
• 설정 내용이 길어지고 가독성 떨어짐
• 의존관계가 복잡한 프로젝트 설정하기에 부적절
• 상속구조를 이용한 멀티 모듈 구현
• 특정 설정을 소수의 모듈에서 공유하기 위해서는 부모 프로젝트를 생성하여 상속하게 해야 함 (상속의 단점 생김)
• Gradle은 Groovy를 사용하기 때문에, 동적인 빌드는 Groovy 스크립트로 플러그인을 호출하거나 직접 코드를 짜면 된다.
• Configuration Injection 방식을 사용해서 공통 모듈을 상속해서 사용하는 단점을 커버했다.
• 설정 주입 시 프로젝트의 조건을 체크할 수 있어서 프로젝트별로 주입되는 설정을 다르게 할 수 있다.

Gradle vs Maven: Performance Comparison

• 600명의 엔지니어가 1년동안 1분걸리는 빌드를 매주 42번 빌드를 진행할 때 들어가는 비용은
  600 engineers * $1.42/minutes * 42 builds/week * 44 work weeks/year = $1,600,000/year
  이때 빌드 속도가 90% 빨라진다면?
• Gradle은 메이븐 보다 최대 100배 빠르다.
• 
• 
• 
• 
• 어떻게?
• the Gradle Daemon is a long-lived process that keeps build information “hot” in memory
• incremental task inputs and outputs for various types of tasks makes it unnecessary to run clean ever again
• incremental compilation analyzes the dependencies between your sources and classes and recompiles only those which are affected by changes
• the build cache fetches results from a cache when switching branches or running a clean build and the same output has already been produced somewhere else in the organization.
• Gradle’s smart classpath analyzer avoids unnecessary compilation when the binary interface of a library hasn’t changed
• better modelling of dependencies using the Java Library plugin reduces the size of the compile classpath which has a large, positive impact on performance

예제

Maven
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>

   <groupId>com.example</groupId>
   <artifactId>demo-maven</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <packaging>jar</packaging>

   <name>demo-maven</name>
   <description>Demo project for Spring Boot</description>

   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>1.5.4.RELEASE</version>
      <relativePath/> <!-- lookup parent from repository -->
   </parent>

   <properties>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
      <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
      <java.version>1.8</java.version>
   </properties>

   <dependencies>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter</artifactId>
      </dependency>

      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-test</artifactId>
         <scope>test</scope>
      </dependency>
   </dependencies>

   <build>
      <plugins>
         <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
         </plugin>
      </plugins>
   </build>


</project>

Gradle
buildscript {
    ext {
        springBootVersion = '1.5.4.RELEASE'
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
    }
}

apply plugin: 'java'
apply plugin: 'idea'
apply plugin: 'org.springframework.boot'

version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8

repositories {
    mavenCentral()
}


dependencies {
    compile('org.springframework.boot:spring-boot-starter')
    testCompile('org.springframework.boot:spring-boot-starter-test')
}

결론

출처

1. NGINX 다운로드

2. PCRE 다운로드

3. zlib 다운로드

4. OpenSSL 다운로드

5. NGINX 설치

6. 실행권한 설정

7. 실행 및 테스트

HTML5 Video Tag

interface HTMLVideoElement : HTMLMediaElement {
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute unsigned long videoWidth;
  readonly attribute unsigned long videoHeight;
           attribute DOMString poster;
};

interface HTMLMediaElement : HTMLElement {

  // error state
  readonly attribute MediaError error;

  // network state
           attribute DOMString src;
  readonly attribute DOMString currentSrc;
  const unsigned short NETWORK_EMPTY = 0;
  const unsigned short NETWORK_IDLE = 1;
  const unsigned short NETWORK_LOADING = 2;
  const unsigned short NETWORK_NO_SOURCE = 3;
  readonly attribute unsigned short networkState;
           attribute DOMString preload;
  readonly attribute TimeRanges buffered;
  void load();
  DOMString canPlayType(in DOMString type);

  // ready state
  const unsigned short HAVE_NOTHING = 0;
  const unsigned short HAVE_METADATA = 1;
  const unsigned short HAVE_CURRENT_DATA = 2;
  const unsigned short HAVE_FUTURE_DATA = 3;
  const unsigned short HAVE_ENOUGH_DATA = 4;
  readonly attribute unsigned short readyState;
  readonly attribute boolean seeking;

  // playback state
           attribute double currentTime;
  readonly attribute double initialTime;
  readonly attribute double duration;
  readonly attribute Date startOffsetTime;
  readonly attribute boolean paused;
           attribute double defaultPlaybackRate;
           attribute double playbackRate;
  readonly attribute TimeRanges played;
  readonly attribute TimeRanges seekable;
  readonly attribute boolean ended;
           attribute boolean autoplay;
           attribute boolean loop;
  void play();
  void pause();

  // media controller
           attribute DOMString mediaGroup;
           attribute MediaController controller;

  // controls
           attribute boolean controls;
           attribute double volume;
           attribute boolean muted;
           attribute boolean defaultMuted;

  // tracks
  readonly attribute MultipleTrackList audioTracks;
  readonly attribute ExclusiveTrackList videoTracks;
  readonly attribute TextTrack[] textTracks;
  MutableTextTrack addTextTrack(in DOMString kind, in optional DOMString label, in optional DOMString language);
};

Youtube, Twitch, Pooq

You Tube

Twitch

Pooq

Open Source

Solution

OpenSource Issue (DRM, Streaming, Mobile, Ad)

Change Detection 란 무엇인가?

Figure: File Structure 출처 - https://angular-2-training-book.rangle.io

어떻게 변화를 감지하는가? (Zone.js - 동영상)

Angular에서 구현된 소스는 다음과 같다.

this.zone.onMicrotaskEmpty
    .subscribe(() => {
        this.zone.run(() => this.tick()
    })
})

tick()
{
    this.changeDetectorsRefs
        .forEach((ref) => ref.detectChanges())
}

어떻게 변경하는가?

http://pascalprecht.github.io/slides/angular-2-change-detection-explained/#/59

Angular 컴포넌트들은 자신만의 Change Detector를 가진다?

/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
/**
 * @stable
 */
export declare abstract class ChangeDetectorRef {
    abstract markForCheck(): void;
    /**
     * Detaches the change detector from the change detector tree.

     */
    abstract detach(): void;
    /**
     * Checks the change detector and its children.
     */
    abstract detectChanges(): void;
    /**
     * Checks the change detector and its children, and throws if any changes are detected.
     */
    abstract checkNoChanges(): void;
    /**
     * Reattach the change detector to the change detector tree.
     */
    abstract reattach(): void;
}

Change Detection을 빠르게

Immutable

http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

Observable

var firstName = Observable('BK');
var lastName = Observable('KIM');

var fullName = Observable(function () {
    return firstName.value + ' ' + lastName.value;
});

http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

마치며

참조

결론

Framework

프레임워크란 무엇일까? 자바스크립트 프레임워크를 비교하기 전에 프레임워크에 대한 정의부터 분명히 해야겠다.

GoF의 디자인패턴 저자 랄프존슨은 "프레임워크란 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스를 제공하는 것" 라고 말한다. 혹자는 디자인 패턴 + 라이브러리 = 프레임워크라고 주장한다.

다양한 프레임워크가 존재하는 만큼 다양한 의미를 포함하고 있지만, 자바스크립트 프레임워크는 Inversion of control을 가능케하고 Modularity, Reusability, Extensibility 를 높이기 위한 목적을 가진 라이브러리 + 구조화 된 뼈대의 조합이라고 생각하면 좋을 것 같다. 우리가 흔히 사용하는 Jquery는 뼈대를 제공하지 않고 라이브러리만 제공하기때문에 프레임워크라고 부르지 않는다. Jquery를 사용해서 MVC 패턴을 입히면 그것은 프레임워크라 부를 수 있을 것이다.

최근 JavaScript가 사용되는 분야가 많아지고 인기가 높아지면서 오픈소스로 개발되는 자바스크립트 프레임워크들 또한 다양해지고 있다.

그 중에서 Angular 와 React를 비교해보고 이러한 상황을 비꼬는 듯한 용어인 Vanilla JS에 대하여 알아보자.

Angular

Angular는 MVC Framework로 최근 4.0버전을 출시했다. AngularJs는 1.x 버전을 지칭하고 Angular는 2.0 이후 버전을 지칭하는데, 1버전과 2버전은 패러다임의 변화가 있었고, 2버전 이후부터는 하위버전 호환을 유지하고있다. AngularJs에서 성능 문제의 주요원이었던 2 way data binding을 Angular에서는 빌트인으로 제공하지 않으며 서로 호환되지도 않음으로 분리해서 보아야 한다.

Angular는 구글 자체적으로 개발하던 AtScript를 사용하려 했으나, Microsoft와 협력하여 TypeScript를 채택했다.

한편에선 Facebook의 React와 달리 구글이 Angular를 사용하는 비중이 낮다는 점을 우려하고 있다. (YouTube를 새로 개편할 때 Polymer 사용)- 링크1, 링크2

React.js

UI 컴포넌트를 만들기 위한 라이브러리로, UI 컴포넌트만을 지원함으로 지원하는 범위가 작지만 다향한 조합으로 사용 할 수 있다.

React.js로 Angular의 directives를 구현하여 프레임워크를 구성할 수 있지만, 보통 Redux를 이용하여 프레임워크를 구축한다.

JavaScript와 TypeScript를 지원하지만 JSX라는 ECMAScript 친화적인 XML 문법을 사용할 것을 추천한다.

VanillaJS

VanillaJS는 자바스크립트 라이브러리와 프레임워크 홍수를 풍자하는 단어이다. 

Java에서 POJO와 비슷한 개념이라 볼 수 있다.

순수한 JavaScript만을 이용하여 구현한?(구현해야 할) 프레임워크다. 

별도의 라이브러리 없이 순수한 JavaScript만을 사용했기 때문에 가장 빠르고, 가벼운 장정이 있다.

http://vanilla-js.com/ 에서 사용하고 싶은 컴포넌트를 선택 후 다운받아 소스를 열어보면 그 의미를 더욱 잘 알 수 있다.

Angular VS React.js ? (2016 데뷰 정리 - 영상 , 발표자료)

1. 성능

https://github.com/CoderK/js-framework-benchmark 로 성능 평가 해본 결과 

의미있는 속도차이는 없었음. 엔터프라이즈급 서비스 개발을 위해서 생산성에 좀 더 초점을 두어야 할것 같다.

학습 비용은 비슷하다고 생각함.

2. 언어 생산성

최근 Angular CLI 까지 나오면서 개발 환경과 학습 비용은 Angular가 낮다고 생각한다. 

또한, Angular가 사용되는 곳이 많아지면서 (웹앱, 앱, 데으크탑 앱) 사용성도 증가되고 있다. 

3. 컴포넌트

4. 데이터 동기화

5. 비동기 처리

결론

테스트 비교

테스트 문법

var assert = require('assert');
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal(-1, [1,2,3].indexOf(4));
    });
  });
});

describe("A suite is just a function", function() {
  var a;
  it("and so is a spec", function() {
    a = true;
    expect(a).toBe(true);
  });
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.3.2.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="https://code.jquery.com/qunit/qunit-2.3.2.js"></script>
<script src="tests.js"></script>
</body>
</html>

QUnit.test( "hello test", function( assert ) {
  assert.ok( 1 == "1", "Passed!" );
});

사람들이 좋아하는 이유(출처 https://stackshare.io/stackups/jasmine-vs-mocha-vs-qunit)

Stackshare 특징비교 (https://stackshare.io/stackups/jasmine-vs-mocha-vs-qunit)

구글 트렌드

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

마치며

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

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

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