행복치킨

메뉴 : 순살 후라이드 치킨  + 강정치킨 + 맥주 5

total : 48,000원


후기 

깍돌이 : BBQ 말고 후라이드는 맛없을거라는 편견을 깬날

깍돌이 회사 동기 : 맛있네

깍돌이 회사 연구원님 : ㅈ나 맛있지? 후라이드는 여기 정자점이 역대급이야



황제명태본가

메뉴 : 점심특선 명태조림 (* 인당가격)

total : 44,000원

후기 

깍돌이 : 명태 조림 그냥 저냥 인데 소스가 밥도둑 밥이 계속 들어감 2그릇 클리어

깍돌이 부모님 : 명태를 이렇게 맛있게 하기가 힘들다 맛있지~

깍돌이 부모님 친구분 : 11시엔 와야지 아니면 30분 기다려야 돼~




 

 

설해돈

메뉴 : 매갈까스 ( 약간 매운맛 ) 

total : 22,000원


후기 

깍돌이 : 생각보다 갈비찜이 달기만 함 치즈돈가스는 모두가 알던 그맛

깍돌이친구 : 그냥 맛있네~


안녕하세요 오늘은 CSS의 우선순위에 대해 작성해보려고 합니다.


작성할 생각이 없긴 했는데


업무하다 가 CSS 관련 우선순위 에 대한 테스트 파일을 만들게 된게 조금 아쉬워서


포스팅하게 되었습니다.



기본적으로 CSS 우선순위는  


1 순위 -> !important

2 순위 -> inline style attirbute ex:       <button style="background: red; color:white;"></button>

3 순위 -> id

4 순위 -> 없는 attribute가 있을 경우

5 순위 -> tag element



아래의 자료를 보면 어느정도 이해가 되실텐데요 



CSS order 

https://www.w3schools.com/css/css_howto.asp


오늘 포스팅할 내용은 우선순위가 같을 경우는 지정한 개수가 더 많은 css가 높은 우선순위를 지니게 되는데요


이점에 대해서 작성하려고 합니다.


우선 아래의 이미지를 보시면



 

기본적으로 화면은 이렇게 되어있습니다.

 

화면에 대한 태그는

 

 

이러한 형태의 구성을 지니고있습니다.

 

csstestArea -> dummyDiv   > 버튼들

 

각각 버튼에 css를 보시면 .btn 클래스와 .cssFirst .btn 클래스와 .cssSecond 클래스 형태로 붙어있습니다.

 

지정된 css는

 

 

이런형태로 지정이 되어 있습니다.

 

.btn .cssFirst는

 

.btn 의셀렉터를 통하여 기본적으로 지정이된 후에

 

.cssFirst가 입혀집니다.

 

가장 좌측에 있는 버튼의 색상이 변경되는 이유입니다.

 

이 상태에서 cssFirst를 선택자를 더늘려서 선택 해보겠습니다.

 

 

 

 

뒤에 선언됐으니까

 

겹쳐진거 아니냐 할수도있어서

 

위로 올려보면

 

 

 

결과는 이렇습니다.

 

전체 테스트 하였던 파일은 아래에 적어 놓겠습니다.


글 읽어 주셔서 감사합니다.



 

 

<!DOCTYPE html>
<html>
<head>

    <title> 테스트 </title>
    <meta charset="utf-8">
    
    <style>

*{
    box-sizing:border-box;
}
    .csstestArea{
        display:flex;
        flex-flow:row nowrap;
        justify-content:flex-start;
    
    }
    .csstestArea .btn{
        display:flex;
        padding:6px 12px;
        font-size:14px;
        font-weight:400;
        line-height:1.42857143;
        white-space:nowrap;
        text-align:center;
        width:100px;
        height:50px;
        margin:5px;
        vertical-align:middle;
        color: white;
        border:1px solid transparent;
        user-select:none;
        background-image:none;
        border-radius:4px;
        
        outline:0;
    }

    .csstestArea .dummyDiv .cssFirst{
        background-color:red;
    }

    .cssFirst{
        background-color:#CEFBC9;
    }
    

    .cssSecond{
        background-color:#FAF4C0;
    }

    .dummyDiv{
        display:inherit;
    }
    .csstestArea button:active{
        outline:0;
        background-color:#D4F4FA;
    }
    </style>
</head>
<body>
<div class="csstestArea">
    <div class="dummyDiv">
            <button type="button" class="btn cssFirst"></button>
            <button type="button" class="btn cssSecond"></button>
            <button type="button" class="btn"></button>
    </div>
</div>
</body>
</html>


안녕하세요 테스트링크 및 젠킨스 연동 포스팅도 끝났고


Chrome 브라우저에 대한 자동화 빌드 테스트도 어느정도 마무리가 된것 같습니다. 


