32
크(티) 라우저 테트 행 가이드 2012.08 by JungGun home: genycho.blog.me ※ 상업적 용 및 출처를 밝히지 않 단 사용 금합니다

크로스(멀티)브라우저 테스트수행가이드

Embed Size (px)

Citation preview

Page 1: 크로스(멀티)브라우저 테스트수행가이드

크로스(멀티) 브라우저 테스트수행 가이드

2012.08 by JungGunhome: genycho.blog.me

※ 상업적 이용 및 출처를 밝히지 않은 무단 사용을 금합니다

Page 2: 크로스(멀티)브라우저 테스트수행가이드

What…크로스 브라우저 테스트가 무엇인지 올바르게 인지하고

테스트 이슈에 효과적이고 효율적인 방법으로 접근하기 위해…

사례를 포함하여 소개

2012년 자료…(오래 됨, 지금은 없어진 사파리 브라우저까지..)

Page 3: 크로스(멀티)브라우저 테스트수행가이드

- 목차 -개요수행절차정리별첨. 테스트계획서 내용 일부

Page 4: 크로스(멀티)브라우저 테스트수행가이드

크로스(멀티) 브라우저 테스트란?

. 다양한 웹 브라우저에서 대상 어플리케이션이 정상 동작하는지 확인하는테스트

. 모든(다양한) 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지않도록 하는 방법론적 가이드 (한국소프트웨어진흥원)

※ 크로스 브라우저 vs 멀티 브라우저? 보통 크로스 브라우저와 멀티 브라우저를 혼용해서 사용하는데 멀티 브라우저는

