UI 정적분석 툴에 대한 소개와활용사례 - UITCGen

2013.06 by JungGunhome: genycho.blog.me

What…

윈도우 창

탭

라디오 버튼

콤보박스

조건1 조건2

조회초기화

삭제수정정상인 TestArch AA그룹

화 면

조건3 √

√√

√ √√

UI TestCase Generator

- UI 소스를 분석하여 화면 내다양한 이벤트들을 추출하고

- 이를 테스트에 활용하거나

- 그외 용도로 활용한 사례

활용 시나리오

1. UI 테스트 케이스로 활용

1) 화면 내 Event 중 서버에 request를 요청하는 이벤트를 주요 이벤트로 정의하고

이것들만 따로 분류하여 UI 테스트 수행 시 케이스로 적용한다

2) 서버단에서는 실제 테스트에 의해 각 UI 테스트 케이스가 수행되었는지를 측정한다

2. UI 에 대한 개발 완성도 점검

1) 개발자가 개발 완료되었다고 하는 UI소스를 대상으로 점검을 수행한다

2) 완료 안 된 이벤트 요소가 있는지 체크하여 보고한다

3) 개발자는 이클립스 플러그인을 이용해서 자가 체크가 가능하다

3. 개발 및 테스트 완료 후 UI의 변경사항을 기록한다

1) 개발 및 테스트 완료 시점에 UI 소스에 대한 분석을 수행하여 저장한다

2) 주기적으로 분석을 재수행하고 주요 이벤트 레벨에서 변동이 발생한 경우 알려준다

1. UI 테스트 케이스로 활용

1) 화면 내 Event 중 서버에 request를 요청하는 이벤트를 주요 이벤트로 정의하고

이것들만 따로 분류하여 UI 테스트 수행 시 케이스로 적용한다

2) 서버단에서는 실제 테스트에 의해 각 UI 테스트 케이스가 수행되었는지를 측정한다

현장에서의 문제상황

개발 팀의 품질 이슈

- UI에 대한 기본적인 테스트가 상대적으로 미흡하게 수행

- UI에 대한 구체적인 테스트 가이드 부재

- UI레벨에서 잦은 변경이 발생

- 개발이 덜 된 부분이 식별되지 않음

- 고객에 의한 테스트 결과물 제출 요구가 있음

개발팀 품질이슈

테스트 팀의 품질이슈

- 테스트 인력에 의한 테스트에 대한 의문 제기

- 상세한 테스트 가이드 부재

- 테스트 완료 후 변경 발생에 대한 테스트 사각지대

툴의 구현- XML형태로 구현된 UI 솔루션 (MiPlatform/Xplatform, NCRM, 등등) 및 HTML 기반의

UI에 대해 분석 기능 구현

XML 형태의UI 솔루션의 예

HTML 기반의UI 구현 예

input

onClick

label

a href

…

데이터형태정의

UI 정적컴포넌트

자바스크립트

UI 파일 소스

<DataArear/>Data

정제된UI 정보

화면정보 파일

이벤트발생 컴포넌트

<EventArear/>

<CommentArear/>

Event

idtypelengthuseType

nameinputcontentactionId

screenIDfilePathsystemsubsystemdeveloper

테스트 대상 기능목록

테스트 대상일반 정보

테스트 대상이벤트 목록

입력 데이터필드 정보

- 툴 사용간에 유연성을 위해 중간에 uxml이라는 분석정보 저장 파일을 생성

- 주로 이벤트 정보와 입력 필드에 대한 정보(타입, 최대값, 필드에 적용된 이벤트 및

자바스크립트 함수명)를 분석

사용법이클립스 플러그인 또는 서버 일괄 생성 후 테스트 목록을 다운로드 받아서 활용

1) UI 1) UI 1) UI 1) UI 소스소스소스소스 파일을파일을파일을파일을 선택하고선택하고선택하고선택하고 분석분석분석분석

2) 2) 2) 2) 메뉴메뉴메뉴메뉴 선택에선택에선택에선택에 따라따라따라따라 추가추가추가추가 기능기능기능기능수행수행수행수행

3333----1) 1) 1) 1) 여러여러여러여러 파일에파일에파일에파일에 대해대해대해대해 목록으로목록으로목록으로목록으로 생성생성생성생성