사실 연결만 되었고 결과 받고 100프로 다 된것 같지만 고도화 등 마무리 처리를 해주어야 할 작업이 산더미 입니다.


하지만 이 작업들은 여기까지 오셨다면 다들 할수 있을거라 생각하기 때문에 따로 포스팅은 하지 않으려고합니다.


현재 자동화 도식도를 좀더 눈으로 보기 좋게 그려봤습니다



젠킨스가 빌드를 땅 시작합니다.(when a build step) 빌드 유발을 통해서 (이부분은 따로 Jenkins - 빌드 유발로 포스팅하겠습니다.)


그럼 셀레니엄 테스트코드가 있는 최신 master 브랜치에서 코드를 가져온후에 셀레니엄 코드를 실행합니다.


위의 사진에선 파라미터로 Chrome을 넘겼기 때문에 크롬 브라우저가 실행되겠네요 


테스트할 페이지 (top.js -client) 의 아랫단에는 factory 라는 모듈(간단하게 제작)이 있는데 이 해당 모듈은 E2E TestCase 


에 기반하여 사용자 또는 셀레니움이 했던 행동들을 기록하며 리포팅을 해줄수 있도록 되어있습니다. top.js - client에는


테스트의 마지막을 뜻하는 End Point 지점이 있는데요 이 지점이 클릭 됐을 시 연초록색 화살표 대로 발생합니다.


앤드 포인트가 찍히는 시점은 2갠데요 


1. Selenium 이 찍었을때 


.click() 후 작업이  해당 테스트 결과를 Junit-report.xml 형태로 만들어놓습니다.


만드는건 xmlBuilder를 사용하여 직접 간단하게 만들었습니다.


만들어 놓게 되면  셀레니움 빌드가 끝나게 되는데요 그렇게되면 Jenkins에 있는 TestLink Plugin 이  제가 설정한대로


junit -report 파일을 찾습니다. 찾을 때는 설정에 따라 다른데요 저는 classname으로 지정해놨기 때문에


classname이 Custom Field랑 같은 경우를 찾습니다.


TestLink 에서 처음으로 날아온 TC(TestCase)의 customField값이 CustomField_0001 이라고하면


<testcase  classname ="CustomField_0001"></testcase> 이 값을 찾게 됩니다. 그래서 만약에 해당 xml을 찾았을때


<failure>라는 태그가 없을시에는 pass로 처리를 하고 있을 경우 fail로 처리합니다.


그래서 원래는 Iterative Build Steps에서


테스트링크로 매번 넘어오는 테스트 케이스에 대한정보를 통해서 그때그때 실행하고 결과를 받아야 합니다.


하지만 저 같은 경우는 E2E테스트가 먼저 이루어진 후에 해당 결과를 넣어 줘야 하는 경우이기 때문에 


이렇게 작성되어있으며


아래 사진은 top.js (Client ) 에 있는 factory 라는 모듈에서 


factory.report() 를 호출했을때 의 모습입니다. 보시면  45건은 기본 페이지 렌더링시 하는 케이스들인데


이부분들에 대한 성공 실패와 우측엔 가렸지만 실패 메시지등이 들어있습니다.


End Point에서는 해당 리포트를 호출한 후 Node.js로 보내게 됩니다. 2번에서 따로 말씀드립니다.


셀레니엄 에서는 이부분을 






topqa.prototype.createJunitReport = async function(){
try{
let array = [];
const retVal = await this.driver.executeScript('return factory.report()');
makeJunitReport(retVal);
}
catch(err){
console.log(err);
}
}


Selenium에서는 executeScript 라는 API 가있습니다. 브라우저 인젝션을 할수 있도록 만들어진 API 인데요


위에 보시는 것처럼 factory.report() 를 호출후에 return 을 넣어 주면 retVal 에 해당 테스트결과를 받아 볼수 있습니다.


중간에 보시면


makeJunitReport(retVal);


라는 함수가있는데 이 함수의 내용은 이렇습니다.


const { makeJunitReport } = require('./topqaXmlBuilder');


이렇게 가져와서 사용하고 있으며 toqpaXmlBuilder의 원문은


/*

***** Pass Test Case
<testsuite>
<testcase classname="casebind" name="testName"></testcase>
</testsuite>

***** Fail Test Case
<testsuite>
<testcase classname="casebind" name="testName">
<failure type="test">Error Message</failure>
</testcase>
</testsuite>
*/

const builder = require('xmlbuilder');
const fs = require('fs');
const path = require('path');
const xmlHeader="<?xml version='1.0' encoding='UTF-8'?>";