다양한 브라우저에서 동일하게 동작하는 것을 의미하고, 크로스 브라우저는다양한 브라우저 + 브라우저 버전까지를 포함하여 동작하는 것을 의미한다. 특히 IE(인터넷 익스플로어)의 경우 버전 별로 상이한 동작을 하는 경우가 많아브라우저 버전을 포함한 테스트 커버리지 전략을 수립하는 것이 필요하다(http://en.wikipedia.org/wiki/Cross-browser)“The term cross-browser is often confused with multi-browser. Multi-browser means something works with several web browsers. Cross-browser means something works with all versions of all browsers to have existed since the web began.”

Page 5: 크로스(멀티)브라우저 테스트수행가이드

※ 크로스(멀티) 브라우저 테스트의 목표 수준은?

Multi browsing이든 Cross browsing이든 모든 웹브라우저에서 동일한웹페이지의 모든 디자인과 엘리먼트가 동일하게 보여야만 하는가?

테스트팀은 디자인 요소의 픽셀 일치도와 document element의 세밀한차이까지 지적하여 결함으로 등록하여야 하는가?

브라우저마다 독자적으로 Html을 렌더링하기 때문에 모든 브라우저에서완벽하게 일치된 UI를 목표로 테스트를 진행하는 것은 불가능 할 것이며테스트의 목적은 UI의 완전한 일치를 목적으로 하는 것이 아니라 ‘사용자에게동일한 정보를 제공해 줄 수 있는가’ 라는 측면에서 접근해야 옳을 것이다.

Page 6: 크로스(멀티)브라우저 테스트수행가이드

들여쓰기가 다른 사항, 결함일까? 아닐까?

만약 메뉴 클릭이 모두 가능했다면 그래도 결함일까?

사파리 브라우저에서만 들여쓰기가 상이함

기능에 문제가 없다면 결함인가? 아닌가?

크로스 브라우징에 대한 오해 :

OS가 다르고 글꼴이 다르며, HTML을 렌더링

(Rendering)하는 엔진이 다르기 때문에

모든 웹브라우저에서 100% 똑같이 보이게 하

는 것은 가능하지 않다. Cross Browsing이란

적어도 표준 웹기술을 채용하여 다른 기종 혹은

플랫폼에 따라 달리 구현되는 기술을 비슷하게

만듦과 동시에 어느 한쪽에 최적화되어 치우지

지 않도록 공통 요소를 사용하여 웹페이지를 제

작하는 기법을 말하는 것

(출처 : 한국소프트웨어진흥원 공개SW지원센터

“Cross-Browsing 가이드”)

Page 7: 크로스(멀티)브라우저 테스트수행가이드

테스트 수행 프로세스에 따른 접근

테스트 전략테스트 전략

테스트종료

테스트종료

테스트수행

테스트수행

테스트 전략

. 목표 수준 정의

. 사전 체크리스트

확인

테스트설계

테스트설계

테스트 계획테스트 계획

테스트 계획

. 수행 방법 결정

. 수행 대상 선정

. 수행 환경 구성

. 수행 일정/인력 구성

테스트 설계

. 기능 테스트 설계

. (향후) 멀티

브라우저 테스트

체크리스트 확인

테스트 수행

. 각 브라우저별

결함에 대한 식별

테스트 종료

. 결과 보고

일정/인력구성

일정/인력구성

환경구성환경구성대상 선정대상 선정

Page 8: 크로스(멀티)브라우저 테스트수행가이드

[각 단계별 상세 내용]

1. 목표 수준의 정의

2. 사전 확인사항

3. 수행 방법 결정

4. 수행 대상 선정

5. 수행 환경 점검

6. 테스트 설계

7. 수행 및 결과 정리

Page 9: 크로스(멀티)브라우저 테스트수행가이드

1. 목표 수준의 정의모든 이해관계자와 멀티 브라우저 테스트의 목적과 요건을 확인한다

고려사항 권고사항

어느 정도까지 확인해야 하는가?각 브라우저별 세세한 UI변경사항을 비교하기 보다는 모든 브라우저에서동일 기능을 제공하는지 수준으로 확인한다

멀티 브라우저 vs 크로스 브라우저 테스트?

각 브라우저의 버전 별로도 테스트 수행해야 하는지 확인하며, 대상 어플리케이션이 지원하는 버전을 명시하고 테스트하도록 한다

브라우저 종류는?크게 5개 브라우저가 있는데 테스트 목적과 가용한 자원에 따라 타겟 브라우저 제한이 필요하다

멀티 OS에 대한 테스트도 포함하는가?

웹 어플리케이션의 경우 각 브라우저들이 자체적으로 html을 렌더링하여 보여주기 때문에 다양한 OS에서의 테스트는 큰 의미가 없을 수 있다. 테스트자원이 제한적인 경우 멀티 OS 테스트는 수행하지 않는다

원하는 결과는 결함 발견 및 조치수준인가, 수준 평가인가?

결함을 찾고 조치하는게 목적이라면 별도의 브라우저별 테스트 결과는 필요없을 수 있다

멀티브라우저 테스트 대상을 축소할 수 있는가?

결함을 찾고 조치하는게 목적이라면 별도의 브라우저별 테스트 결과는 필요없을 수 있다

테스트 환경, 장비는 제공하는가?멀티 브라우저는 하나의 PC에 설치가능하지만, 멀티 OS나 같은 브라우저

에 여러 버전의 브라우저는 설치가 불가능 하므로 테스트 장비나 별도의 환경이 제공되는지 확인이 필요하다

[ [ [ [ 목표목표목표목표 수준수준수준수준 정의를정의를정의를정의를 위한위한위한위한 고려사항고려사항고려사항고려사항 ]]]]

Page 10: 크로스(멀티)브라우저 테스트수행가이드

(참고) 브라우저 점유율http://gs.statcounter.com/

국내현황국내현황국내현황국내현황((((모바일모바일모바일모바일 제외제외제외제외))))2015~20162015~20162015~20162015~2016

전세계현황전세계현황전세계현황전세계현황((((모바일모바일모바일모바일 제외제외제외제외))))2015~20162015~20162015~20162015~2016

국내현황국내현황국내현황국내현황, , , , 버전포함버전포함버전포함버전포함, , , , 모바일모바일모바일모바일 포함포함포함포함2015~20162015~20162015~20162015~2016

Page 11: 크로스(멀티)브라우저 테스트수행가이드

(참고) 각 브라우저 설명

자료 출처 : 한국 인터넷 진흥원

IE는트라이던트, 크롬과사파리는웹킷, 오페라는프레스토, 불여우는게코라는레이아웃엔진 -또는렌더링엔진 -을사용

Page 12: 크로스(멀티)브라우저 테스트수행가이드

2. 사전 확인사항 (UI개발 형태, ActiveX 사용여부)아예 멀티브라우저가 지원되지 않는 UI솔루션을 사용하거나 ActiveX같이

IE에서만 구동되는 기능이 이미 적용된 경우가 있으므로 사전에 확인

체크 항목 상세 내용

사용한 UI 개발 방식,솔루션 확인

멀티브라우저 지원을 위해서는 일반적으로 JSP로 화면을 구성하도록 가이드하고 있으며, 일

부 국내 UI솔루션의 경우 아예 멀티브라우저가 지원되지 않는 경우가 있음. 해당 솔루션별로

멀티브라우저 지원 여부 및 제약사항 확인 필요

1) HTML, JSP

