사용자 인터페이스 테스트 가이드

사용자 인터페이스 테스트 가이드

사용자 인터페이스 테스트 가이드

이 테스트는 응용 프로그램의 그래픽 사용자 인터페이스를 테스트하여 사양에 따라 적절한 기능을 보장하는 프로세스입니다. 버튼,아이콘,체크 박스,색상,메뉴,창 등과 같은 응용 프로그램 구성 요소를 확인하는 작업이 포함됩니다.

웹 응용 프로그램의 시각적 역학은 사용자와 응용 프로그램을 수용하는 데 중추적 인 역할을합니다.

결과적으로,이 수용은 고객의 응용 프로그램과 함께 고객의 오랜 시간 속박을 가져 오는 결과를 낳습니다. 이 디지털화 시대에 사용자 인터페이스는 빠르게 변화하고 있으며 가능한 고객의 새로운 군중을 끌어들이는 핵심 요새를 보유하고 있습니다.

사용자 인터페이스 테스트

웹 기반 응용 프로그램입니다. 이러한 애플리케이션에서,우리는 주로 최종 사용자에 의해 사용되는 애플리케이션의 프론트 엔드를 테스트한다.

각 브라우저는 웹 페이지를 다르게 표시하므로 페이지가 다른 브라우저에서 동일하게 보이는 것이 중요합니다. 웹 페이지가 왜곡되고 관리되지 않은 상태로 표시되면 시청자가 웹 페이지를 종료 할 수 있습니다. 따라서 웹 사이트는 더 나은 결과를 위해 사용자 인터페이스 테스트를 거쳐야합니다.

기능 테스트

응용 프로그램 전반에 걸쳐 서로 다른 기능의 테스트. 그것은 모든 탐색뿐만 아니라 모든 긍정적 인뿐만 아니라 부정적인 시나리오를 사용하여 프런트 엔드 페이지에 존재하는 모든 필드 값의 유효성을 검사하는 것을 포함한다.

테스트

웹 페이지의 모양과 느낌 요소를 테스트합니다. 모양과 느낌 요소에는 디스플레이 유형,글꼴,정렬,라디오 버튼,확인란 등이 포함됩니다.

  • 사용자 인터페이스 테스트에서 다루는 영역은 유용성,모양&느낌,탐색 컨트롤/탐색 모음,지침 및 기술 정보 스타일,이미지,표,접근성 등입니다.
  • 접근성 테스트를 위해 웹 콘텐츠 접근성 지침을 확인해야 합니다.

응용 프로그램의 모든 기능을 다루는 기능 테스트 사례에서 테스트 사례의 하위 집합을 선택합니다.

두 번째 단계는 사용자 인터페이스 테스트 요구 사항에 따라 이러한 테스트 케이스를 수정하는 것입니다.

다음 단계는 이러한 테스트 케이스를 실행한다;예상 결과와 결과를 비교하고,어떤 차이가있는 경우 다음 같은 문제를 제기. 모든 브라우저에서 테스트 할 수있는 것은 아닙니다. 일반적으로 클라이언트는 테스트 요구 사항이 있는 브라우저를 결정합니다.

각 브라우저는 웹 페이지를 다르게 표시하므로 모든 브라우저가 웹 페이지를 정확하게 표시 할 것으로 기대할 수는 없습니다.

예를 들어,윈도우 파이어 폭스의 드롭 다운은 맥 파이어 폭스와 다를 수 있습니다. 이러한 운영 체제 유틸리티이며,우리는 같은 그들을 받아 들일 필요가 이러한 문제는 허용됩니다.