// Create Test Dir
function makeDir(path){
fs.mkdirSync(path,{mode:0777});
}
// write file junit-testCase.xml
function makeJunitReportFile(xmlContent,path,testCase){
console.log(testCase);
let fd = fs.openSync(path+'/junit-'+testCase+'.xml','w');
fs.writeFileSync(fd,xmlContent,{encoding:"utf-8"});
}

function _isArray (array){
if((!!array && (array.length !==0 && typeof array.length!=="undefined"))){
        // [1] 의 배열도 return 이 되는데 이건 추후 생각
        return array;
}
    else{
        return false;
}
}
function makeJunitReport(testResultArray){
const array = _isArray(testResultArray);
if(array===false){return;}

console.log(array);
// // File Write for junit-*.xml
const dirPath = path.join(__dirname,'../chromeBuilding');
// ie firefox에 따라 다를수 있기 때문에 chromeBuilding -> Building으로 수정
!fs.existsSync(dirPath) ? makeDir(dirPath) : console.log('폴더 미생성');

testResultArray.reduce((acc,curr,index,arr) =>{
let junitObj = {
'testsuite': {
'testcase':{
'@classname':curr.tc,
'@name':curr.tc,
}
}
};
// fail Case
if(curr.result.toLowerCase()==='fail' || curr.result.toLowerCase()==='block'){
let failObj = {
'#text':curr.msg,
'@type':curr.result.toLowerCase() + 'Case'
};
junitObj.testsuite.testcase['failure'] = failObj
}
// xml Create
const junit = builder.create(junitObj,{encoding:'utf-8'});
// Create xml pretty change
const xmlContent = junit.end({pretty:true});
if(curr.tc.length>=1){
makeJunitReportFile(xmlContent,dirPath,curr.tc);
}
},0);
console.warn('test Result reporting Complete');
}
function api(){console.log('api')}

module.exports = {
makeJunitReport,
api
}


단순합니다. 저 위에 factory.report 에 있는 배열의 형태를 받아서 _isArray 를 통해 확인 후 테스트결과 폴더 생성 (없을시)


생성 후에 배열을 순회하면서 xmlBuilder형태의 Object를 만드는데 fail케이스인 경우는 failure를 넣어주기 위한 작업을 행합니다. 그리고 결과에 대한 junit 파일을 전부 만들어 놓고 종료 합니다.


파일이 다만들어진 상태이기 때문에


Iterative Build Steps 은 필요가 없고 역시 Single Build Steps 또한 필요가 없습니다.


그렇게 되면 바로 다음 단계인


Test Seeking로 넘어가게 되는데요 이부분에서 위에 만든 파일들을 찾으면서 test Case를 update하게됩니다.



로그를 보면(Jenkins ConsoleOut) 계속 케이스가 업데이트 되는 걸 확인 하실수 있습니다.


2. Selenium 이 EndPoint를 찍고나서 해당 함수가 Call 됐을때


2번째 End Point인데요 뭔가 다른거 같은데 차이를 쉽게 설명 드리자면


EndPoint Function 이 있습니다.


function endPoint(){ console.log('do anything');}


해당 함수는 어떤 버튼에 callback 으로 작성되어있을 건데  1번은 그 버튼을 찾아서 찍고난 후 이고 이번에 2번은


셀레니움이 찍어서 관련 함수가 callback 되었을때의 시점입니다.


해당 함수에서는 1번과 같이 factory.report()를 통한 결과를 가져온 후에


ajax 로 Node.js 서버에 보낼때 테스트결과와 해당 lib버전을 같이 보내는데 그 내용을 DBMS와 파일 2가지로 저장합니다.


해당 이유는 React 페이지에서 결과 추이 (전버전과 차이점 , 버그가 많은 버전, 변경된 기능 )


등을 볼수 있도록 하기 위함입니다.


감사합니다.


factory 모듈에 대해서는 따로 포스팅은 않았습니다.  뭔가 정형화된 패턴도 아니고 저만의 테스트 방식이라서 .. 


여기까지 Jenkins TestLink E2E 테스트 관련 이였습니다.


감사합니다.



안녕하세요 저번 포스팅에서 


테스트링크 젠킨스 연동전에 기본적인 개요 및 전체적인 프로세스 등에 대해서 

포스팅하였습니다.

https://ipex.tistory.com/entry/Jenkins-%ED%85%8C%EC%8A%A4%ED%8A%B8%EB%A7%81%ED%81%AC-%EC%A0%A0%ED%82%A8%EC%8A%A4-%EC%97%B0%EB%8F%99-1-%EB%B0%8F-%EC%9B%B9-%EC%9E%90%EB%8F%99%ED%99%94-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EA%B0%9C%EC%9A%94-TestLink-with-Jenkins-Windowsver-and-webAutomation-OverView?category=767972


이번에 작성할 내용은 빌드 작업입니다.


기존 작업 기능 List 