2) Flex, SilverLight

3) MiPlatform, Xplatform

4) Exria, NCRM 등등등

ActiveX 사용 실태 확인

국내에서 많이 사용하는 ActiveX 기술은 IE에서만 지원되는 것으로 해당 기술을 사용한 부분

이 있는지 확인한다

1) 공인 인증서를 이용한 전자서명

2) 개인방화벽

3) 키보드 보안

4) 통신 데이터 암호화

5) 보안 이메일

6) 다중 파일 업로드/ 다운로드

7) 그래픽/차트 표현

8) 동영상, 음악 재생

KISA_ActiveX대체기술가이드.pdf

http://koreahtml5.kr/download/activex.pdf

Page 13: 크로스(멀티)브라우저 테스트수행가이드

3. 수행 방법 결정테스트 전략 단계에서 정의한 목표 수준, 가용한 테스트 자원 등에 따라테스트 수행 방법을 결정한다

테스트 자동화 툴적용성

매뉴얼 테스트매뉴얼 테스트UI Record&Play자동화 테스트

UI Record&Play자동화 테스트

IE 중심의브라우저 구성

IE 중심의브라우저 구성

대상 브라우저의구성

각 브라우저별 구성각 브라우저별 구성

테스터 배정

브라우저 별테스터 구성

브라우저 별테스터 구성

업무별테스터 구성

업무별테스터 구성

기본 기능테스트

기본 기능테스트

테스트 Depth차별화

전체 기능테스트

전체 기능테스트

[ 1) 테스트 자동화 툴 적용 여부 ] [ 2) 대상 브라우저별 수행 방법 ]

[ 4) 테스트 케이스 선별 ][ 3) 테스터 구성 및 결과지표 ]

Page 14: 크로스(멀티)브라우저 테스트수행가이드

3.1 수행방법결정. UI 테스트 자동화 툴을 이용한 접근 : Selenium과 같은 UI테스트 자동화 툴을 이용하여

테스트 스크립트를 작성하고, 이 스크립트를 다양한 브라우저 상에서 재수행

. 매뉴얼 테스트를 이용한 접근 : 사람이 직접 각각의 브라우저, 버전 상에서 테스트를 수행

UI 테스트 자동화 툴 매뉴얼 테스트

장점. 테스트 스크립트를 한 번 작성하면 다양한 브라우저 상에서 여러 번 수행 가능

. 실제 사용자 관점에서 테스트 가능

단점

. 프로젝트 초기에 도입 필요

. 스크립트 작성 공수

. 스크립트 작성이 안 되는 부분은테스트 불가

. 브라우저별로 스크립트를 다시작성해야 하는 경우 발생

. 실제 사람만 식별할 수 있는 영역(디자인 영역 등)에 대해 확인 불가

. 테스트 자원이 제한적

. 테스터의 눈으로 확인 불가한 사항이있을 수 있다 (상세 픽셀 차이와 같은)

Page 15: 크로스(멀티)브라우저 테스트수행가이드

참고. 멀티브라우저 테스트 툴 구분

디자인 관점에서 이미지, 각 요소들의 크기, 위치등을 비교해 주는 툴

웹 요소 비교 툴 자동 수행 툴 IE 버전 지원 툴 웹 표준 준수체크 툴

설명

테스트 스크립트를 작성한 후 브라우저를 바꿔가면서 테스트를 자동 수행하는 형태

하나의 PC에 브라우저별 다양한 버전을설치할 수 없기 때문에 이를 지원하는 툴또는 사이트

정적으로 화면 개발 소스가 웹 개발 표준을준수하고 있는지를확인하는 툴 또는 사이트

수행방법