기본 브라우저: 일반적으로 응용 프로그램은 최종 사용자에 의해 주로 사용될 것으로 예상되는 브라우저를 대상으로 개발,그것은 기본 브라우저로 불린다.일반적으로 발생하는 사용자 인터페이스 결함

  • 버튼 정렬 문제
  • 레이블 또는 텍스트 상자 사이의 일치하지 않는 공백
  • 끊어진 레이블,즉 한 줄 레이블이 두 줄로 표시됨
  • 텍스트 상자,정보 아이콘,레이블 또는 드롭 다운 간의 오정렬
  • 필드 겹침
  • 불완전한 필드
  • 페이지의 데이터가 잘못 정렬되었습니다.; 일부 브라우저에서는 세션 만료 시간이 매우 짧거나 매우 길었습니다.
  • 브라우저별 문제–한 브라우저에 데이터를 입력한 후 편집할 수 없지만 다른 브라우저에서 편집할 수 있는 필드는 거의 없습니다.

웹 응용 프로그램의 주요 사용자 인터페이스 테스트 요구 사항은 다음과 같습니다:구성 요소:

구성 요소는 응용 프로그램을 형성하기 위해 여러 다른 구성 요소의 조합과 함께 사용할 수 있는 빌딩 블록입니다. 구성 요소는 응용 프로그램에서 다시 사용할 수 있습니다.

구성 요소의 예로는 버튼,텍스트 필드,자동 제안,확인란,드롭 다운 등이 있습니다.

일부 기본 구성 요소

확인란:확인란 구성 요소에서 하나 이상의 옵션을 선택할 수 있습니다

checkbox

라디오 버튼: 하나의 옵션 만 선택해야하는 경우 라디오 버튼이 유용합니다

radio

일부 고급 구성 요소

1. 아코디언:이 구성 요소를 사용하여 여러 항목을 수직으로 쌓을 수 있습니다. 각 항목은 그 안에 내용을 볼 수 확장 할 수 있습니다. 하나 이상의 항목도 확장 할 수 있습니다.

accordion

2. 이동 경로:이 웹 사이트 탐색에 도움 매우 유용한 구성 요소입니다. 사용자는이 구성 요소에서 웹 사이트 내에서 자신의 현재 위치를 식별 할 수 있습니다.

breadcrump

3. 회전 목마: 정보 항목의 여러 세트는 회전 목마 구성 요소에 통합 할 수 있습니다. 하단에 방법 줍는 사람은 더 많은 항목이 존재 나타냅니다. 화살표는 회전 목마 내 탐색에 도움이됩니다. 일반적으로 회전 목마 탐색은 연속 루프로 구성됩니다.

carousel

구성 요소의 가용성은 순전히 프로젝트 요구 사항 지침을 기반으로 합니다. 그것은 한 프로젝트에서 다른 달라질 수 있습니다.

기본 구성 요소의 다양한 사용자 인터페이스 상태는 다음과 같습니다:

  1. 채워지지 않은 상태
  2. 채워지지 않은 상태 및 포커스에
  3. 정상 상태 및 기본 상태
  4. 가리키기 상태
  5. 사용 안 함 상태
  6. 마스크된 상태

채워지지 않은 상태:

이전 구성 요소의 값을 키입력하면 채워지지 않은 상태라고 합니다. 채워지지 않은 상태는 자리 표시자 텍스트가 있는 경우 표시됩니다. 아래는 텍스트 필드 구성 요소입니다.

채워지지 않은 상태

채워진 상태:

사용자가 키로 입력한 값을 가진 구성 요소가 채워진 상태입니다.

채워진 상태

초점 상태:

사용자가 이미 채워진 구성 요소를 다시 방문합니다. 컴포넌트는 포커싱 상태에 있는 특정 컴포넌트가

정상 상태임을 나타내는 커서를 표시해야 한다:

화면에 사용자가 이미 입력한 값을 가진 컴포넌트의 디스플레이는 정상 상태를 설명한다.

정상 상태

기본 상태:

서버/백엔드에서 자동으로 채워진 값을 표시하는 구성 요소입니다. 이 값은 일부 시나리오에서 사용자가 편집할 수도 있습니다.

호버 상태:

컴포넌트 위로 마우스를 가져가면 호버 동작을 나타내는 컴포넌트가 강조 표시됩니다.

호버 전:

세부 정보 보기_가리키기

가리키기:

상태:

구성 요소가 비활성화되어 있고 사용자가 필드를 편집할 수 없습니다.

사용 상태

