gui testing tutorial
GUI 테스트에 대한 완전한 가이드 : 사용자 인터페이스 테스트 자습서
GUI 테스트 란 무엇입니까?
GUI 테스트는 사양에 따라 적절한 기능을 보장하기 위해 애플리케이션의 그래픽 사용자 인터페이스를 테스트하는 프로세스입니다. 버튼, 아이콘, 확인란, 색상, 메뉴, 창 등과 같은 응용 프로그램 구성 요소를 확인하는 작업이 포함됩니다.
PC 용 최고의 보이스 체인저 앱
웹 애플리케이션의 시각적 역학은 사용자가 애플리케이션을 받아들이는 데 중추적 인 역할을합니다.
결과적으로 이러한 수용은 고객의 응용 프로그램에 대한 고객의 오랜 속박을 가져옵니다. 이 디지털화 시대에 사용자 인터페이스는 빠르게 변화하고 있으며 새로운 잠재 고객을 유치하는 데 핵심적인 요새를 보유하고 있습니다.
학습 내용 :
- 사용자 인터페이스 테스트
- UI 테스트를위한 접근 방식
- 일반적으로 발생하는 UI 결함
- 주요 UI 및 사용성 테스트 요구 사항
- 일부 기본 구성 요소
- 일부 고급 구성 요소
- UI 구성 요소의 상태
- GUI 테스트 도구
- 샘플 GUI 테스트 케이스
- 결론
- 추천 도서
사용자 인터페이스 테스트
웹 애플리케이션의 시각적 미학이 잘 받아 들여 지도록하기 위해 UI 및 사용성 테스트는 전체 QA 실행의 핵심 요소가됩니다. URL을 통해 액세스 할 수있는 모든 응용 프로그램은 웹 기반 응용 프로그램입니다. 이러한 응용 프로그램에서 우리는 주로 최종 사용자가 사용할 응용 프로그램의 프런트 엔드를 테스트합니다.
각 브라우저는 웹 페이지를 다르게 표시하므로 다른 브라우저에서 페이지가 동일하게 표시되어야합니다. 웹 페이지가 왜곡되고 관리되지 않는 상태로 표시되면 시청자가 웹 페이지를 종료하게됩니다. 따라서 웹 사이트는 더 나은 결과를 위해 UI 테스트를 거쳐야합니다.
브라우저 테스트는 다음 두 가지 유형으로 구성됩니다.
기능 테스트
애플리케이션 전반에 걸쳐 다양한 기능 테스트. 모든 포지티브 및 네거티브 시나리오를 사용하여 프런트 엔드 페이지에있는 모든 필드 값과 모든 탐색의 유효성을 검사하는 작업이 포함됩니다.
UI 테스트
웹 페이지의 모양과 느낌을 테스트합니다. 모양과 느낌 요소에는 표시 유형, 글꼴, 정렬, 라디오 버튼, 확인란 등이 포함됩니다.
- UI 테스트에서 다루는 영역은 사용성, 룩앤필, 탐색 컨트롤 / 탐색 막대, 지침 및 기술 정보 스타일, 이미지, 표, 접근성 등입니다.
- 접근성 테스트를 위해 W3C-Web 콘텐츠 접근성 지침을 확인해야합니다.
딸깍 하는 소리 여기 W3C 가이드 라인을 얻으려면.
UI 테스트를위한 접근 방식
애플리케이션의 모든 기능을 다루는 기능 테스트 사례에서 테스트 사례의 하위 집합을 선택합니다.
두 번째 단계는 UI 테스트 요구 사항에 따라 이러한 테스트 사례를 수정하는 것입니다.
다음 단계는 이러한 테스트 케이스를 실행하는 것입니다. 결과를 예상 결과와 비교하고 차이가 있으면 동일한 문제를 제기합니다. 모든 브라우저에서 테스트하는 것은 불가능합니다. 일반적으로 클라이언트는 테스트 할 요구 사항이있는 브라우저를 결정합니다.
우리가 알고 있듯이 각 브라우저는 웹 페이지를 다르게 표시하므로 모든 브라우저가 정확히 유사한 웹 페이지를 표시 할 것이라고 기대할 수는 없습니다.
예를 들면 windows-firefox의 드롭 다운은 mac-firefox와 다릅니다. 이러한 문제는 운영 체제 유틸리티이므로 수용 할 수 있습니다.
기본 브라우저 : 일반적으로 애플리케이션은 최종 사용자가 주로 사용할 것으로 예상되는 브라우저를 대상으로 개발되며 기본 브라우저라고합니다.
일반적으로 발생하는 UI 결함
- 버튼 정렬 문제
- 레이블 또는 텍스트 상자 사이의 불일치 공간
- 깨진 레이블 즉, 한 줄 레이블이 두 줄로 표시됨
- 텍스트 상자, 정보 아이콘, 레이블 또는 드롭 다운 간의 정렬이 잘못됨
- 필드 겹침
- 불완전한 필드
- 페이지의 데이터가 잘못 정렬되었습니다. 일부는 위아래로 시간 이동
- 모든 브라우저에서 일부 작업을 선택하는 동안 해당 작업이 발생하지 않습니다.
- 예상대로 작동하지 않는 크기 조정
- 일부 브라우저의 경우 세션 만료 시간이 매우 짧거나 매우 깁니다.
- 브라우저 관련 문제 – 한 브라우저에 데이터를 입력 한 후 편집 할 수 없지만 다른 브라우저에서 편집 할 수있는 필드는 거의 없습니다.
주요 UI 및 사용성 테스트 요구 사항
웹 애플리케이션의 주요 UI 테스트 요구 사항은 다음과 같습니다.
- UI에서 다양한 구성 요소의 가용성
- UI 구성 요소의 다양한 상태
구성 요소:
구성 요소는 여러 다른 구성 요소를 조합하여 응용 프로그램을 구성하는 데 사용할 수있는 빌딩 블록입니다. 컴포넌트는 애플리케이션 전체에서 재사용 할 수 있습니다.
구성 요소의 예로는 버튼, 텍스트 필드, 자동 제안, 확인란, 드롭 다운 등이 있습니다.
일부 기본 구성 요소
체크 박스 : 확인란 구성 요소에서 하나 이상의 옵션을 선택할 수 있습니다.
라디오 버튼 : 하나의 옵션 만 선택해야 할 때 라디오 버튼이 유용합니다.
일부 고급 구성 요소
1. 아코디언 : 이 구성 요소를 사용하여 여러 항목을 세로로 쌓을 수 있습니다. 각 항목을 확장하여 그 안의 내용을 볼 수 있습니다. 둘 이상의 항목도 확장 할 수 있습니다.
2. 빵 부스러기 : 이것은 웹 사이트 탐색에 도움이되는 매우 유용한 구성 요소입니다. 사용자는이 구성 요소에서 웹 사이트 내 현재 위치를 식별 할 수 있습니다.
3. 캐 러셀 : 여러 정보 항목 세트를 캐 러셀 구성 요소에 통합 할 수 있습니다. 하단의 길 찾기는 더 많은 항목이 있음을 나타냅니다. 화살표는 캐 러셀 내에서 탐색하는 데 도움이됩니다. 일반적으로 캐 러셀 탐색은 연속 루프로 구성됩니다.
딸깍 하는 소리 여기 UI 구성 요소에 대한 더 유용한 정보를 얻으려면
UI 구성 요소의 상태
구성 요소의 가용성은 순전히 프로젝트 요구 사항 지침을 기반으로합니다. 프로젝트마다 다릅니다.
기본 구성 요소의 다양한 UI 상태는 다음과 같습니다.
- 채워지지 않은 상태
- 채워진 상태 및 초점
- 정상 상태 및 기본 상태
- 호버 상태
- 비활성화 상태
- 마스킹 된 상태
채워지지 않은 상태 :
구성 요소에 값을 입력하기 전에 채워지지 않은 상태라고합니다. 채워지지 않음 상태는 자리 표시 자 텍스트를 표시합니다. 아래는 텍스트 필드 구성 요소입니다.
최고의 월드 오브 워크래프트 개인 서버
채워진 상태 :
사용자가 입력 한 값을 가진 구성 요소는 채워진 상태입니다.
초점 상태 :
사용자는 이미 채워진 구성 요소를 다시 방문합니다. 구성 요소에 커서가 표시되어 특정 구성 요소가 초점을 맞추고 있음을 나타냅니다.
상태:
사용자가 이미 화면에 입력 한 값을 가진 구성 요소의 표시는 정상 상태로 설명됩니다.
기본 상태 :
서버 / 백엔드에서 자동으로 채워진 값을 표시하는 구성 요소입니다. 이 값은 일부 시나리오에서 사용자가 편집 할 수도 있습니다.
호버 상태 :
구성 요소 위로 마우스를 가져 가면 마우스 오버 동작을 나타내는 구성 요소가 강조 표시됩니다.
Hover 전 :
마우스 오버시 :
비활성화 상태 :
구성 요소가 비활성화되고 사용자가 필드를 편집 할 수 없습니다.
활성화 된 상태
비활성화 상태
마스킹 된 상태 :
이 구성 요소를 사용하여 암호와 같은 민감한 데이터를 숨길 수 있습니다.
웹 애플리케이션의 주요 사용성 테스트 요구 사항은 다음과 같습니다.
- 글꼴 군
- 글꼴 크기
- 색깔
- 문자 간격
- 라인 높이
- 백그라운드 유효성 검사
- 채우기 / 불투명도
- 길이, 너비 및 너비와 같은 구성 요소 측정
- 화면에서 구성 요소 사이의 위치 / 간격
위의 유용성 기능은 코드에서 또는 애플리케이션의 inspect 요소를 사용하여 테스트 할 수 있습니다. 또 다른 쉬운 방법은 추가 기능을 사용하는 것입니다. 추가 기능은 응용 프로그램을 테스트해야하는 브라우저에 따라 다를 수 있습니다.
다양한 브라우저 추가 기능에 대한 세부 정보
| 이름 | 사용법 세부 사항 | 적합성 |
|---|---|---|
| 페이지 눈금자 | 이 추가 기능은 구성 요소의 너비와 높이를 테스트하는 데 도움이됩니다. 구성 요소의 상단, 왼쪽, 오른쪽 및 하단 위치도 파악할 수 있습니다. | Chrome 및 Firefox |
| 웹 검사기 | 웹 검사기는 웹 검사기 아이콘을 클릭하고 테스트 할 섹션 위로 마우스를 가져 가기 만하면 글꼴, 텍스트 색상 및 배경색을 표시합니다. | Chrome 및 Safari |
| 개똥 벌레 | Firebug는 웹 페이지의 CSS, HTML, DOM, XHR 및 자바 스크립트를 모니터링하기위한 오픈 소스 추가 기능입니다. 이것은 Firefox와 호환되는 inspect 요소의 대안입니다. | Firefox |
| ColorZilla | 웹 페이지의 색상을 분석하는 데 사용되는 색상 선택기 추가 기능입니다. | Chrome 및 Firefox |
| 측정 | 픽셀 단위로 요소의 너비, 높이 및 정렬을 테스트하는 데 사용됩니다. | Chrome, Safari 및 Firefox |
애드온의 장점 :
- 시간 절약
- 사용하기 쉬운
- 비용 효과적입니다
추가 기능의 제한 :
- 측정 사용 중 시차 오류
- 애플리케이션 간 호환
- 여러 브라우저와 호환
애드온에 대한 참조 :
- 웹 검사기 : Apple 개발 도구
- 개똥 벌레: 방화범 위키
- IT 측정
- Colorzilla
GUI 테스트 도구
UI 테스트에서 테스터를 도울 수있는 몇 가지 도구가 기술 세계에서 사용 가능합니다.
- 셀렌
- HP 통합 기능 테스트
- 오이
- 코딩 된 UI
- 사실은
GUI 도구의 자세한 목록은 softwaretestinghelp.com 자체에서 사용할 수 있습니다! 클릭하세요 여기 .
샘플 GUI 테스트 케이스
1) 캐 러셀 화살표 및 웨이 파인더의 작동 확인
2) 비밀번호 필드가 마스킹 된 상태에서만 값을 승인하는지 확인하십시오.
삼) 모든 필수 필드를 입력 할 때까지 '저장'버튼이 비활성 상태인지 확인합니다.
4) 사용자가 '상단'표시 줄을 사용하여 페이지 상단으로 이동할 수 있는지 확인합니다.
5) 적용된 필터가 결과를 검색하지 않을 때 적절한 메시지가 표시되는지 확인하십시오.
6) 머리글 및 바닥 글에서 사용할 수있는 링크에서 탐색 확인
7) 라디오 버튼의 정렬이 정확한지 확인
8) 확인란의 여러 옵션을 한 번에 선택할 수 있는지 확인
9) 각 섹션의 제목이 굵은 글씨로되어 있는지 확인하십시오.
10) 클릭시 하이퍼 링크의 색상 변경 확인
결론
웹 사이트는 많은 기업의 영혼입니다. 다른 브라우저 및 플랫폼에서 잘 보이고 유사하게 작동하는지 확인하는 것이 매우 필요합니다. 따라서 UI 테스트는 매우 중요하며 대규모 고객 기반과 비즈니스 가치 추가를 보장합니다.