. QTP - 별도의 툴을 사용하면 멀티브라우저가가능하다고 말함). Test Complete. RFT(IBM) – 스크립트를다양한 브라우저에서 수행가능(Safari 안 됨). Selenium/Sauce lab –IE에서는 잘 실행이 안됨

. SuperPreview -SuperPreview는 마이크로소프트에서제공하는 자사 브라우저를 테스트하기위한 서비스이다.트라이얼 버전으로60일동안 사용

. Lunascape 6 -Lunasacpe는 윈도우용 트리플 엔진 브라우저

. IETester- 하략 -

. HTML Validator –FireFox 플러그인

. W3C HTML & CSS Validator

Page 16: 크로스(멀티)브라우저 테스트수행가이드

3.2 매뉴얼 수행 방법 상세- 수행 방법에는 다음과 같은 수행 방법이 있다

1) IE를 먼저 테스트하고 나중에 타브라우저를 테스트하는 방법

2) IE와 타브라우저를 동시에 테스트하는 방법

3) 미리 선정한 테스트 기능을 각 브라우저별로 테스트해보는 방법

4) IE에서 전체 기능을 테스트하고 선정한 기능을 각 브라우저별로 테스트

. 전체에 대한 기능 적합율 산정 필요

. 테스트 공수 부족(모든 브라우저에서 모든 기능 테스트를수행할 공수 부족)

전체 기능

선정 기능

Page 17: 크로스(멀티)브라우저 테스트수행가이드

3.3 테스트 수행 및 결과 측정 방법 결정다음 3가지 방법을 검토하여 테스터, 테스트 케이스 셋을 구성하여 테스트를진행한다

1111번번번번 방법방법방법방법 2222번번번번 방법방법방법방법 3333번번번번 방법방법방법방법

수행방법

1) IE에서 전체 대상 테스트 수행2) 멀티브라우저를 테스트할 대상 선정3) 테스터와 TC를 각 브라우저별로 구성4) 선정한 대상에 대해 각 브라우저별로 TC 셋으로 구성하여 동일기능으로 테스트 수행

1) 테스트 대상(범위)를 선정2) 각 테스터는 담당 부분을 IE

와 각 브라우저별로 각각 수행

3) 테스트 결과는 하나의 TC 셋으로관리

1) 테스트 대상을 전체로 선정2) 테스터를 담당 부분별로 구

성3) 테스터는 IE와 각 브라우저

별로 테스트를 수행

장 점. IE 버전의 전체 기능 적합율 산출이 가능. IE의 결과와 비교하며 테스트가능(브라우저

. 가장 테스트 공수가 적게 소요됨. 빠른 시간에 브라우저 호환성정도를 체크하는데 적합

. 전체 대상에 대해 멀티 브라우저 테스트 가능

단 점. 동일 기능에 대해 각 브라우저(테스터) 수만큼 중복 테스트

. 선정한 대상 외의 부분은 테스트가 안 됨

. 테스트 공수가 많이 소요되며각 브라우저 수만큼 중복 테스트

Page 18: 크로스(멀티)브라우저 테스트수행가이드

3.4 테스트 케이스 수행 방법 결정한정된 테스트 자원으로 효과적인 테스트를 수행하기 위해서, 각 브라우저 별 테스트 수행 시 테스트 케이스를 선별적으로 수행하는방법도 고려할 수 있다

IE에서 전체 TC,각 브라우저에서는 기본 TC만

각 브라우저별로 전체 TC

수행방법

. IE에서는 수행할 수 있는 모든 테스트 케이스를 수행한다. 각 브라우저에서는 해당화면이 제공하는 기본적인 기능만 검증하고 기본 기능 검증 시 UI차이 식별하는 방법

. 각 브라우저 별로 수행 가능한 모든 테스트 케이스를 수행한다

장 점

. IE 버전의 전체 기능 적합율 산출이 가능하다

. 테스트 공수가 상대적으로 적게 소요되거나더 많은 화면을 테스트할 수 있다. 브라우저별로 상이한 결함이 존재할 것으로예측되는 영역에 테스트 자원을 집중할 수 있다

. 브라우저별로 모든(동일한) 테스트 케이스검증 가능

단 점. 검증하지 않은 부분의 결함이 발견 되지 않음

. 테스트 공수가 많이 소요 됨

Page 19: 크로스(멀티)브라우저 테스트수행가이드

4. 수행 대상의 선정테스트 수행 대상을 제한할 수 있다

1) 대상 어플리케이션의 유형으로 대상을 선정