사용 상태

사용 안 함 상태

사용 안 함 상태

마스크 상태:

이 구성 요소를 사용하여 암호와 같은 중요한 데이터를 숨길 수 있습니다.

마스크 상태

웹 응용 프로그램의 주요 사용성 테스트 요구 사항은 다음과 같습니다:

  1. 글꼴 패밀리
  2. 글꼴 크기
  3. 색상
  4. 문자 간격
  5. 줄 높이
  6. 배경 유효성 검사
  7. 채우기/불투명도
  8. 길이,너비 및 너비와 같은 구성 요소의 측정
  9. 화면 구성 요소 사이의 위치/간격

위의 사용성 기능은 코드에서 테스트하거나 응용 프로그램의 검사 요소를 사용하여 테스트할 수 있습니다. 또 다른 쉬운 방법은 추가 기능을 사용하는 것입니다. 추가 기능은 응용 프로그램을 테스트해야 하는 브라우저에 따라 달라질 수 있습니다.

각종 브라우저 부가 기능의 세부 사항

이름 사용 정보 호환성
페이지 눈금자 이 추가 기능은 구성 요소의 너비와 높이를 테스트하는 데 도움이됩니다. 구성 요소의 상단,왼쪽,오른쪽 및 하단 위치도 알아낼 수 있습니다 크롬과 파이어 폭스
웹 인스펙터 웹 인스펙터는 웹 인스펙터 아이콘을 클릭하고 테스트 할 섹션 위로 마우스를 가져 가면 글꼴,텍스트 색상 및 배경색을 표시합니다 크롬 및 사파리
파이어 버그 파이어 버그는 오픈 소스 웹 페이지의 모니터링을 위해에 추가 할 수 있습니다. 이 파이어 폭스와 호환 요소를 검사의 대안이다. 파이어폭스
컬러질라 그것은 웹 페이지 크롬과 파이어 폭스의 색상을 분석하는 데 사용되는 색상 선택기 부가 기능입니다
측정 요소의 너비,높이 및 정렬을 픽셀 단위로 테스트하는 데 사용됩니다. 크롬,사파리,파이어폭스

부가 기능의 장점:

  • 시간을 절약
  • 사용하기 쉬운
  • 그것은 비용 효과

추가 기능의 제한:

  • 사용 중 시차 오류 측정
  • 응용 프로그램 간 호환
  • 여러 브라우저와 호환

추가 기능에 대한 참조:

  • 웹 인스펙터:애플 개발 도구
  • 파이어 버그:파이어 버그 위키
  • 그것을 측정
  • 컬러질라

  • 셀레늄
  • HP 통합 기능 테스트
  • 오이
  • UI
  • Sahi

에 대한 자세한 목록의 GUI 도구에서 사용 가능 softwaretestinghelp.com 다. 여기를 클릭하십시오.

샘플 사용자 테스트 사례

1)회전 목마 화살표와 길 찾기의 작동 확인
2)암호 필드가 마스크 된 상태에서만 값을 수락하고 있는지 확인
3)모든 필수 필드가 입력 될 때까지’저장’버튼이 비활성 상태로 유지되는지 확인
4)사용자가’상단’표시 줄을 사용하여 페이지 상단으로 이동하도록 허용되었는지 확인
5)사용자가”저장”버튼을 적용된 필터는 결과를 검색하지 않습니다
6)머리글과 바닥 글에서 사용할 수있는 링크에서 탐색을 확인
7)라디오 버튼의 정렬이 확인 2648>9)각 섹션의 제목이 굵은 글씨로 되어 있는지 확인 10)

클릭 시 하이퍼링크의 색상 변경 확인 결론

웹 사이트는 많은 기업의 영혼입니다. 그것은 잘 보이는 다른 브라우저&플랫폼에서 유사하게 작동하는지 확인하는 것이 매우 필요하다. 따라서 사용자 인터페이스 테스트는 매우 중요하며 대규모 고객 기반과 비즈니스 가치 추가를 보장합니다.

답글 남기기

이메일 주소는 공개되지 않습니다.