버그를 잡자! 웹사이트 테스트에 초심자 가이드

제임스 티비디스
제임스 시비 디스

팔로우

2019 년 5 월 2 일·5 분 읽기

웹 사이트 테스트는 생각보다 훨씬 간단합니다. 당신은 그것을 할 테스터가 될 필요가 없습니다. 그리고 당신은 당신이 완전히 새로운 방식으로 그것을 이해하는 데 도움이됩니다 귀하의 제품에 대한 통찰력을 얻을 수 있습니다.

나는 단일 디지털 존재 프로젝트의 테스터입니다. 내 임무는 많은 브라우저,화면 크기 및 장치에서 플랫폼 웹 사이트를 테스트하여 버그를 찾고 최적의 사용자 경험을 보장하는 것입니다.

테스트를 통해 사용자를 더 잘 이해할 수 있습니다

웹 사이트를 테스트 할 때 오류 나 버그를 찾는 것이 아니라 가능한 한 많은 다른 렌즈를 통해 조사하려고합니다. 이는 다른 장치,다른 브라우저 및 다른 화면 크기 내에서 웹 사이트를 사용하는 것을 의미합니다. 일부 버그는 1 개의 브라우저에만 표시되므로 다양한 환경에서 테스트해야 합니다. 또한 다른 사용자가 너무 사이트와 상호 작용 할 수있는 방법을 볼 수있는 좋은 기회입니다.

우리가

에서 테스트하는 것 vic.gov.au 웹 사이트,우리는 윈도우 등 여러 환경에서 테스트,맥,안드로이드와 이오스. 우리는 데스크톱 컴퓨터,태블릿 및 휴대폰뿐만 아니라 일부 장치에 대한 여러 인터넷 브라우저에서 테스트합니다.

우리는 빅토리아 정부 디지털 표준 테스트 일반적으로 사용되는 브라우저 및 사용자 수용 테스트 템플릿을 포함하는 제품 또는 서비스 가이드를 사용합니다.

우리는 사람들이 우리의 사이트에 액세스하는 방법을 알 수 없다,그래서 우리는 그들이 그것을 액세스하지만,자신의 경험이 일관되고 우리의 품질 기준을 충족하는지 확인하려면. 물론,우리가 우리의 사이트를 테스트 할 수있는 장치의 끝없는 숫자가 있지만,우리가 이미 가지고 있고 다른 사람들로부터 빌릴 수있는 장치를 사용하는 것은 종종 대중이 그것을 인식 할 수있는 방법에 대한 귀중한 통찰력을 제공하기에 충분합니다.

이후 vic.gov.au 웹 사이트가 출시되었습니다,나는 돈 캐스터 쇼핑 센터에있을 일이. 그래서 나는 자신의 아이폰 중 하나에 사이트를 테스트하기 위해 애플 스토어에 갔다,나는 하나 자신을 가지고 있지 않았기 때문에. 나는 페이지 피드백 양식 중 하나를 작성하고’애플 스토어에서 제임스’로 서명,우리의 콘텐츠 팀은 내가 사이트를 테스트하기 위해 겪은 노력을 평가.

사람들이 귀하의 사이트에 접속하기 위해 사용하는 기기,브라우저 및 화면 크기에 대한 정확한 데이터를 원할 경우,구글 애널리틱스가 귀하의 사이트에 설정되어 있는지 항상 확인할 수 있습니다.

드래그 테스트

웹 사이트를 테스트 할 때 가장 먼저 수행하는 테스트는 드래그 테스트입니다. 이 날 같은 브라우저에 머무는 모든 동안 웹 사이트가 서로 다른 화면 크기와 다른 장치에 어떻게 보일지 빠른 이해를 얻을 수 있습니다.

드래그 테스트에는 브라우저 창을 가장 큰 크기에서 가장 작은 크기로 드래그하여 다른 중단점에서 사이트가 어떻게 보이는지 확인하는 작업이 포함됩니다.

중단점은 사이트를 볼 수 있는 다양한 화면 크기에 맞게 크기가 커지거나 작아지기를 원하기 때문에 필요하며 창을 작게 또는 크게 끌면 이러한 모든 변경 사항을 쉽게 관찰할 수 있습니다. 그럼 함께 예를 보자 vic.gov.au 홈페이지.