각 업무(개발팀)별로 다음의 내용을 감안하여 대상 선정

. 목록조회 > 신규 등록 > 상세조회 > 수정 > 삭제와 같이 많이 사용되는 패턴 선정

. 검색 팝업, 달력, 알림 메시지 창 등 팝업 화면과의 연결

. 엑셀 Export, 인쇄, 파일 업로드/다운로드 등 공통 기능 호출

. 자주 사용하는 UI 컴포넌트를 포함하는 화면

> 전체 선택/해제 체크박스, 그리드 정렬 이벤트, 콤보박스, 라디오, 체크 선택 등

2) 자주 발생하는 결함 유형에 따른 대상 선정

. 각 UI컴포넌트 동작이 상이한 경우(TextInput, Radio, Check, ComboBox(Select)

. 마우스 이벤트(스크롤, 드래그, 오른쪽 버튼 등), 키보드 단축키 등의 동작이 상이한 경우

. 커서 포커스가 상이한 경우

. SSO 로그인, Adobe Air, Flash Player, 파일 업로드/다운로드 등의 Plugin

. Frame, 그리드 폭 유지, 듀얼 모니터에서의 초기 화면 위치 등

. 한글 폰트 지원

. 브라우저 버튼(이전 페이지, 홈페이지 이동 등)

Page 20: 크로스(멀티)브라우저 테스트수행가이드

5. 수행 환경 점검- 테스트 목적에 따라 크로스 브라우저, 멀티 OS 등 별도의 테스트 장비가필요한 경우 테스트 수행을 위한 수행 환경을 구성한다

- 가상의 OS 환경, 브라우저별 버전을 지원해 주는 툴(싸이트)을 사전에확인하여 장비 이슈를 어느정도 완화할 수 있다

멀티 OS X 멀티브랑저 X 브라우저 버전 = 필요한 테스트 환경? ……

……

Page 21: 크로스(멀티)브라우저 테스트수행가이드

6. 테스트 설계기존 기능 테스트 내용에 대해 멀티 브라우저 환경에서 동일하게동작하는지 확인한다

영역 테스트 내용 IE 파이어폭스 크롬 사파리

UI 사용성해당 화면의 UI 컴포넌트 이상 유무를 확인한다

O X X X

UI 신뢰성각 데이터 값들에 대한 신뢰성 항목을 확인한다

O O O O

조회화면내에 존재하는 조회 기능에 대해 기능이정상 수행되는지 확인한다

OX O O

등록화면내에 존재하는 등록 기능에 대해 기능이정상 수행되는지 확인한다

O - O O

수정화면내에 존재하는 수정 기능에 대해 기능이정상 수행되는지 확인한다

O - O O

삭제 화면내에 존재하는 삭제 기능에 대해 기능이정상 수행되는지 확인한다

O - O O

인쇄, 엑셀화면내에 존재하는 인쇄, 엑셀 기능에 대해 기능이 정상 수행되는지 확인한다 O - X X

[ 예: 특별한 테스트 케이스가 정의되지 않은 경우의 수행 표 ]

Page 22: 크로스(멀티)브라우저 테스트수행가이드

7. 수행 및 결과 정리멀티 브라우저 테스트 수행 시 결함이 발생하면해당 결함이 발생한 타겟 브라우저를 반드시 명시하도록 한다

1번 방법 2번 방법 3번 방법

수행 방법

1) IE에서 전체 대상 테스트 수행2) 멀티브라우저를 테스트할 대상 선정3) 테스터와 검사시트를 각 브라우저별로 구성4) 선정한 대상에 대해 각 브라우저별로 검사시트를 구성하여 동일 기능으로 테스트 수행

1) 테스트 대상(범위)를 선정2) 각 테스터는 담당 부분을 IE

와 각 브라우저별로 각각 수행

3) 테스트 결과는 하나의 검사시트에 관리

1) 테스트 대상을 전체로 선정2) 테스터를 담당 부분별로 구

성3) 테스터는 IE와 각 브라우저

별로 테스트를 수행

결과지표

. 전체에 대한 IE의 기능 적합율