3333----2) 2) 2) 2) 단일단일단일단일 파일에파일에파일에파일에 대해대해대해대해 테스트테스트테스트테스트 명세서명세서명세서명세서형태로형태로형태로형태로 생성생성생성생성

4) 4) 4) 4) 로컬에서로컬에서로컬에서로컬에서 수행수행수행수행 내용은내용은내용은내용은 로컬로컬로컬로컬 파일파일파일파일 DBDBDBDB에에에에저장저장저장저장 및및및및 변경변경변경변경 비교가비교가비교가비교가 가능가능가능가능

테스트 인력이 툴을 활용하여 테스트 수행(활용 후 설문)

“기존 매뉴얼 테스트 대비 체크해야 하는 요소가 많아짐”

“사전에 제공된 정보를 통해 테스트를 어떻게 할 지 구상이 더 용이해 짐”

“테스트 전에 미개발된 이벤트 정보들이 표시되어 기능 검증이 더 수월해졌다”

“화면이 복잡하거나 AJAX처럼 SPA(Single Page Application) 적용된 경우

분석된 정보가 실제 화면의 어느 부분인지 인지하기가 어렵다”

일자 대상UI

분석UI

도출이벤트개수

화면당이벤트

미개발기능수

화면당미개발

2012-06-08

1,682 1,601 7,882 4.92 754 0.47

2012-06-01

1,681 1,600 7,904 4.94 780 0.49

2012-05-04

1,680 1,563 6,810 4.36 814 0.52

서버 Request를 이용한 이벤트 테스트 커버리지 측정- UI상의 주요 이벤트(서버 Request)에 대해 별도로 실행 여부와 에러 발생 여부를 체크

- 스프링 프레임워크의 AOP 기능을 이용하여 요청값/응답값을 별도로 저장

- 저장된 데이터는 회귀 테스트에 별도로 활용

source

개발자개발자개발자개발자 개발개발개발개발PL/테스터테스터테스터테스터

TestopiaTestopiaTestopiaTestopia

테스트

로그

테스트자동화

1) 개발자 테스트 수행 여부 체크

2) 담당자, 테스터의 테스트 수행 여부 체크

개발개발개발개발 서버서버서버서버 테스트테스트테스트테스트 서버서버서버서버

저장된 요청/응답 값은 서비스 레벨 회귀 테스트에 활용

주단위 매뉴얼 테스트 활용 사례매뉴얼 테스트 수행 시 주요 이벤트(서버Request)에 대해 테스트 기능으로 도출하여 활용

일 자 테스트화면수 테스트기능수 자동생성활용수 자동화율2013-06-04 118 542 497 91.7%2013-06-11 230 1,042 931 89.3%2013-06-18 374 1,762 1,550 88.0%2013-06-21 458 2,092 1,811 86.6%

일단위 분석 현황(개발 완료 UI 대상)

테스트 수행 시 미개발 기능 식별 가능- (현재) 테스트 수행 전에 미개발된 영역 식별 가능

- (향후) 미개발된 기능이 있는 경우 조치 전까지는 개발 완료 처리를 못하도록 처리

실제로 기능 동작하지 않음

- UI명: 위험평가자료

- 기능명: 삭제

- 상태 : 미구현

(예)

2. UI 개발 완성도 점검

1) 개발자가 개발 완료되었다고 하는 UI소스를 대상으로 점검을 수행한다

2) 완료 안 된 이벤트 요소가 있는지 체크하여 보고한다

3) 개발자는 이클립스 플러그인을 이용해서 자가 체크가 가능하다

개발 완료된 UI에 대한 인스펙션

전체 UI파일 중 개발 완료된 UI에 대해 완성도 검증

[ 개발 완성도 점검 기준(예) ]

(1) 버튼에 대해 이벤트가 정의되지 않았거나 없는 자바스크립트 function이 정의된 경우

(2) 기타 이벤트에 대해 실제 function이 정의되지 않은 경우

(3) 그 외 미리 정의한 UI 개발 표준에 어긋나는 경우

- label과 input간의 정해진 id 명명 규칙이 맞지 않는 경우

- 입력 값에 대한 maxlength, type 등이 정의되지 않은 경우

- 각종 UI 엘리먼트에 대해 id 정의 등 정해진 규칙을 지키지 않은 경우

수행 프로세스- 별도 개발진척 관리 시스템으로부터 개발완료된 UI에 대한 정보를 획득

- 툴을 통해 개발 완성도 분석