이것은 내 vic.gov.au 홈페이지 내 27″아이맥 화면에 최대 크기로 열었다. 의 홈페이지를 관찰하고 우리가 창을 작게 만들 때 어떻게되는지 보자.

이 vic.gov.au 홈페이지 하지만 지금은 단지 절반 화면 아래 차지. 이미지에서,나는 지금까지 두 이미지 사이의 주요 차이점 중 일부를 언급했습니다.

이 이미지는 사이트의 가장 작은 버전이며 휴대 전화에서 볼 수 있습니다. 그것은 다른 사람들과 가장 다를 것입니다.

이 세 개의 화면 크기 중단점만 켜져 있는 것은 아닙니다 vic.gov.금 그리고 그것은 모든 사이트에 대해 다를 수 있습니다,하지만 당신이 시작하는 뭔가.

나는 종종 헤더를보고 거의 모든 헤더에서 매번 변경된 중단 점을 확인합니다. 그리고 나는 각각의 다른 헤더가 사이트의 디자인을 보면서 어떻게 생겼는지 배웠습니다. 그것은 당신이 기능이 특정 화면 크기의 중단 점에서 수행하는 방식을 볼 예정이다 여부를 알 수 있도록 디자인에 액세스 할 수 있도록 많은 도움이됩니다. 중단점 간의 차이의 수를 감안할 때 구현에 몇 가지 오류가 있는 경우가 많습니다. 그래서 이것은 사이트가 개발되고 같이 일을 할 수있는 매우 가치있는 테스트입니다.

사이트의 헤더,콘텐츠 및 바닥 글에 대한 드래그 테스트를 수행하는 것을 잊지 마십시오. 또한 페이지가 충분히 작아 질 때 사이드 바 콘텐츠가 어디로 가는지 기록하십시오. 그것은 보통 바닥 어딘가에 간다.

콘텐츠 유형 테스트

각 웹 사이트마다 다른 페이지 콘텐츠 유형이 있습니다. 각 페이지에서 서로 다른 특성을 테스트할 것이므로 각 개별 콘텐츠 형식에 익숙해야 합니다. 일부 페이지는 다른 페이지보다 더 다양합니다. 에 vic.gov.au,우리의 콘텐츠 유형은 다음과 같습니다:

  • 알림
  • 이벤트
  • 부여
  • 방문 페이지
  • 뉴스
  • 페이지
  • 프로필

콘텐츠 유형에 대한 자세한 내용은 다음을 방문하십시오: https://www.vic.gov.au/what-single-digital-presence-offers#page-templates-available-on-sdp

장치 및 브라우저 테스트

마지막으로 좋아하는 브라우저에서 사이트를 철저히 테스트 한 후에는 터치 경험이 항상 예상 할 수있는 것이 아니며 특정 장치에서도 특정 브라우저와 관련된 버그를 항상 찾을 수 있으므로 다른 장치 및 브라우저에서도 특히 인기있는 사이트를 보는 것이 좋습니다. 아무데도 나오지 않는 것처럼 보이며 완전히 예상치 못한 것입니다.

핸디 테스트 링크

  • 가장 인기있는 브라우저(호주) — http://gs.statcounter.com/browser-market-share/all/australia
  • 가장 인기있는 브라우저(세계) — http://gs.statcounter.com/browser-market-share
  • 아이폰 시뮬레이터(맥 전용) — https://developer.apple.com/xcode/
  • 대신 단지 화면 해상도 테스트의 장치 별 테스트를 수행하려는 경우,구글 크롬 개발자 도구는 실제 장치의 동작 방식을 시뮬레이션 할 수있는 장치 도구 모음을 가지고 있지만 완벽하지 않습니다.

이 기사에서 논의되지 않은 많은 웹 사이트 테스트 기술이 있지만 시작하기에 좋은 곳입니다. 내가 테스트 할 다음 일은 양식에 입력 된 데이터가 백엔드에 올바르게 나타나고 잘못된 데이터를 입력 할 수 없다는 것입니다.

재미있는 테스트를 해보고 사람들이 이 글에서 배운 것을 듣기를 고대합니다. 모두 함께 웹을 더 잘합시다!

답글 남기기

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