. 선정한 기능에 대한 파이어폭스 기능 적합율. 선정한 기능에 대한 크롬 기능적합율. 선정한 기능에 대한 사파리 기능 적합율. 선정한 기능에 대한 오페라 기능 적합율

. 선정한 기능에 대한 멀티브라우저 테스트를 포함한 기능적합율

. 전체에 대한 멀티브라우저테스트를 포함한 기능 적합율

Page 23: 크로스(멀티)브라우저 테스트수행가이드

멀티 브라우저 테스트 사례 (1/3) – 2010년…

- 수행 OS : 윈도우- 수행 브라우저 : 5개 브라우저(IE, FireFox, Safari, Opera, Chrome)- 수행 방법 : 사전에 선정한 특정 기능에 대해 멀티 브라우저 동작 확인

순번 브라우저 IE Firefox Safari Opera Chrome

1 TextInput에 한글입력

아래에 text input 창이 생김

아래에 text input 창이 생김

입력창에 자동으로 한글입력을기본으로 세팅할수 없음 (영어 입력이 기본)

2브라우저 html text input 에서의한글지원

IE 이외의 브라우저에서는 자소의순서가 제대로인식되지 않는문제

IE 이외의 브라우저에서는 자소의순서가 제대로인식되지 않는문제

IE 이외의 브라우저에서는 자소의순서가 제대로인식되지 않는문제

IE 이외의 브라우저에서는 자소의순서가 제대로인식되지 않는문제

3 SSO 로그인

Opera 10.5 최신 버전에서Applet을 사용할수 없어 로그인이 안됨

4 마우스 우측버튼클릭 기능 (Rclick)

마우스 우측클릭을 지원안함

Page 24: 크로스(멀티)브라우저 테스트수행가이드

Firefox 3.5 이하에서만 화면이 검은색으로일시적으로 보임

마우스 드래그로 텍스트 영역선택

7

마우스로 스크롤을 드래깅하여 움직일 때스크롤 영역을벗어나 드래깅하면 마우스포인터를 잃어서 이후 클릭을 안하고 스크롤 영역으로가져가도 스크롤이 드래깅되는 문제

마우스로 스크롤을 드래깅하여 움직일 때스크롤 영역을벗어나 드래깅하면 마우스포인터를 잃어서 이후 클릭을 안하고 스크롤 영역으로가져가도 스크롤이 드래깅되는 문제

마우스로 스크롤을 드래깅하여 움직일 때스크롤 영역을벗어나 드래깅하면 마우스포인터를 잃어서 이후 클릭을 안하고 스크롤 영역으로가져가도 스크롤이 드래깅되는 문제

마우스로 스크롤을 드래깅하여 움직일 때스크롤 영역을벗어나 드래깅하면 마우스포인터를 잃어서 이후 클릭을 안하고 스크롤 영역으로가져가도 스크롤이 드래깅되는 문제

마우스로 스크롤을 드래깅

6

Flash player 에서 제공하는기본 메뉴가나옴

Flash player 에서 제공하는기본 메뉴가나옴

Flash player 에서 제공하는기본 메뉴가나옴

Flash player 에서 제공하는기본 메뉴가나옴

Flash player 에서 제공하는기본 메뉴가나옴

마우스 우측버튼 더블클릭

5

Page 25: 크로스(멀티)브라우저 테스트수행가이드

순번 브라우저 IE Firefox Safari Opera Chrome

8HTTP Multipart Form 업로드

Flash player 9 이하에서는 지원하지 않음

Flash player 9이하에서는 지원하지 않음

Flash player 9 이하에서는 지원하지 않음

Flash player 9 이하에서는 지원하지 않음

9Flash player 업그레이드 방법

크롬에서는Flash Player 10.0 으로 업그레이드를 해도이전 버전인 9 로인식하는 브라우저 버그

10Window Close 문제

Window.close()나 self.close()를지원하지 않음, 즉 스크립트로브라우저를 닫을수 없음(window.open(_self).close 로 임시 조치)

Page 26: 크로스(멀티)브라우저 테스트수행가이드

Flash Player 가 IME 모드(한글, 중국어, 일본어등)일때는 특수문자이벤트만 받을수 있음. 그 이외는 255 keycode로 동일하여 구분할수 없음

Flash Player 가 IME 모드(한글, 중국어, 일본어등)일때는 특수문자이벤트만 받을수 있음. 그 이외는 255 keycode로 동일하여 구분할수 없음