- 테스트에 활용, 미개발 기능에 대한 관리 수행(개발 진척관리 시스템에 연동)

개발관리 시스템 UITCGen 테스트 품질 관리자

개발완료

UI 분석

테스트 수행 모니터링

테스트 완료

매일 2회

테스트참고

테스트참고

현황파악,보고

현황파악,보고

미개발 기능의 세분화 적용 사례- 미개발 기능에 대해 현상과 원인에 따라 상세 구분 후 해결방안 접근

구분1.기능미정의

2. 단순기능미정의

3.팝업 호출미정의

4,공통 기능미정의

5.INVISIBLE 버튼미정의

총합계

건수 212 22 192 54 82 562

비율 37.7 % 3.9 % 34.2 % 9.6 % 14.6 % 100.0 %

2013년 6월 21일 00:00 기준

※ 결재,출력,엑셀다운로드,첨부파일 등 공통모듈 연동

※ 행삭제부터 외부연계부분까지 다양함

※ 닫기,종료,초기화 버튼미동작

※ 대부분이 공통 팝업호출 버튼 미동작(공통팀연동)

※ visible=false부분으로상세 원인 파악필요

개발 완료 대상 미개발 건 분석 수행 사례- 미개발 기능에 대해 일단위로 개발팀에 공지 및 조치 가이드 수행

- 분석 대상이 늘어남에 따라 미개발 기능 수는 일정한 수를 보임

(개발 진척관리 시스템 상 개발완료 건 대상)

미개발 기능은 증감에 따라 꾸준한숫자를 보임

매뉴얼 테스트와 UITCGen 검증과의 비교- 툴을 이용해 1차 점검 후 매뉴얼 테스트 수행

- 명중률 높은 저격총 vs 명중률은 높지만 살상력은 높은 기관총

[매뉴얼 테스트]

40일에 500개!!!A) 2명 20일 40MDB) 주요업무 470개 화면에 대해C) 기능 오류, 계산오류, UI표준 오류 등 다양한

결함 496개 발견

[UITCGen 기본 기능 점검]

5분에 480개!!!A) 설치 4일, 수행시간 5분 동안B) 전체 업무 990개 화면에 대해C) 클릭해도 동작하지 않는 기본 결함 480개 발견D) 매일 정오,자정 2회씩 수행

저격총

기관총

3. 테스트 완료 후 변경분석

1) 개발 및 테스트 완료 시점에 UI 소스에 대한 분석을 수행하여 저장한다

2) 주기적으로 분석을 재수행하고 주요 이벤트 레벨에서 변동이 발생한 경우 알려준다

수행 프로세스- 테스트까지 모두 끝난 UI에 대해 UI 레벨에서의 변경 분석, 히스토리 추적

- 변경 유형에 따라 재테스트 대상에 포함

개발관리 시스템 UITCGen 테스트 품질 관리자

개발완료

테스트 수행

모니터링

테스트 완료

현황파악재테스트대상 선정

현황파악재테스트대상 선정

완료 분석

변경내용비교/분석

완료시점

매주 1~2회

변경 유형 분류- 변경 유형에 따라 별도로 대응(사례)

- 대규모 프로젝트 운용 및 상위레벨 테스트 수행을 감안한 접근 전략 적용

변경 발생!!!

UI 배치 등디자인 요소의변경

필드 및 클라이언트 이벤트 변경(추가,수정,삭제)

서버요청이벤트의 추가

서버요청이벤트의 수정

서버요청이벤트의 삭제

분석 및기록하지 않음

변경히스토리

관리

재테스트대상 1순위

재테스트대상 2순위

일부 대상에 대한 변경 사유 확인- 주요 기능에 대한 추가,수정,삭제 발생 <- 직접 인터뷰 진행

5월30일 개발및테스트 완료된화면에서 6월13일 출력 및 기타 기능이 삭제 됨

확인: 고객 요청으로 삭제 처리

샘플링된 대상에 대한 사유1) 요건추가2) 요건누락3) 결함조치

로 분류 가능했음(모수가 적어 비율은 의미 없을 듯)

재테스트 수행 결과- 변경(추가, 수정)이 발생한 UI에 대한 재테스트 수행

- 이미 개발 및 테스트가 모두 완료된 대상에서 추가 결함이 발견

(변경) 코드 조회 팝업 버튼 추가(추가 결함) 팝업에서 선택한 코드가 부모창에 설정되지 않음