1. General 탭  

 오래된 빌드 삭제 (25일 설정)


2. 소스코드 관리 탭 

빌드 시작전 git에서 master 브랜치를 가져와서 workpace에 세팅하는 작업


3. 빌드 유발 

Build when a change is pushed to GitLab. GitLab webhook URL :  체크 

없을시 GitLab Plugingit plugin 설치 후 gitLab에 있는 webHook 기능으로 빌드 유발


** 빌드 유발 쪽 체크 

4. 빌드 환경

Delete workspace before build start  + ant style **/chromeBuilding/ 을 통하여

workspace/chromeBuilding 폴더 빌드 전 삭제 

 

이제 5번 빌드 입니다.


Build Job 은 현재 3가지가 있습니다. (포스팅할때는 이미 다 해놓은 상태에서 포스팅!)


IE Automation

Chrome Automation

FireFox Automation 


세가지에 대한 빌드는  각각 다르게 돌아가지만 다 같은 내용이기 때문에  한번 포스팅 하겟습니다.


5. 빌드

빌드는 2가지로 나뉩니다. 

5.1 Selenium-WebDriver


5-2 TestLink 




5.1 Selenium-WebDriver


우선 셀레니엄 웹 드라이버 코드를 빌드는 매우 단순합니다.


Build 탭 - Add build step  - Execute Windows batch command 




을 누르신 후에 Command 에 node _auto.js [param]


_auto.js 는 미리 작성된 셀레니엄 자동화 테스트 코드 입니다. 


** 테스트 타겟인 자동화 메인 페이지의 경우 (lib가 변동되거나 할때 git으로 push 또는 merge시 같은 webhook 발생) 



5-2 TestLink 

자 문제의 testLink 입니다.


시작하기에 앞서 중요한 점이 있습니다. testLink 버전에 따라 이슈가 있을수 있기 때문에 버전 명을 기입하겠습니다.


testLink 1.9.16(Moka pot) 버전을 사용하고 있습니다.


Jenkins 2.141 


빌드 작업 전에 설치 및 세팅 작업을 해주어야 합니다.


플러그인 설치


- Jenkins Home ( Jenkins 관리 )  -> 플러그인 관리


- 필터 : TestLink 입력 후  설치 버튼 




- 재 시작 후 TestLink Plugin 설치 확인 을 위해 - Jenkins 관리 - 시스템 설정 


TestLink 있는지 확인 


TestLInk 접속 후 (로그인까지 완료 한 상태)  아래의 아이콘을 선택하여서 API 키 생성




TestLink Installation 에서 추가 버튼 클릭 후 아래 공란 입력


Name : ( 어떤 테스트링크에 연결할지 작성 )

URL   : 테스트링크주소:포트/testlink/lib/api/xmlrpc/v1/xmlrpc.php  (API 사용 주소)

만약에 잘안된다면 api 주소를 찾아봐야합니다.

Developer Key 저 위에 있는 API 인터페이스 밑 개인 API 접근 키 입력 




(동작 확인)


이제 빌드 단계로 가기전에 미리 해주어야 하는 작업이 있습니다.


// 테스트링크 작업 Custom Field 


// 



이제 다시 빌드 단계로 가면 


기존에 selenium 드라이버를 실행시키는 Command 가 있습니다. 이부분에서 


Add build step ! 클릭





Invoke TestLink 클릭



화면에 나타나는 TestLink Configuration 을 작성합니다.


Invoke TestLink  - TestLink Configuration


TestLink Version - TestLink Installation 에서 작성한 name을 콤보 박스에서 선택 

Test Project Name  - TestLink 에 있는 프로젝트 이름 (아래 그림 참조)


Test Plan Name  - TestLink 에서 해당 프로젝트에 따른 테스트 계획을 만들고 해당 계획을 작성합니다.

// 테스트 링크 기본 사용법은 간단하기 때문에 따로 작성하지 않겠습니다.

Build Name  - 새로운 빌드시 지정될 빌드 명을  입력합니다.

AUTOMATION_$BUILD_ID 로 되어있는데 아래 그림과같이 해당 형태로 빌드 가 자동으로 생성됩니다. 


Custom Fields - 매우 중요합니다.  테스트 결과에 대한 리포팅 파일에서 해당 CustomFields를 통하여서 작업 하기 때문입니다.

// TestLink 에서 커스텀 필드를 만든 후에 해당 필드 내에 값을 test Case와 일치 시킵니다.

// Test Case의 경우 한번에 넣는 방법이 있는데 이에 관련해서는 이 포스팅 다음에 번외로 작성하겠습니다.


Invoke TestLink  - TestExecution

해당란에는 2가지가 있습니다.

1. Single Build Steps  

해당 빌드 작업을 한번만 실행합니다.