Flash Player 가 IME 모드(한글, 중국어, 일본어등)일때는 특수문자이벤트만 받을수 있음. 그 이외는 255 keycode로 동일하여 구분할수 없음

Flash Player 가 IME 모드(한글, 중국어, 일본어등)일때는 특수문자이벤트만 받을수 있음. 그 이외는 255 keycode로 동일하여 구분할수 없음

Flash Player 가 IME 모드(한글, 중국어, 일본어등)일때는 특수문자이벤트만 받을수 있음. 그 이외는 255 keycode로 동일하여 구분할수 없음

키이벤트 핸들링 (단축키)

13

처음 화면에서자동으로 포커스 지정이 안되어 클릭을한 번 한 후에만 키이벤트핸들링이 가능

처음 화면에서자동으로 포커스 지정이 안되어 클릭을한 번 한 후에만 키이벤트핸들링이 가능

처음 화면에서자동으로 포커스 지정이 안되어 클릭을한 번 한 후에만 키이벤트핸들링이 가능

키이벤트 핸들링 (단축키)

12

화면이 최초오픈되었을 때스크립트를 이용하여 자동으로 포커스 세팅을 지원하지않음

화면이 최초오픈되었을 때스크립트를 이용하여 자동으로 포커스 세팅을 지원하지않음

화면이 최초오픈되었을 때스크립트를 이용하여 자동으로 포커스 세팅을 지원하지않음

팝업창에서만초기 포커스세팅 지원하지않음

Focus 자동지정 (Flash Player)

11

Page 27: 크로스(멀티)브라우저 테스트수행가이드

순번 브라우저 IE Firefox Safari Opera Chrome

14

Air Runtime과Air 프로그램 설치여부 체크(통합설치화면에서 Air Runtime과EpFTP 설치 체크시)

어도비에서 제공하는AirInstaller.exe를 이용하여 설치여부를 판단하는데 마이싱글외의 다른 사이트에서도 동시에이용하면 설치여부로직에 에러가발생

어도비에서 제공하는AirInstaller.exe를 이용하여 설치여부를 판단하는데 마이싱글외의 다른 사이트에서도 동시에이용하면 설치여부로직에 에러가발생

어도비에서 제공하는AirInstaller.exe를 이용하여 설치여부를 판단하는데 마이싱글외의 다른 사이트에서도 동시에이용하면 설치여부로직에 에러가발생

어도비에서 제공하는AirInstaller.exe를 이용하여 설치여부를 판단하는데 마이싱글외의 다른 사이트에서도 동시에이용하면 설치여부로직에 에러가발생

어도비에서 제공하는AirInstaller.exe를 이용하여 설치여부를 판단하는데 마이싱글외의 다른 사이트에서도 동시에이용하면 설치여부로직에 에러가발생

15

Air 프로그램에서파일찾기 선택창이나 기타 다른 프로그램을 띄울 때윈도우 위치

다른 Air 프로그램이 실행되고있으면 다음에뜨는 창은 무조건 Air 위에만 뜸. Air 프로그램 위에 브라우저 윈도우가 있으면Air 프로그램과브라우저 사이에떠서 최상으로올라오지 않음

다른 Air 프로그램이 실행되고있으면 다음에뜨는 창은 무조건 Air 위에만 뜸. Air 프로그램 위에 브라우저 윈도우가 있으면Air 프로그램과브라우저 사이에떠서 최상으로올라오지 않음

다른 Air 프로그램이 실행되고있으면 다음에뜨는 창은 무조건 Air 위에만 뜸. Air 프로그램 위에 브라우저 윈도우가 있으면Air 프로그램과브라우저 사이에떠서 최상으로올라오지 않음

다른 Air 프로그램이 실행되고있으면 다음에뜨는 창은 무조건 Air 위에만 뜸. Air 프로그램 위에 브라우저 윈도우가 있으면Air 프로그램과브라우저 사이에떠서 최상으로올라오지 않음

다른 Air 프로그램이 실행되고있으면 다음에뜨는 창은 무조건 Air 위에만 뜸. Air 프로그램 위에 브라우저 윈도우가 있으면Air 프로그램과브라우저 사이에떠서 최상으로올라오지 않음

