responsive web design testing
오늘날 인터넷에 액세스하기 위해 휴대 기기를 사용하는 것은 점점 더 인기를 얻고 있습니다. 거의 모든 인터넷 사용자는 웹 사이트의 모바일 버전을 원합니다.
그러나 대부분의 웹 사이트는 모바일 장치에 맞게 최적화되어 있지 않습니다. 테스터는 반응 형 디자인에서 모바일 반응 형 테스트를 수행해야합니다.
기존 소프트웨어 제품은 기본적으로 모든 장치에서 동일하게 렌더링됩니다.
마이크로 소프트 오피스, 예를 들면 , 모든 개인용 컴퓨터에서 동일하게 보입니다. 데스크톱에서 실행되는 그대로 Microsoft Word를 가져 와서 iPhone4에서 봅니다. 메뉴와 버튼이 작게 나타나거나 그렇지 않으면 화면의 모서리 만 표시되며 광범위한 스크롤바를 사용해야합니다. 어느 쪽이든 애플리케이션은 본질적으로 사용할 수 없게됩니다.
이 실망스러운 경험은 모든 디자이너가 웹용으로 디자인하려고 할 때 겪는 것과 정확히 일치합니다.
문제를 해결하는 방법은 '반응 형 디자인'이라고하는 것으로, 웹 페이지에서 브라우저에 해상도가 무엇인지 묻고 사용 가능한 화면 공간을 기반으로 사용자 경험을 우아하게 다시 디자인하는 기술입니다. 갑자기 소프트웨어가 프로덕션 환경에서 어떻게 보일지 정확히 알 수 없습니다.
이는 다양한 해상도에서 '올바른 것'과 그렇지 않은 것을 실험하고 학습 할 수 있어야하는 테스트 전략 (및 자동화 전략)을 의미합니다.
학습 내용 :
반응 형 웹 사이트 디자인 테스트를위한 초보자 가이드
웹 사이트를 열려고하면 서버에 ' m. 하위 도메인 ”을 사용하여 요청이 발생한 휴대 기기의 종류를 식별합니다. 이를 기반으로 사용자를 해당 모바일 버전으로 리디렉션합니다.
이 100 % 효과를 얻으려면 각 장치에 특별히 설계된 웹 사이트 디자인이 있어야합니다. 에프또는 예,화면 크기와 해상도를 고려하여 Blackberry, iPhone, iPad 등에 대한 다른 특정 디자인.
그러나 모든 해상도 및 장치에 대한 다른 웹 버전은 실용적이지 않습니다. 그만큼 에단 마르 콧 새로운 접근 방식 인 반응 형 웹 디자인 ( RWD ) –이 문제가 해결되었습니다.
우리의 추천
# 1) LT 브라우저
LT 브라우저 사용자가 45 개 이상의 장치 뷰포트에서 웹 사이트를 테스트하고 디버깅하는 데 도움이됩니다. 모바일 뷰 디버깅을위한 개발 친화적 인 브라우저 인 LT Browser를 사용하여 사전 설치된 다양한 모바일 및 데스크톱 장치 뷰 포트에서 웹 사이트를 테스트하세요.
웹 사이트 URL을 입력하고 웹 사이트를 테스트 할 장치를 선택하기 만하면됩니다. 나란히보기 비교를 위해 두 장치를 동시에 선택할 수 있습니다.
테스트뿐만 아니라 사용자는 LT Browser에서 제공하는 내장 된 DevTools를 사용하여 이동 중에도 웹 사이트를 디버그 할 수 있습니다.
가장 좋은 점은 사용자가 LT Browser가 반응 형 테스트를위한 첫 번째 선택이되는 요구 사항에 따라 사용자 지정 장치를 만들 수 있다는 것입니다.
=> LT 브라우저 방문반응 형 웹 디자인이란 무엇입니까?
RWD웹 사이트가 장치, 해상도에 반응하고 올바르게 렌더링하고 적응할 수있는 대상입니다. 예를 들면, 사용자가 데스크톱 / 노트북에서 iPad로 전환하면 웹 사이트는 각 장치 기능에 따라 이미지 크기 등과 같은 해상도 변경을 자동으로 조정해야합니다.
요컨대반응 형 디자인이다 '모든 화면에 하나의 웹 사이트' .
아래 화면은예RWD의 :
노트 : 실시간예반응 형 웹 사이트의 www.fpl.com
RWD에서 웹 사이트는 쉬운 탐색, 명확하고 간단한 사용자 인터페이스 등을 통해 우수한 사용자 경험을 제공하도록 설계되었습니다. 반응 형 웹 사이트는 쉽게 적응하고 모든 해상도, 브라우저, 화면 크기, 하드웨어 및 운영 체제에서 작동합니다.
- 반응 형 웹 사이트는 PHP, .Net, Java, CQ5 (Adobe Experience Manager – AEM) 및 반응 형 디자인을 개발하는 데 매우 편리한 많은 새로운 프레임 워크로 코딩됩니다.
- CSS 및 HTML 기능을 활용하여 화면 해상도와 이미지 크기를 자동으로 조정합니다.
- RW 디자인은 중단 점을 사용하여 사이트의 레이아웃을 식별합니다. 각 디자인은 서로 다른 중단 점에서 사용됩니다. 한 디자인은 중단 점 위에 적용되는 반면 다른 디자인은 중단 점 아래에 사용됩니다. 이러한 중단 점은 일반적으로 브라우저의 너비를 기반으로합니다.
- 반응 형 웹 사이트를 디자인하는 동안 개발자는 모든 장치에서 사이트의 콘텐츠, 디자인 및 성능을 고려하여 유용성 보장 .
다이어그램은 콘텐츠가 장치의 환경 및 동작에 어떻게 적응하는지에 대한 정확한 유사점입니다.
노트 : RWD 외에도 Adaptive Web Design ( AWD ) . AWD 접근 방식에서는 각 장치에 대한 특정 디자인이 있습니다. 그러나 AWD는 항상 적합하지 않을 수 있습니다. 게다가 AWD 사이트를 디자인하는 것은 RWD 사이트에 비해 더 많은 시간과 비용이 소요됩니다.
반응 형 디자인의 장점 :
#1) 사용자 경험: RW에 액세스하는 장치를 기반으로 특이한 요소를 숨기고 사용자가 목표를 더 빨리 달성 할 수 있도록 도와줍니다.예를 들면 :모바일에서 RW를 열면 중요하지 않은 요소를 숨기고 웹 페이지로드 속도를 높입니다.
#두) 공유 또는 연결 : RW의 경우 다양한 장치에 대해 하나의 URL 만 사용됩니다. 하나의 URL만으로 다양한 기기의 모든 데이터와 정보를 모아서 사용자에게 더 나은 UX를 제공합니다.
#삼) RW에는 거의 또는 최소한의 유지 관리가 필요합니다.
# 4) RW 레이아웃은 유동적입니다.
반응 형 웹 디자인과 적응 형 웹 디자인의 차이점 :
RWD와 AWD는 서로 밀접하게 관련되어 있습니다.
- RWD는 변경 사항에 빠르고 긍정적으로 반응하는 반면 AWD는 새로운 목적을 위해 쉽게 수정할 수 있습니다.
- RWD에는 여러 유동 격자 레이아웃이 있고 AWD에는 여러 고정 너비 레이아웃이 있습니다.
- RWD의 이미지를 상황 인식이라고합니다.
반응 형 웹 사이트 디자인의 주요 구성 요소 :
반응 형 웹 디자인에는 세 가지 주요 구성 요소가 있습니다.
#1) 유연한 레이아웃 : 동적으로 너비에 맞게 쉽게 크기를 조정할 수있는 유연한 그리드로 웹 사이트를 구축합니다.
#두) 미디어 쿼리 : 기기의 방향, 뷰포트 등 컨텍스트에 따라 브라우저 및 기기에 다양한 스타일을 제공합니다.
#삼)유연한 매체 : 뷰포트의 크기가 변경되면 미디어 (이미지, 비디오 등)도 요구 사항에 따라 크기 또는 해상도를 변경해야합니다.
노트 : '뷰포트'는 웹 사이트의 실제 콘텐츠가 표시되는 브라우저 영역입니다. 뷰포트에는 도구 모음, 탭 등이 포함되지 않습니다.
반응 형 웹 디자인 예
예 # 1)
링크 열기 www.fpl.com 다양한 장치에서 URL을 관찰하십시오. 반응 형 웹 사이트의 URL은 모든 장치에서 동일하게 유지됩니다.
에) 데스크탑 또는 노트북에서 RW보기 (큰 화면 크기)
비) 태블릿에서 RW보기 (중간 화면 크기)
씨) 모바일에서 RW보기 (작은 화면 크기)
예 # 2)
사이트 열기 www.yepme.com 노트북과 모바일에서도 URL을 비교합니다. 이 yepme.com 링크는 반응 형 링크가 아닙니다.
에) 데스크톱 또는 노트북에서 응답하지 않는 웹 사이트보기
비디오 파일 압축을위한 최고의 소프트웨어
비) 모바일에서 반응하지 않는 웹 사이트보기
반응 형 웹 사이트를 테스트하는 방법
반응 형 디자인 테스트는 웹 사이트 테스트 또는 다른 장치의 URL. 실제로 반응 형 웹 사이트를 완전히 테스트하는 것은 불가능합니다. 그렇게하려면 다양한 화면 크기에 맞는 다양한 시스템을 설정해야하기 때문입니다.
반응 형 테스트의 가능한 방법은 테스트 시나리오에 따라 브라우저 창 크기를 조정하는 것입니다.
IE 및 Safari와 같은 일부 브라우저는 뷰포트 영역을 픽셀 단위로 보는 데 도움이되는 플러그인 또는 브라우저 확장을 제공합니다. 이렇게하면 픽셀을 수정하여 원하는 화면 크기를 얻음으로써 테스트를 쉽게 수행 할 수 있습니다.
Chrome과 같은 다른 브라우저는 '에뮬레이터' 테스트에 필요한 원하는 장치에 따라 화면 기능과 환경을 변경하는 데 도움이됩니다.
노트 : '에뮬레이터' 호스트 시스템 (현재 브라우저)이 게스트 시스템 (원하는 화면 크기에 대해 테스트 할 원하는 장치의 브라우저)처럼 동작하도록 만드는 브라우저 내에서 제공되는 소프트웨어 또는 프로그램입니다.
에뮬레이터가 테스트에 필요한 정확한 환경을 제공 할 수는 없지만 높은 수준에서 RW를 테스트하는 비용 효율적인 솔루션입니다.
반응 형 웹 사이트 테스트를위한 샘플 테스트 시나리오 :
반응 형 웹 디자인 테스터는 반응 형 디자인이 아래에 언급 된 모든 사항을 충족하는지 확인해야합니다. 테스트 시나리오 버그가없는 반응 형 디자인인지 확인합니다.
#1) 반응 형 웹 사이트 링크 또는 URL은 화면 해상도에 관계없이 각 기기의 모든 브라우저에서 동일해야합니다.
가정 www.abc.com 반응 형 웹 사이트입니다. 노트북과 휴대 전화에서 열면 두 기기에서 URL이 동일해야합니다. 모바일 브라우저에서 열린 웹 사이트는 www.m.abc.com 또는 www.mobile.abc.com
예: 웹 사이트 열기 www.kotak.com 랩톱에서 모바일에서도 동일한 파일을 열고 두 장치의 URL을 관찰하십시오. URL은 두 장치 모두에서 동일하지 않습니다.
아래 스냅 샷은 URL이 다른 장치에서 반응하지 않는 웹 사이트 노트북 및 모바일과 같은.
웹 사이트 열기 www.w3schools.com 노트북과 모바일에서 URL을 확인하세요. 두 장치 모두 동일해야합니다.
아래 스냅 샷은 URL이 다른 장치의 반응 형 웹 사이트에 대해 동일하게 유지됨을 보여줍니다.
#두) 반응 형 웹 사이트의 콘텐츠 (이미지, 하위 링크, 메뉴 등)의 표시 위치는 화면 해상도의 변경에 따라 동적으로 변경되어야합니다. 즉, 화면 해상도를 노트북 크기에서 모바일로 변경하면 메뉴 옵션 표시가 동적으로 변경되어야합니다.
예: 링크 열기 www.fpl.com 노트북에서 창의 오른쪽 상단 모서리에있는 메뉴를 클릭합니다. 메뉴 옵션은 아래와 같이 표시됩니다.
C ++에서 병합 정렬
열다 www.fpl.com 모바일에서 창 오른쪽 상단의 메뉴를 클릭합니다. 메뉴 옵션은 다음과 같습니다.
노트 : 이 시나리오는 브라우저 에뮬레이터 (전자:크롬).
웹 사이트 열기 www.fpl.com 바탕 화면을 통해 메뉴 옵션이 어떻게 표시되는지 관찰하십시오. 아래 스냅 샷을 참조하십시오.
이제 브라우저 창을 모바일 화면 크기로 조정 한 다음 메뉴 옵션의 표시를 확인합니다. 아래 스냅 샷을 참조하십시오.
#삼) 반응 형 웹 사이트의 URL도 해상도에 따라 달라야합니다.
이 시나리오를 테스트하기위한 전제 조건 : 개발자에게 하위 링크가 응답하지 않는 반응 형 테스트 웹 사이트에 하위 링크를 삽입하도록 요청합니다.
예를 들면, 개발자는 링크를 삽입 할 수 있습니다. www.snapdeal.com 우리 테스트 웹 사이트에.
이제 모바일에서 반응 형 테스트 웹 사이트를 열고 전제 조건에 언급 된 하위 링크를 클릭합니다. 그러면 하위 링크의 URL이 https://m.snapdeal.com .
# 4) 랩톱에서도 동일한 시나리오를 테스트 할 수 있습니다. 데스크톱 또는 랩톱에서 RW를 열고 응답하지 않는 하위 링크 (테스트 시나리오 3의 전제 조건에서 언급 됨)를 클릭합니다. 하위 링크의 URL은 변경되어서는 안됩니다 (랩톱에서이 시나리오를 테스트하고 있으므로 URL은 동일하게 유지되어야합니다).
# 5) 이 시나리오를 테스트하기위한 전제 조건 : 개발자에게 하위 링크를 삽입하도록 요청하고예를 들면 www.paytm.com 테스트 사이트에. 이 시나리오를 실행할 모바일 장치에는 모바일에 설치된 Paytm의 각 애플리케이션이 있어야합니다.
이제 모바일에서 테스트 반응 형 웹 사이트를 열고 'paytm'하위 링크를 클릭하십시오. 그러면 모바일에 설치된 Paytm 애플리케이션이 열리게됩니다. (사용자는 브라우저 나 다른 창에서 웹 사이트로 리디렉션되지 않아야하며 앱만 열려 있어야합니다.)
# 6) 반응 형 웹 사이트의 이미지는 해상도에 따라 다릅니다. 모바일 호환성을 위해 설계된 반응 형 웹 사이트 코드에 삽입 된 이미지의 해상도가 데스크톱이나 태블릿의 해상도와 다르다는 것을 의미합니다. 각 화면 크기에는 디자인에 특정 이미지가 있어야합니다.
이 시나리오를 테스트하기위한 전제 조건 : 이미지의 해상도를 테스트하고 확인하는 것은 어려운 작업이 될 수 있습니다. 개발자에게 모바일, 태블릿 및 데스크톱 용으로 반응 형 웹 사이트에 세 가지 다른 이미지를 별도로 삽입하도록 요청하세요.
데스크톱, 태블릿 및 모바일에서 테스트 반응 형 디자인 웹 사이트를 엽니 다. 반응 형 웹 페이지의 이미지는 세 장치 모두에서 달라야합니다.
(또는)
데스크탑에서 테스트 RW를 열고 웹 페이지에서 이미지를 확인하십시오. 이제 창 크기를 태블릿 크기로 조정하고 이미지를 확인하십시오. 이것은 데스크톱 화면 크기에 대해 표시된 이미지와 달라야합니다. 이제 창 크기를 모바일 화면 크기로 조정하고 이미지를 확인할 수 있습니다. 이 이미지는 위의 두 이미지와도 달라야합니다.
예: 반응 형 사이트 열기 www.fpl.com 데스크탑에서; 이미지를 마우스 오른쪽 버튼으로 클릭하십시오. 홈페이지-> '검사'선택 메뉴에서. 코드에서 이미지 해상도를 확인하십시오 (이미지 파일 이름 확장자 .jpg 확인). 아래 스크린 샷을 참조하십시오.
이제 동일한 창을 태블릿 화면 크기로 조정하고 이미지 해상도를 확인합니다. (이미지 이름 확장자는 medium.jpg입니다.)
마지막으로 창 크기를 모바일 화면 크기로 조정하고 이미지를 확인합니다. (이미지 확장명은 small.jpg입니다.)
# 7) 웹 페이지의 아무 곳이나 무작위로 클릭하고 하이퍼 링크되지 않은 데이터 나 텍스트가 시작되어 다른 페이지 나 콘텐츠로 리디렉션되는지 확인합니다. 이것은 단어 나 텍스트가 하이퍼 링크로 표시되는지 여부를 테스트합니다. 백엔드 .
노트 : 일부 프로젝트에서 요구 사항은 특정 장치에 대한 화면의 픽셀 크기 및 해상도에 대해 설명합니다. (예를 들면, RW의 태블릿보기는 15:15 픽셀이어야하고 모바일의 경우 10:10 등이어야합니다.)
픽셀 크기를 변경할 때 RW 디스플레이에 대해 발생해야하는 동적 변경을 테스트하는 것이 주요 시나리오입니다.
# 8) 브라우저에서 테스트 RW를 열고 메인 이미지의 내용과 디스플레이를 봅니다. 이제 태블릿 크기의 중단 점까지 창 크기를 조정하고 이미지 해상도 및 기타 콘텐츠에 발생해야하는 변경 사항을 확인합니다. 중단 점에서 변경은 동적으로 발생해야합니다 (때로는 중단 점에서 변경이 발생하지 않고 결함 인 다른 픽셀 크기에서 변경 될 수 있음).
반응 형 웹 사이트를 테스트하는 도구
반응 형 웹 사이트의 웹 페이지를 미리 볼 수있는 도구 (웹 사이트)는 거의 없습니다.
예를 들면미리 정의 된 다양한 화면 해상도 (스마트 폰, 태블릿 등)에서 반응 형 사이트를 테스트하고 원하는 해상도로 사용자 지정할 수도 있습니다. 이러한 도구는 테스트 활동을 더 쉽고 빠르게 만듭니다. 이러한 브라우저 내 도구는 다음과 같이 불릴 수 있습니다. 응답자 .
일부 도구는 반응 형 웹 사이트의 웹 사이트 디자인, HTML, 레이아웃, CSS 등을 테스트하는 데 도움이 될 수있는 반응 형 스크린 샷을 캡처하는 중요한 기능도 제공합니다.
이러한 도구는 실제 장치를 사용할 수 없거나 준비되지 않은 경우 훌륭한 대안입니다.
다음은 빠른 도구 목록입니다.
#1) 반응 형 디자인 검사기
위의 '여기에 URL 입력'필드에 테스트해야하는 반응 형 웹 사이트의 URL을 입력하고 '이동'을 클릭합니다. 반응 형 사이트를 보려는 장치와 해상도를 선택할 수도 있습니다.
이제 입력 www.fpl.com 필드에서 'Nexus 7 PORTRAIT'레이아웃을 선택하고 이동을 클릭합니다. 사이트는 선택한 형식의 해상도로 표시됩니다.
#두) Screenfly
테스트 사이트 입력 www.fpl.com 이동을 클릭하십시오.
레이아웃을 데스크톱, 태블릿, 모바일 등으로 변경하고 사이트를 테스트합니다. 이 도구를 사용하면 해상도를 사용자 지정할 수도 있습니다.
예를 들면, 화면 해상도를 512 x 256으로 설정하고 사이트를 테스트하십시오.
노트 : 이 도구를 사용하면 시나리오 6 해상도를 변경하고 이미지 이름을 확인하여 쉽게.
#삼) 디자인 모도
URL을 입력하십시오. www.makemytrip.com Enter를 클릭하십시오.
브라우저의 오른쪽 상단에는 웹 사이트의 레이아웃을 특정 모바일 모델 또는 장치 등의 레이아웃으로 변경할 수있는 옵션이 있습니다.
노트 : 이 도구에는 화면을 드래그하고 원하는 해상도로 해상도를 수정하는 것과 같은 또 다른 기능이 있습니다.
# 4) isResponsive
테스트 URL을 입력하십시오. www.fpl.com 필드에서 '테스트'버튼을 클릭합니다.
노트 : 이 도구에는 사이트를 테스트 할 수있는 몇 가지 고정 레이아웃 옵션 만 있습니다.
# 5) Mattkersley
한 번에 여러 화면 크기에서 RW를 보려면이 도구 Mattkersley 당신이 필요로하는 것입니다.
이제 주소 표시 줄에 테스트 URL을 입력하고 Enter를 클릭합니다. 한 번에 여러 화면 크기에서 RW를 볼 수 있습니다.
# 6) 기본적으로, 크롬에는 개발 도구가 거의 없습니다. 이를 통해 장치 모드와 기능을 시뮬레이션 할 수 있습니다.
이 크롬 기능을 사용하려면 다음과 같은 테스트 반응 형 디자인 웹 사이트를 엽니 다. www.fpl.com 크롬에서 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 '검사'옵션을 선택하거나 Ctrl + Shift + I를 누릅니다. 웹 페이지 하단에 아래와 같은 창이 열립니다.
이제 아래 스크린 샷과 같이 아이콘을 클릭합니다.
웹 페이지의 모바일 모드가 열립니다. 그로부터 해상도를 특정 픽셀과 드롭 다운 메뉴에 표시되는 사전 정의 된 모바일 모델로 변경할 수 있습니다. 명확한 아이디어를 얻으려면 아래 스냅 샷을보십시오.
노트 : 또한 웹 페이지를 세로 또는 가로보기로 변경할 수도 있습니다.
반응 형 디자인을 테스트하는 다른 좋은 도구 :
7) 반응 형 디자인
8) BrowserStack
9) 트로이
10) 친근한 디자인
열한) 응답자
12) Studiopress
13) 반응 형 테스트
14) MAC 머신의 경우“ 적당한 ”를 눌러 RW를 테스트합니다. 이 응용 프로그램을 사용하면 테스트를 위해 다양한 장치에 다양한 중단 점을 설정할 수 있습니다. APTUS는 무료 애플리케이션이 아니므로 Mac App Store에서 구입해야합니다.
반응 형 디자인 및 가능한 솔루션 테스트의 과제
동적 테스트 전략
320x480 (iPhone4의 해상도)에서 2048x2048 (대형 모니터)로 이동하면 가능한 브라우저 크기가 400 만 개가 넘습니다. 대부분의 테스트 그룹은 테스트 장치 목록을 소수로 좁 힙니다. 그럼에도 불구하고 수동 테스트 문제는 접근하기 어렵거나 불가능합니다.
개발자는 모든 플랫폼 문제를 예상 할 수 없으며 테스터는 출시 전에이를 파악할 수 없습니다. 이로 인해 프로덕션에서 가끔 사용자 인터페이스 문제가 발견됩니다.
자바에서 해시 테이블을 구현하는 방법
누군가가 브라우저의 크기를 줄여 중요한 텍스트 필드가 페이지 레이블로 덮일 수 있습니다. 동적 페이지 크기 조정을 처리하도록 설계된 일부 코드는 모달 날짜 선택기를 중단하고 WebDriver에 빌드 된 일반 테스트에서 알아 차리지 못합니다. 테스트를 빌드하기에는 표시 옵션이 너무 많고 시간이 너무 적습니다.
살펴 보겠습니다현실적인 예문제를 설명하기 위해.
광고 슬라이더와 같은 동적 페이지 및 다양한 페이지 크기의 사용자로부터 스트리밍되는 콘텐츠는 많은 소프트웨어 제품의 필수 요소입니다. 여기에 페이지가 어떻게 표시 될지 예측할 수 없으며 많은 자동화 작업이 실패로 시작된다는 사실을 추가하십시오.
이 문제에 대한 두 가지 인기있는 솔루션이 있습니다. 표준화 된 또는 기준선 데이터 세트를 사용하고 테스트 스위트가 실행될 때마다 새로 고치는 것과 한 번에 하나의 환경 또는 플랫폼을 가져 오는 것입니다.
표준 데이터는 테스트 환경을로드 할 때마다 페이지 콘텐츠가 동일하게 표시되도록합니다. 이 전략은 사람들에게 많은 플랫폼에 대한 액세스를 제공하는 Sauce Labs와 같은 것과 결합되어 꽤 멀리 있습니다.
이 접근 방식에는 시간과 리소스가 필요합니다. 데이터베이스 내보내기를 만들고 업데이트하려면 데이터베이스 액세스 권한이있는 사람 (일반적으로 DBA)의 시간이 필요합니다. 그리고 누군가는 테스트 환경을 유지하기 위해 스크립트 설정 및 분해 스크립트를 만들어야합니다. 이 모든 노력을 다한 후에는 숨겨지기를 좋아하는 살균 된 환경 버그 유형으로 끝날 수 있습니다.
또는 시각적 테스트 기술을 사용하여 레이아웃과 콘텐츠가 다양한 웹 페이지에서 테스트를 자동화 할 수 있습니다. 이 도구를 사용하면 테스트 환경을 변경하지 않고 테스트 그룹 외부 사람의 기술 세트 없이도 테스트를 만들 수 있습니다.
예를 살펴 보겠습니다.
Twitter 모바일 앱을 고려하십시오.
이 제품은 지속적으로 변화하는 사용자 콘텐츠와 광고의 조합입니다. 헤더에는 뉴스 피드 및 알림과 같은 사용자 인터페이스의 몇 가지 핵심 부분도 있습니다.
시각적 테스트 도구를 사용하여 볼 수있는 영역뿐만 아니라 스크롤 가능한 전체 페이지의 화면 캡처를 수행하여 시작할 수 있습니다. 텍스트 콘텐츠를 무시하지만 페이지의 요소에 초점을 맞춘 비교 옵션을 선택할 수 있습니다.
예를 들면, 트윗에 대한 필드가 존재하고 각 트윗에 이름 요소와 날짜 / 시간 요소가 있음을 알 수 있습니다. 요소에 무엇이 있는지 걱정하지 않아도됩니다.
전체 페이지에서 요소를 검색하면 많은 자동화 된 테스트에서 볼 수있는 유지 관리 및 복잡성 부담도 덜어집니다. 페이지의 데이터를 조작하고 저장하고 스크롤 한 다음 확인하는 대신 모든 것을 한 번에 얻을 수 있습니다. 이는 작성할 코드, 유지 관리 할 코드, 야간 테스트 실행에서 오 탐지가 적다는 것을 의미합니다.
반응 형 디자인을위한 반응 형 테스트 :
반응 형 디자인은 사용 가능한 모든 플랫폼에 조합 문제를 추가했습니다. 질문은 ~이야; 가능한 모든 플랫폼과 화면 크기 중에서 최상의 테스트 범위를 선택합니다.
우리가 다루는 환경의 수를 가장 인기있는 환경으로 만 줄이면 적용 범위 문제를 무시하면서 기술 작업이 더 쉬워집니다.
자동화 프레임 워크만으로 환경의 수를 늘리면 유지 관리에 악몽이 생기고 잠재적으로 해결할 수없는 테스트 문제가 추가됩니다.
좋은 시각적 테스트 도구와 웹 드라이버와 같은 유연한 UI 자동화 프레임 워크를 결합하면이 문제의 기술적 측면을 쉽게 처리 할 수있을뿐만 아니라 해결할 수 있습니다.
목표는 합리적인 유지 관리 부담이있는 우수한 사용자 인터페이스 범위입니다. 시각적 테스트는 견고하고 확장 가능한 유일한 옵션입니다.
반응 형 웹 테스트를위한 팁
#1) RW를 테스트하는 동안 모든 브라우저와 운영 체제에서 이미지, 텍스트, 가장자리 패딩 등과 같은 디자인 일관성에 유의해야합니다.
#두) RW를 테스트하는 동안 테스터는 테스트 할 항목과 다른 중단 점에서 여러 장치를 테스트하는 방법을 알고 있어야합니다. 그렇지 않으면 매우 철저하고 혼란 스러울 수 있습니다.
#삼) 반응 형 웹 사이트를 철저히 테스트하려면 테스터와 개발자의 조정이 필수입니다. 개발자는 테스트 케이스의 전제 조건에 언급 된 조건을 작성하는 데 테스터를 도와야합니다.
# 4) 웹 페이지가 모든 해상도에서 읽을 수 있는지 확인하십시오. 즉, 브라우저를 모바일 화면 크기로 조정하더라도 콘텐츠를 읽을 수 있어야합니다.
# 5) RW의 중요한 내용은 모든 중단 점에서 볼 수 있어야합니다. 즉, 브라우저 크기를 데스크톱 화면에서 모바일 화면으로 변경하면 기본 이미지, 기본 텍스트, 메뉴 등이 동일하게 유지되어야합니다.
# 6) 테스트를 위해 브라우저 크기가 조정 된 경우 RW의 모든 클릭 영역 (예 : 버튼, 메뉴, 하위 링크)이 클릭에 적합해야합니다.
# 7) 브라우저의 크기를 조정하고 반응 형 웹 사이트를 테스트하면 몇 가지 주요 문제 만 식별 할 수 있지만 모바일 장치에서 손가락 스 와이프, 두드리기 등과 관련된 몇 가지 다른 문제가있을 수 있습니다. 실제 장치에서 이러한 특정 기능을 테스트하면 더 나은 결함을 찾고 제거 할 수 있습니다.
결론
반응 형 디자인을 테스트 할 때 많은 어려움이 있습니다. 문제를 극복하기 위해 효율적인 방법으로 생각해야합니다.
반응 형 웹 사이트를 테스트하는 것은 많은 사람들의 성공적인 미래를 위해 매우 중요합니다. 모바일 애플리케이션. 모바일 사용자는 증가 할 것이며 그들의 기대는 데스크톱 사용자의 기대치와 매우 다릅니다. RWD의 구현 및 철저한 테스트는 기대에 부응하도록 사이트를 설정하는 좋은 방법입니다.
RWD의 구현 및 철저한 테스트는 기대에 부응하도록 사이트를 설정하는 좋은 방법입니다.
이 기사에서 논의 된 정보, 팁 및 테스트 시나리오가 응답 형 웹 사이트 테스트 요구에 확실히 도움이되기를 바랍니다.
저자 정보 : 이것은 Laxmi의 게스트 포스트입니다. 그녀는 7 년 이상의 소프트웨어 테스트 경험을 가지고 있으며 현재 소프트웨어 테스트 엔지니어로 일하고 있습니다.
이 기사에 제공된 모든 예제를 시도하고 동일한 질문 / 의견이 있으면 알려주십시오.
추천 도서
- 알파 테스트 및 베타 테스트 (전체 가이드)
- 빌드 검증 테스트 (BVT 테스트) 전체 가이드
- 기능 테스트 대 비 기능 테스트
- 소프트웨어 테스트 유형 : 세부 정보가있는 다양한 테스트 유형
- 최고의 소프트웨어 테스트 도구 2021 (QA 테스트 자동화 도구)
- ETL 테스트 데이터웨어 하우스 테스트 자습서 (전체 가이드)
- 웹 애플리케이션 보안 테스트 가이드
- SoftwareTestingHelp의 최고의 QA 소프트웨어 테스트 서비스