2. Iterative Test Build Steps 

해당 빌드 작업을 여러번 실행합니다.

이해가 편하게 testlink 에서 케이스가 날라옵니다.  아래의 케이스


id : 55123

name : TOP_WIDGET_CREATE

summary : 위젯이 생성되는지 테스트합니다.

caseBind(custom설정을하였다면) : TOP_WIDGET_CREATE 

....

위의 한개의 케이스가 100개 1000개 있을텐데 해당 케이스가 한번에 날라오게 됩니다.


Single Build Steps의 경우는 이미 전의 테스트가 완료된 결과가 있는데 Junit이나 testNG등 리포팅 형태가 아닐 경우

해당 결과물들을 testLink Plugin 이 찾아서 실행할수 있도록 만들어 주는 커맨드를 작성합니다.


Interative Test Build Steps의 경우는 테스트 케이스가 위에 설정한 Test Plan 에 있는 순서대로 날아옵니다.

날아오는 케이스에 대한 정보를 통해서 테스트를 실행하여 결과를 받아서 사용합니다.

플러그인 도움말을 눌러 보시면 알겠지만 해당 값들을 통해서 원하는 스크립트에 파라미터로 넘길수 있습니다.


** 주의사항  (Windows는 앞뒤로 % 가 들어가야 하며 Linux 계열은 앞에 $ 가 붙어야 합니다.

Windows - %TESTLINK_TESTCASE_ID%


Linux - $TESTLINK_TESTCASE_ID




저는 첫 Build 시 node _auto.js chrome에서  결과 리포팅 파일을 만드는 작업을 하기 때문에  Test Exceution 을 사용하지 않겠습니다.

(테스트는 셀레니엄이 자체적으로 하였고 이에대한 테스트결과를 받아서 리포팅까지 작성해 놓은 상태 - 번외편에 작성하겠습니다.)


Invoke TestLink  - Result Seeking Strategy 

테스트 결과를 찾아서 입력 하는 과정입니다.

어떤 형태의 결과를 찾아서  입력할지 여러 방법이 있는데요 이중에서 저는 Junit Class Name 을 선택하였습니다.



입력 결과


// 셀레니엄 빌드 스텝에서 ChromeBuilding이라는 디렉토리를 만들고 해당 안에 테스트케이스에 대한 결과 값들을 저장합니다.

위의 패턴은 Ant Style pattern 이며 더 찾아서 공부해보셔도 됩니다.


설명하자면 workspace/ChromeBuilding/ 폴더 안에 junit-*.xml 형태의 파일들을 읽는데  junit class name 이기 때문에


caseBind (Custom Field)의 값이 classname으로 지정되어있는 xml들을 찾아서 결과를 입력 합니다.


해당 junit리포팅 형태는




***** Pass Test Case
<testsuite>
<testcase classname="casebind" name="testName"></testcase>
</testsuite>

***** Fail Test Case
<testsuite>
<testcase classname="casebind" name="testName">
<failure type="test">Error Message</failure>
</testcase>
</testsuite>



해당형태를 지닙니다. 


빌드 후 조치 단계에서는


빌드 환경에서


Delete workspace before build starts 로 해당 junit폴더를 지우고 시작했었는데요 이작업을 빌드 후 조치에서 하셔도 됩니다.



자 이제 빌드 시작 !






정상적으로 빌드가 나왔네요


눌러서 확인해보겠습니다.



45건만 자동으로 해보았는데요


첫 시작 부분은 이렇고 맨 마지막 부분은 실패한 케이스가 보이네요  



일단 왜 실패했는지도 궁금하지만? 그전에 testLink 에연동이 먼저 됐는지도 봐야겠습니다.


저기 위에 결과 보면


build name : AUTOMATION_12  라고 되어있으니 testLink 에 가서확인해보겠습니다.




정상적으로 되어있는것 같습니다. 하지만 실패 케이스의 이유가 너무 궁금하기 때문에 이것을 위해서 빌드 작업에


제가 체크한 게있는데요




저부분 때문에 testLink 에서 실패 케이스로 가서 누르시면




노트 부분에 결과에 대한 xml파일이 들어가 있습니다 . !!! 이부분은 제가 


junit파일 생성시에


testResultArray.reduce((acc,curr,index,arr) =>{
let junitObj = {
'testsuite': {
'testcase':{
'@classname':curr.tc,
'@name':curr.tc,
}
}
};
// fail Case
if(curr.result.toLowerCase()==='fail'){
let failObj = {
'#text':curr.msg,
'@type':'failCase'
};
junitObj.testsuite.testcase['failure'] = failObj
}
// xml Create
const junit = builder.create(junitObj,{encoding:'utf-8'});
// Create xml pretty change
const xmlContent = junit.end({pretty:true});
if(curr.tc.length>=1){
makeJunitReportFile(xmlContent,dirPath,curr.tc);
}
},0);


fail case일 경우에 실패 메시지와 같이 넣어 주었는데요


해당 xml을 눌러주게되면?



실패한 내용 (try catch 로 엮었던 직접 작성하였던) 확인이 가능합니다.!!

자동화 플로우가 다 끝났습니다.


Chrome과 FireFox는 거의 비슷하여서 문제가 없지만 ie의 경우는 문제가 많아서.. 트러블 슈팅 가이드를 따로 작성해야 할듯 합니다.



다음 포스팅은 Jenkins TestLink Intergration 마지막 작업으로 


번외 

1. TestCase를 한번에 넣는 방법 

2. 테스트가 어떤식으로 제작되었고  젠킨스 빌드 과정 중 결과를 어떻게 받아서 처리 하였는지 


로 작성하겠습니다.


1번과 2는 사실 나눈건 아니고 하나로 보시면 됩니다.


긴글 읽어주셔서 감사합니다.


꾸벅




안녕하세요 저번 포스팅에서 Jenkins를 Windows.Ver으로 설치 하였습니다.(Windows 7 64bit)


설치도 하였고 기본 적인 설정 및 Jenkins 서비스를 재시작 하는 부분 까지 포스팅 하였는데요


사실 빌드 자동화 및 배포 를 위한 Jenkins는 CentOS 7 에 설치 하여서 진행하고 


이게 더 관리도 좋고 편합니다. 


윈도우 젠킨스 설정 및 사용 (Windows .ver with Jenkins)

https://ipex.tistory.com/entry/Jenkins-%EC%9C%88%EB%8F%84%EC%9A%B0-%EC%A0%A0%ED%82%A8%EC%8A%A4-%EC%84%A4%EC%A0%95-%EB%B0%8F-%EC%82%AC%EC%9A%A9-Windows-ver-with-Jenkins?category=767972


하지만 이번에 하는 작업은 회사에서 사용하고 있는 private web-front-end framework 

(TOP.js - TmaxDay 에서 공개 했으니까 이름정돈 공개 해도 될것 같습니다.) 


에 대한 자동화가 필요하기 때문에 (Windows 7 64bit) 에서 하여야 합니다. (IE 때문!)  프론트 프레임워크를 QA를 혼자 하고 있다보니 (개발연구원 수십명인뎅..) 자동화가 급박해졌습니다. 


Jenkins 에서 Build Job을 실행하는 작업은 생략 하겠습니다.


대강 러프하게 그려본 도식도는 이렇습니다. (현재는 이대로 돌아가고있습니다.~~ v)


엄청 러프하게 그렸는데 사실은 처음에 혼자 이렇게 되기가 힘들거같았는데 막상 하다보니 이것도 뭐 복잡한건 아닌것 같습니다..(그리고 너저분하다는 생각도 들어서 계속 수정해 나가야 합니다.)


해당 도식도 중 카테고리가 CI이기 때문에 Jenkins 관련해서만 작성할 예정입니다.


1. General

기본적인 내용 및 옵션 입니다.   


추가적으로 저는 오래된 빌드를 삭제 하는걸 체크하였는데 20~30일정도로 설정하였습니다.


(테스트 결과는 testLink 에 저장도 되고 node 서버에 dbms로 도 저장합니다..)


2. 소스 코드 관리 

소스코드 관리 입니다. 빌드 시작전에 어떠한 코드로 자동화를 돌려야 할지 자동화 테스트 코드를 관리 하는 부분입니다.

전체적으로 자동화 관련된 프로젝트는 4가지가 있습니다.

*Node.js (express)

express 로 만들어진 서버이며 mysql 을 DBMS로 가지며 테스트 결과를 저장합니다.

또한 ajax 등 비동기 테스트를 위한 서버이기도 하며 그 외에 서버를 통해야 하는 작업들을 위한 테스트 서버입니다. (더미데이터 등등)


**Node.js 서버는 testLink 에 테스트결과를 Update 할때 필요한 Junit.xml을 xmlBuilder를 통해 제작하는등 여러 기능들이 있습니다.


*Top.js(private web-front-end framework )

Top.js의 많은 Component 와 Container 및 Layout등을 테스트를 위한 초점으로 만들어진 Client 페이지입니다.

해당 프로젝트는 자사의 JEUS 6,7,8 로 구성되어 Deploy 되어있습니다.


End Point

해당 페이지의 특정 버튼을 누르게되면 테스트결과를 가지고있다가(자체 제작 모듈)

testLink 를 연동하기 위한 테스트 결과를  Node 서버로 전송합니다.


*Selenium-WebDriver + (IE Driver or Chrome Driver or FireFox Driver)

Top.js로 만들어진 페이지를 자동으로 테스트하기 위한 Test Runner 입니다. 3가지의 브라우저가 동작하여야 하기 때문에 해당 프로젝트에서는 내부적으로 ie , chrome,firefox 등 여러 드라이버가 설치 되어있으며 파라미터를 통해서 원하는 드라이버를 require 하여   테스트를 시작합니다.


* React.js (redux,react-redux,sass,react-router,... )

React.js로 만들어진 페이지입니다. 내부 private 프레임워크만 하다보니 다른것도 흥미가 생겨서 하게 된것도 있지만 Top가 버전업이 되었을 때 무조건 동작이 잘되리라는 보장이 없기 때문에 View를 위한 (테스트결과 추이 등을보기 위한) 페이지가 필요합니다. 

(물론 안정화된 top버전을 통해서 간단한 페이지를 만들수도있지만  react.js도 해보고싶었습니다.)


해당 4개의 프로젝트가 존재 하는데 어디서 소스코드를 가져와야 하나  


글씨 크기를 보면 아시겠지만  Selenium-WebDriver  입니다. 테스트를 시작하기 위해서는 사람을 대신할 객체가 필요한데  셀레니엄이 브라우저도 열고Top.js 의 End Point 까지 테스트를 진행합니다. (마지막엔 결과를 서버로 전송)


소스 코드 관리를 말하기전에 서두가 너무 길었지만      git을 통해서 관리합니다.  


Repository URL 란에 git을 선택 해주시고 git clone 에 사용하는 주소(HTTP) 를 넣어 줍니다.


그리고 Credentials 을 입력하기 위해서 우측에 Add를 선택하고  아래의 provider에서 입력 합니다.



기본적으로 나와있는 것을 제외하고 사용자가 입력하여야 하는 부분에 대해서 말씀드리자면


Username : Gitlab ID

Password : GitLab Password 

ID : Credentials 을 눌렀을 때 표시될 이름 (ex: seleniumTestCode)

Description : 작성하는 중인 Credentials 에 대한 설명 


Add버튼을 눌러 생성하게 되면 Credentials 드랍 박스에서 위의 설정한 ID가 표시되게 됩니다.


선택합니다.


-Branch Specifier (blank for 'any') 에 가져올 위치인 */master 입력 


!!! 빌드 시작시 소스코드를 최신으로 땡겨오게 됩니다.


// node_modules 는 gitlab 에는 올리지 않지만 편의를 위해서  내려받은 package.json 에 대해

// npm update를 미리 한번 해주었습니다.



Build Job 은 현재 3가지가 있습니다. (포스팅할때는 이미 다 해놓은 상태에서 포스팅!)


IE Automation

Chrome Automation

FireFox Automation 


3개의 Build Job은 다 같은 형태로 돌아갑니다. (Node.js 드라이버 실행시 파라미터만 다릅니다.)

// _auto.js ie 

// _auto.js chrome

// _auto.js firefox

3. 빌드 유발 

3개의 Job(IE,Chrome,FireFox) 에 대한 빌드 유발을 어떻게 할것인가 인데 

(현재는 Selenium-webDriver의 testCode가 push 또는 merge request 발생시)

스크립트로 원격 유발같은거 있는데 이거 한번 해보려고합니다.


RND서버에 새로운 버전이 올라왔을 시에 대한 점검 로직은 없기 때문에 특정 위치를 바라보는 Watcher를 만든 후에 새로운 버전이 올라왔음이 감지되면 자동으로 내려받아서 빌드를 시작할수 있도록 ;; 


webhook 에 대한 기본 트러블 슈팅은 해당 링크

https://ipex.tistory.com/entry/gitlab-%EC%9B%B9%ED%9B%85webhook-Internal-Error-500


Jenkins 에 GitLab Plugin 이 설치 되어 있어야 합니다.


4. 빌드 환경

Delete workspace before build starts 라는 것이 있습니다. (빌드전 워크스페이스를 비우는 작업)


고급 탭을 누른 후에 ant style pattern 을 적용하여서 


현재 돌아가는 빌드의 workspace 


Windows의 경우는 (C:\Program Files (x86)\Jenkins\workspace\빌드이름)


에 있는 폴더를 빌드 시작전에 삭제 해주는 역할을 합니다.


이 작업을 해주는 이유는 testLink 가 해당 폴더에 있는 testCase를 보고  테스트 실행을 할건데


기존에 작업했던 것이 남아있어서 테스트가 꼬일까봐 매번 작업전에 지워줄수 있도록 세팅 합니다.


아래와 같이 작성시에는 workspace/chromeBuilding 폴더와 그 하위 파일들이 전부 지워진 후 Build로 넘어갑니다.



5. 빌드

빌드는 2가지로 나뉩니다. 

5.1 Selenium-WebDriver


5-2 TestLink 




빌드 작업에 대해서는 다음 포스팅에서 하겠습니다.


읽어 주셔서 감사합니다.







나름 우선순위를 정해서 하나씩 빠르게 처리하는데


뭐랄까...


일이 단 기간 내에 갑자기 많아지니 뭘 먼저 해야될지 몰라서 멍..

'비공개 카테고리 및 미사용 카테고리 > 옛날 일기장' 카테고리의 다른 글

깍돌이 근황  (0) 2019.03.05
[이달의 배움] 2018년 10월  (0) 2018.10.03
[이달의 배움] 2018년 8월  (0) 2018.08.21
파이썬  (0) 2016.07.27
마우스저거 참  (0) 2016.07.20

윈도우 7 에 젠킨스를 설치를 완료 하였습니다.

https://ipex.tistory.com/entry/Jenkins-CI-%EC%84%9C%EB%B2%84-%EC%84%A4%EC%B9%98-Windows-Ver-%EC%9C%88%EB%8F%84%EC%9A%B0-%EC%A0%A0%ED%82%A8%EC%8A%A4-%EC%84%A4%EC%B9%98-2141?category=767972



기존 포트가 8080 으로 되어있는데


저는 8888로 우선적으로 바꾸고 싶기 때문에



C:\Program Files (x86)\Jenkins 경로에 있는 jenkins.xml 을 열어서 8888로 수정합니다.




localhost:8888  접속 



음? 그렇습니다.  재 시작을 안했기 때문입니다.


일단 저장을 합니다. 저는 notepad++ 로 열었기 때문에 저장을 한후에


젠킨스 서비스를 재시작 하여야 합니다. 


CentOS같은 리눅스의 경우에서는 ps 명령어를 통해 확인도 할수 있었고 환경변수에 설정되었던 커맨드 라인을 통해서 실행할수 있었습니다.


Windows의 경우는 조금 다릅니다.


      와 R키를 누릅니다.


[Windows logo] + [R] 





services.msc 


를 실행하셔서 Jenkins 서비스를 다시 시작 (E) 해주시면 됩니다.



짜잔 8888 로 로그인 이 되었습니다.


추후에도 서비스를 종료 하거나 실행시킬때는


services.msc 로 직접 설정하시면 됩니다.


감사합니다





안녕하세요 오늘은 CI 서버인 Jenkins를 Windows 7 에 설치 하여서 사용을 해보려고합니다.


자동화 (셀레늄) + 자동화 페이지 는 만들어진 상황에서  IE11을 실행하기 위해서는


Jenkins가 Windows 에 설치가 되어야 하기 때문입니다.


// jenkins 사이트 

https://jenkins.io/



[Download] 버튼을 누릅니다.



아래의 두개의 설치 할수 있는 경로가 나옵니다.


1. LTS (안정적으로 계속 사용할수 있도록 지원 해주는 버전 ) 

2. Weekly ( 이번주에 추가된 기능이 있는 최신 버전 -> 안정성은 LTS보다 떨어집니다. ) 


저는 Weekly 에서 쭉 스크롤을 내리다 보면 Windows 라고 있습니다.





[Windows] 클릭 합니다.



[다운로드 됩니다.]






압축파일이 다운로드 되는데


압축을 풀고  있는 jenkins.msi 파일을 실행하여서 설치 합니다.



딱히 설정할건 없고 Next를 진행하다보면 설치가 완료 됩니다.


그리고 자동으로 브라우저에 의해 실행이됩니다. 



리눅스와 비슷합니다. 해당 키를 입력 해야 합니다.





해당 Password파일을 에디터로 열어서 입력 합니다.


(저는 notepad++ 로 읽었습니다.)


1. Install suggested plugins : 설정해주는대로 기본 설치 

2. Select plugins to install : 직접 골라서 설치 


저는 1번으로 했습니다.   (설치중 .... )




설치가 끝나게되면 admin User 에 대한 설정을 하는 창이 나옵니다.


입력 다 한후 Save and Continue 를 누릅시다.





기존 버전에서 (올해 초에 작성하였던 jenkins) 는 없었는데

https://ipex.tistory.com/entry/Jenkins-CI-%EC%84%9C%EB%B2%84-%EC%84%A4%EC%B9%98-415%EC%9D%BC-%EC%9E%90-%EB%B2%84%EC%A0%84?category=767972



기본 instance 설정 도 나타나게 되네요 






Save and finish 하게되면 해당화면이 나타나고 Start using Jenkins 로 설치를 완료 하고 실행합니다.



완료 됐습니다.



Windows. Ver Jenkins 사용은 따로 다시 작성하겠습니다.


감사합니다.







+ Recent posts