(변경) 게시 글에 대해 권한 추가 버튼 수정(추가결함) 설정한 권한을 다시 조회해 보면 조회되지 않음 외 권한 팝업의 결함 다수 발견

최종완료(개발&테스트 완료) 대상 분석 수행소규모 연구/요소 기술개발/분석엔진 등의 과제

영상분석, 데이터 분석, 네트워크&보안, IoT 등의 기술기반 요소기술 연구 과제

최종완료 이후에도 추가요건이 발생해서 미개발 기능들(개발중)이 분석됨

최종완료 이후변경이 발생함

4. 테스트 체크리스트 활용

1) 각 단위 UI의 기능에 대해 속성 (조회, 등록, 수정, 삭제, 인쇄, 파일, 연산, UI 디자인

등) 에 따라 사전에 커스터마이징 된 체크리스트를 기반으로 테스트 명세서를 작성

2) 개발자/테스터는 이 체크리스트를 기반으로 테스트를 수행한다

사례 소개 – 이벤트에 대한 속성 분류가 가능- 특정 프로젝트의 경우 UI 개발표준 상에 각 이벤트에 따른 속성 분류가 적용 됨.

해당 프로젝트에 한하여 각 기능(&속성정보)에 대한 테스트 체크리스트를

문서(엑셀)로 생성하여 테스트 수행 시 제공

※ 각 이벤트의 속성별로 다음과 같은 prefix를

적용하도록 UI 개발 표준이 정의 되어 있음

※ 고객과 단위 UI에 대한 테스트 산출물을

제공하도록 계약 됨

call, go팝업 호출

…

이동

연산

파일

인쇄

삭제

수정

등록

조회

속성

list, search, find

insert, register

modify

delete, remove

print

export

calculate, do

move, go

…

이벤트 prefix

- 속성 별로 사전에 정의한 테스트 체크리스트가 생성

- 이클립스 플러그인 형태로 툴을 제공하여 문서 생성>테스트 수행 후 제출

- 추가로 이 prefix 를 준수했는지 검증되는 효과가 있음

문서 자동생성

…

call, go

move, go

calculate, do

export

print

delete, remove

modify

insert, register

list, search, find

이벤트 prefix

3개팝업 호출

…

이동

연산

파일

인쇄

삭제

수정

등록

조회

속성

3개

6개

5개

4개

4개

2개

2개

2개

…

테스트 항목

일부 인력 대상 설문 조사 수행

1. 단위 테스트 체크리스트를 작성했을 때의 효과는 무엇이라고 생각하십니까? (복수 선택 가능)

① 테스트 방법 가이드 및 표준화 효과

② 고객에게 제출함으로써 고객 신뢰 확보

③ 본인 스스로 기존보다 더 테스트를 많이 하게 됨

④ 효과 없음

⑤ 기타( )

2. UITCGen을 활용했을 때의 가장 큰 효과는 무엇이라고 생각하십니까? (복수 선택 가능)

① 단위테스트 체크리스트 작성 공수 절감

② 제출하는 템플릿 통일, 작성 방법 표준화 효과

③ 실제 UI 파일 기반의 테스트 항목 도출 효과

④ 다이얼로그에서 이벤트 정보 제공을 통해 기존보다 자체적인 점검을 한번 더 하게 됨

⑤ 효과 없음

⑥ 기타( )

13명(57%)

5명(22%)

3명(13%)

1명(4%)

1명(4%)

12명(43%)

9명(32%)

6명(21%)

1명(4%)

0명(0%)

0명(0%)

일부 인력 대상 설문 조사 수행

4. 손으로 작성했을 때보다 공수 절감 효과(수작업 대비)는 얼마나 된다고 생각하십니까?

① 수작업으로는 도저히 못한다

② 수작업 대비 75%절감

③ 수작업 대비 50%절감

④ 수작업 대비 25%절감

⑤ 절감 효과 없음

⑥ 기타( )

0명(0%)

3명(25%)

4명(33%)

5명(42%)

0명(0%)

정리

- 복잡한 로직이 포함된 경우가 많아 중요한 UI 레벨에서 체계적인 품질 접근

- 해당 접근법을 시작으로 다양한 활용처가 존재

개발 단계???

서버단에 비해 상대적으로 가시적이지 않은UI에 대해 이를 상세하게 분석해

개발 결과물에 대한 구체적인 지표 제공

감. 사. 합. 니. 다.