Page 28: 크로스(멀티)브라우저 테스트수행가이드

오페라에서는Flash Player의렌더링이 늦거나정확히 지원되지않아 화면을 그리는 동작이 그대로노출됨

Flash Player 화면 렌더링

19

크롬에서 견명조및 일부 한글폰트지원안함.웹폰트 지원안함.

폰트 지원18

듀얼모니터에서새창을 띄우거나alert를 띄울 때위치 조정이 완벽하지 않음. 픽셀단위 조정 불가. 화면단위 조정은가능

듀얼모니터에서새창을 띄우거나alert를 띄울 때위치 조정이 완벽하지 않음. 픽셀단위 조정 불가. 화면단위 조정은가능

듀얼모니터에서새창을 띄우거나alert를 띄울 때위치 조정이 완벽하지 않음. 픽셀단위 조정 불가. 화면단위 조정은가능

듀얼모니터에서새창을 띄우거나alert를 띄울 때위치 조정이 완벽하지 않음. 픽셀단위 조정 불가. 화면단위 조정은가능

듀얼모니터에서새창을 띄우거나alert를 띄울 때위치 조정이 완벽하지 않음. 픽셀단위 조정 불가. 화면단위 조정은가능

듀얼모니터에서 새창을 띄울 때 중앙 위치

16

Flash Player는 Browser back 버튼이작동하지 않음

Flash Player는 Browser back 버튼이작동하지 않음

Flash Player는 Browser back 버튼이작동하지 않음

Flash Player는 Browser back 버튼이작동하지 않음

Flash Player는 Browser back 버튼이작동하지 않음

브라우저back 버튼으로 history back (마우스우측버튼 메뉴중 뒤로가기메뉴)

20

Page 29: 크로스(멀티)브라우저 테스트수행가이드

웹 표준 준수 체크- 웹 개발 표준을 준수하고 있는지 확인해 주는 툴/사이트가 존재- 웹 개발 표준은 “개발을 이렇게 해야 한다(좋다)”라는 가이드로 실제 멀티브라우저 테스트의 목적과는 정확하게 일치하지는 않음

- 자바 소스코드에 대해 코드 인스펙션과 동일한 개념- W3C(World Wide Web Consortium)에서 웹 개발 표준을 정의하고 공표함

http://validator.w3.org/

체크 대상(영역)

- HTML, XHTML

- CSS

- XML

- DOM

- JavaScript

Page 30: 크로스(멀티)브라우저 테스트수행가이드

(소개) Cross Browsing 가이드- 출처 : 한국소프트웨어진흥원 공개SW지원센터, 2006년

목목목목차차차차1. 들면서

2. Cross Browsing 이란?

2.1 Cross Browsing의정의

2.2 웹브라우저간특이성2.3 W3C 표준과접근호환성

3. Cross Browsing 방법론

3.1 HTML

3.2 CSS

3.3 DOM과 Javascript3.4 Plugin

4. 고급디버깅기법

4.1 웹브라우저알아내기

4.2 레이아웃방식의변경

4.3 비IE 사용자를위한가이드4.4 웹페이지디버깅방법

5. 맺음말

Appendix.

1. 최신웹브라우저별기능비교차트

2. 브라우저별 HTML 표준지원비교표3. 브라우저별 CSS 표준지원비교표

Page 31: 크로스(멀티)브라우저 테스트수행가이드

정리기대 효과

멀티 브라우저 테스트를 이해하고, 동일한 프로세스로 진행할 수 있음

단순한 테스트 활동이 아니라 멀티브라우저 지원 전략으로 프로젝트 초기부터식별되고 개발에 포함되어 진행될 수 있음

사전에 고려할 사항들을 통해 테스트를 효율적이고 효과적으로 수행할 수 있음

유의사항멀티 브라우저 테스트를 프로젝트 후반부에 하게 되면 큰 수정 공수가 발생할 수 있음멀티 브라우저 지원 범위를 빨리 정하고 초기부터 테스트를 진행하여 이슈를 바로바로확인하고 의사결정을 할 필요가 있음(예: 멀티브라우저를 지원하지 않거나 중요 이슈가 있는 솔루션 배제 및 대체 등)

Page 32: 크로스(멀티)브라우저 테스트수행가이드

감. 사. 합. 니. 다.