반응형

출처

https://www.youtube.com/watch?v=MUctcQnB3_A&list=WL&index=17

40 Chrome extensions for software testing, 2020 44

 

12분 길이의 이 영상은 웹사이트 테스팅에 도움이 되는 구글 크롬 확장 프로그램 40가지를 나열한다. UI 테스팅, 쿠키 테스팅, 탐색적 테스팅, API 테스팅, 보안 테스팅, 접근성 테스팅, 성능 테스팅 등의 카테고리 별로 테스터에게 유용한 크롬 플러그인 도구를 소개한다.  

 


 

Web UI 테스팅을 위한 도구

1. WhatFont

테스터가 웹 페이지의 특정 섹션에 어떤 폰트 패밀리와 폰트 크기가 사용되었는지 같은 외관(미관)상의 이슈도 확인해야 할 수 있다. WhatFont는 웹 페이지에서 식별하려는 폰트에 마우스를 가져가면 사용된 폰트를 표시한다. 또한 웹 폰트를 지원하는 서비스에 대한 정보도 제공한다(, Typekit, Google Font API).

 

2. ColorZilla

ColorZilla는 크롬 브라우저 내에서 웹 페이지에 사용된 정확한 색상을 찾을 수 있는 크롬 확장 프로그램이다. Color Picker, Eye Dropper, Gradient Generator, 기타 추가적인 고급 색상 도구를 포함하고 있다. ColorZilla는 웹 페이지에 사용된 색상이 디자인 사양과 일치하는지 테스트해야 할 때 유용하다.

 

3. Spell Checker

웹 페이지의 모든 단어 철자를 검사하고, 틀린 단어(빨간색 밑줄로 강조 표시)의 수정을 제안한다. 영어 사전과 12개 언어를 지원한다.

 

4. IE Tab

크롬 브라우저 내에서 웹 페이지와 Internet Explorer 모든 버전과의 호환성을 테스트할 수 있도록 한다(, IE를 다운로드할 필요 없이 크롬 내에서 레가시 IE 브라우저에서는 웹사이트가 어떻게 보이고 작동하는지 확인). IE Tab이 크롬 내에서 IE 렌더링 엔진을 사용하여 IE를 정확히 에뮬레이트하며, 이는 ActiveX 컨트롤 사용을 가능하게 하고 다양한 IE 버전(IE6, IE7, IE8 또는 IE9)에서 웹 페이지를 테스트할 수 있도록 한다.

 

5. Session Manager

소프트웨어 테스터는 동일한 웹사이트 링크와 URL을 하루에도 여러 번 열어야 할 수 있다. Session Manager를 사용하면 테스터가 자주 함께 여는 웹사이트들의 그룹을 생성하고 한 번의 클릭으로 이 그룹을 열고 닫을 수 있다. 또한 이 그룹을 저장, 삭제, 복원, 업데이트 할 수 있다.

 

6. Check My Links

Check My Links는 웹페이지를 크롤링하고 깨진 링크를 찾는 링크 검사기이다. 웹 디자이너, 개발자, 콘텐츠 편집자가 수동으로 링크 확인을 하는 수고를 덜어주는 확장 프로그램이다. 이를 실행하면 전체 사이트를 확인하고 업데이트가 필요한 모든 끊어진 링크를 보여주는 보고서가 나온다.

 

7. Site Spider

Site Spider는 웹 페이지의 깨진 링크를 보고하는 사이트 크롤러 크롬 확장 프로그램이다. 모든 링크가 잘 작동하는지 수동으로 확인할 필요가 없으므로 소프트웨어를 테스트할 때 많은 시간을 절약하게 해주며, 제한사항 및 정규식 추가를 통해 스파이더를 제한할 수 있는 기능도 제공한다. Site Spider는 오픈 소스이므로 필요에 따라 변경할 수 있다.

 

8. Web Developer Form Filler

양식(Forms)을 테스트하는 데 사용할 값을 테스터가 입력하면, 이 확장 프로그램이 매번 테스트를 수행할 때마다 자동으로 양식을 채워 준다. 테스터가 기입해야 하는 다양한 양식의 수에 따라 다수의 값 세트를 설정할 수 있다. 이 도구를 통해 웹사이트 전체에서 양식을 테스트하는 속도를 크게 높일 수 있다.

 

 

테스트 증거 수집(스크린샷)을 위한 도구

9. LightShot

Lightshot은 테스트 증거용 스크린샷을 찍고 주석을 추가할 수 있는 가볍고 편리한 화면 캡처 도구이다. 인터페이스가 단순하고, 스크린샷을 로컬 컴퓨터에 저장하거나 클라우드에 업로드할 수 있다(다른 사람과 링크로 공유).

 

10. Awesome Screenshot

웹 페이지의 전체 또는 일부를 캡처한다. 테스터는 화면의 일부 영역만 스크린샷으로 캡처할 수 있으며, 주석을 달고, 강조 표시하고, 민감한 정보를 흐리게 처리하고, 잘라낼 수 있다. 스크린샷은 다른 테스터와 공유하거나 데스크탑에 저장할 수 있다.

 

11. Screencastify

Screencastify는 테스트 동안 사용할 수 있는 크롬용 스크린 레코더 확장 프로그램이다. 웹 페이지에서의 사용자 행동을 비디오로 녹음 및 편집할 수 있으며, 이를 테스트 증거로 개발자와 공유할 수 있다. ‘Record’를 누르면 탭의 내용이 녹음된다.

 

 

웹사이트 쿠키 테스팅을 위한 도구

12. EditThisCookie

EditThisCookie는 브라우저 쿠키를 관리할 수 있는 쿠키 관리자이다. 설정된 쿠키와 그 값을 보여주며, 현재 설정된 값을 변경하거나 쿠키를 추가, 삭제, 검색, 보호 또는 차단할 수 있다. 이 확장 프로그램을 사용하면 크롬 설정 화면을 통해 특정 사이트의 쿠키를 검색하는 번거로움을 줄일 수 있다.

 

13. Cookie Editor

Cookie Editor는 테스트 중에 쿠키를 편집하는 데 사용할 수 있는 또 다른 크롬 확장 프로그램이다. 테스터가 쿠키를 추가, 삭제, 편집, 보호, 차단 및 검색할 수 있으며, 또한 쿠키를 JSON 형식으로 내보낼 수 있다.

 

  • 현재 방문하고 있는 페이지에 대한 쿠키를 쉽게 생성, 수정, 삭제할 수 있다.
  • 현재 페이지의 모든 쿠키를 일괄 삭제할 수 있는 편리한 버튼을 제공한다.
  • 쉽게 공유하거나 백업할 수 있도록 텍스트 형식으로 쿠키를 가져오거나 내보낼 수 있다.

 

14. Clear Cache

한창 테스트 중일 때 크롬 브라우저에서 캐시를 지우는 것이 번거로울 수 있는 데, 이 크롬 확장 프로그램은 툴바에서 브라우저 캐시를 바로 지울 수 있도록 한다. 사용자가 지우고 싶은 데이터(, 앱 캐시, 다운로드, 파일 시스템, 양식 데이터, 검색 기록, 로컬 저장소, 암호 등)를 콘트롤에 커스토마이징 할 수 있다.

 

15. Cache Killer

Cache Killer는 크롬에서 캐싱을 쉽게 비활성화 할 수 있도록 한다. Clear Cache와 달리 이 확장 기능을 활성화하면 페이지 로딩 전에 브라우저 캐시를 지워 항상 서버에서 최신 버전 코드를 얻게 된다. 애플리케이션의 캐싱 기능을 테스트하고 싶은 경우 한 번의 클릭으로 이 애드온 기능을 비활성화할 수 있다.

 

 

UI 테스팅에서 다양한 화면 크기를 위한 도구

16. Screen Ruler

Screen RulerUI 결함을 찾고 적절한 픽셀 수를 가진 웹 애플리케이션을 만드는 데 도움이 된다. 테스트하는 동안 Screen Ruler를 엘리먼트 위에 놓고 원하는 방향으로 드래그하여 눈금자를 그리는 것으로 오브젝트의 높이, 너비, 양쪽 여백(padding)을 측정할 수 있다.

 

17. Perfect Pixel

웹 페이지의 디자인이 어떤 다른 페이지의 복제본이 되도록 하려는 경우 유용한 확장 기능이다. 이 크롬 확장을 사용하면 개발된 HTML 위에 반투명 이미지 오버레이를 배치하고 이들 사이에 완벽한 픽셀 비교를 할 수 있다.

 

18. Resolution Test

Resolution Test는 다양한 화면 크기에서 웹사이트가 어떻게 보이는지 테스트하는 데 쓰인다. 설치 후 오른쪽 상단 브라우저 메뉴에서 플러그인 이미지를 클릭하면 다양한 화면 해상도 목록이 있는 드롭다운 메뉴가 표시된다. 각 해상도를 클릭하여 웹사이트가 어떻게 보이는지 미리보기 할 수 있다.

 

19. Window Resizer

Window Resizer 플러그인을 사용하면 다양한 창 크기에서 웹사이트가 어떻게 보이는지 쉽게 테스트할 수 있다. 데스크탑 및 모바일 장치의 가장 일반적인 크기를 기준으로 하는 몇 가지 사전 설정 테스트 옵션이 이 도구에 갖추어져 있다.

 

 

탐색적 테스팅(Exploratory Testing)을 위한 도구

20. Exploratory Testing Chrome Extension

웹 탐색 ​​테스트를 더 쉽게 하기 위해 설계된 크롬 확장 프로그램이다. 버그, 아이디어, 메모, 질문의 형태로 주석을 추가할 수 있고, 이를 세션에 대한 스크린샷과 함께 보고서로 볼 수 있다. 제공하는 기능이 아래와 같다.

  • 버그, 아이디어, 메모, 질문을 간편하게 보고
  • 세션 중에 스크린샷 찍기
  • URL 자동 추적
  • 세션 결과를 보고서로 보기
  • 세션을 저장 및 가져오기
  • 세션을 JSON, CSV 또는 HTML로 내보내기

 

21. Form Filler

이 크롬 확장 기능은 개발자와 테스터가 양식 필드 채우기를 빠르고 쉽게 하도록 지원하여 탐색 테스팅을 돕는다. 이 확장을 사용하면 페이지의 모든 입력 양식(텍스트 상자, 텍스트 영역, 라디오 버튼, 드롭다운 등)을 임의/더미 데이터로 채울 수 있다. 또한 단일 키로 웹 양식을 채우도록 바로가기 키(hot-keys) 설정을 할 수 있다.

 

22. QMetry Exploratory Testing

이 확장 기능은 독립형 QMetry Test Management JIRA 앱과 함께 작동한다. 테스터가 탐색하는 동안 사용자 액션을 자동으로 기록하고, 스크린샷을 캡처하며, 자동화된 테스트 케이스 문서를 생성한다. 또한 탐색하는 동안 버그를 발견하면 한 번의 클릭으로 스크린샷과 환경 세부 정보를 포함한 모든 버그 세부 정보를 내보낼 수 있다. 이런 자동화가 커뮤니케이션을 간소화하고 더 나은 협업이 가능하도록 한다.

 

 

API 테스팅을 위한 도구

23. Postman

Postman 크롬 확장 프로그램은 API 리퀘스트(특히 RESTful APIs)를 테스트하기 위한 도구이다. 즉석에서 환경 변수를 설정하고 전환할 수 있어 많은 시간을 절약할 수 있다. 테스트 API 리퀘스트를 클라우드와 동기화되는 컬렉션으로 그룹화하고, 팀 협업을 위해 다른 사람들이 이를 액세스할 수 있도록 만든다.

 

24. Advanced RESTClient

Advanced RESTClient API 테스팅을 위한 또 다른 크롬 확장 프로그램이다. Postman만큼 기능이 풍부하지는 않지만 API 테스팅 초보자에게 좋다. 이를 사용하면 간단한 인터페이스로 커스톰 API 리퀘스트를 생성하고 테스트할 수 있다. 

 

25. Resteasy

Resteasy는 크롬 내에서 RESTful API를 테스트할 수 있는 또 다른 도구이며, Advanced RESTClient 크롬 확장과 유사한 기능을 제공한다. Resteasy는 제3자 서비스에 RESTful API 호출을 수행하는 개발자를 타겟으로 한 도구이다. 이를 통해 개발자와 테스터는 HTTP 요청/응답을 디버그하고 분석할 수 있다. Resteasy는 구글 크롬의 Extension API 프레임워크를 사용하여 구축되었으며, HTMLJavaScript 같은 일반 기술을 포함한다.

 

26. JSONView

RESTful API를 테스트하는 경우 원시 JSON 데이터를 읽는 것이 힘든 일이다. JSONView 크롬 확장 프로그램을 사용하면 포맷화된 JSON을 크롬 브라우저 내에서 트리 뷰 형태로 볼 수 있어서 더 쉽게 읽고 확인 가능하다.

 

 

보안 및 침투(Penetration) 테스팅을 위한 도구

27. XSS Rays

XSS Rays는 웹사이트에서 XSS 취약점을 식별하는 데 도움이 되는 크롬 확장 프로그램이다. XSS Rays는 원래 Gareth Heyes 2009년에 개발한 순수 Javascript XSS(Cross-Site Scripting) 스캐너이다. XSS Rays는 로드된 페이지의 모든 링크와 양식을 구문분석(파싱)하고, GET/POST 패러미터 상의 XSS를 체크하고 URI 경로를 확인한다.

 

28. Request Maker

Request Maker는 코어 침투 테스트를 위한 크롬 확장 프로그램이다. 이를 사용하여 테스터가 새로운 리퀘스트를 생성하고, 웹페이지에서 요청한 리퀘스트를 캡처하고, URL을 변조하고, 헤더와 POST 데이터를 수정할 수 있다. 또한 버튼 클릭으로 리퀘스트를 북마크할 수 있어 시간을 절약할 수 있다.

 

29. d3coder

d3coder는 침투 테스트를 위한 또 다른 크롬 확장 프로그램이다. 크롬 자체에 추가된 컨텍스트 메뉴를 통해 선택된 텍스트를 인코딩 및 디코딩할 수 있어 많은 시간을 아낄 수 있다. 텍스트를 클립보드에 복사하고 메뉴에서 변환을 선택한다. 변환 후 d3coder는 새 텍스트를 클립보드에 복사한다. d3coderbase64, rot13, CRC32 해싱, UNIX 타임스탬프 변환과 같은 다양한 타입의 인코딩/디코딩을 허용한다.

 

 

접근성 테스팅(Accessibility Testing)을 위한 도구

접근성 테스트는 사용성 검증에 중점을 둘뿐만 아니라 시각, 청각, 신체, 언어 능력, 인지, 학습 및 신경 장애를 포함한 다양한 장애가 있는 사람들이 애플리케이션을 사용할 수 있는지 확인한다.

 

30. WAVE Evaluation Tool

WAVE WCAG(Web Content Accessibility Guidelines) 지침에 따라 웹사이트를 테스트하는 데 사용되는 웹 접근성 평가 도구이다. WAVE Evaluation Tool은 브라우저 내에 WAVE 기능을 추가하고 웹 페이지에 아이콘과 표시기(indicators)를 삽입하여 웹 페이지의 접근성에 대한 시각적 피드백을 제공한다.

 

31. Accessibility Developer Tool

이 크롬 확장 플러그인은 크롬 개발자 도구의 엘리먼트 탭(elements tab)에 접근성 감사 및 접근성 사이드바 창을 추가하며 실제로 크롬 내 코어 도구의 일부가 된다. 접근성 감사(Accessibility audit)를 실행하면 누락된 ARIA 속성을 포함하여 WCAG 2.0 규칙을 페이지가 위반하는 경우를 나열한다.

 

32. aXe

aXe는 크롬 브라우저에 자동화된 접근성 테스트 기능을 추가하는 크롬 확장으로 aXe javascript 라이브러리를 기반으로 한다. aXe WCAG 2.0(W3C 웹 콘텐츠 접근성 지침)Section 508(미국 연방 조달 표준)을 위반하는 것을 오류로 보고한다.

 

33. ARIA Validator

ARIA ValidatorHTML 페이지의 ARIA(Accessible Rich Internet Applications) 구현을 검증하고자 할 때 클릭할 수 있는 버튼을 크롬에 추가한다. HTML에서 중복 ID를 확인하고, 페이지에서 읽을 수 있는 각 프레임에 대한 오류 및 경고를 표시하는 새 탭을 연다.

 

34. Total Validator

테스터가 탐색하는 동안 특정 웹 페이지 또는 전체 사이트의 유효성을 검사할 수 있도록 한다. 유효성 검사 범위에는 HTML XHTML(28개의 다른 표준), CSS(1-3), 접근성 지침(WCAG1, WCAG2, US-508), 끊어진 링크 검사기, 다국어 맞춤법 검사기가 포함된다. 사전 설치되어 있어야 하는 Total Validator 애플리케이션과 함께 작동한다.

 

35. PACT Engine

PACT 엔진은 코어 자바스크립트 상에 구축된 크롬 확장 플러그인으로 접근성 이슈를 표시한다. PACT 엔진은 개발자가 코드 표준을 준수하는 데 도움이 되도록 WCAG 2.0 Section 508 위반을 식별하고, 모든 위반 사항을 EXCEL 또는 JIRA로 내보낸다(모든 이슈를 쉽게 추적할 수 있음).

 

36. Spectrum

색각 이상(CVD: Color Vision Deficiency)은 특정 색을 구별하는 능력에 영향을 미친다. 추정치에 따르면 전 세계적으로 약 2억 명이 CVD에 영향을 받고 있다. 이 확장 프로그램은 다양한 유형의 CVD를 가진 사람들을 위해 웹 페이지를 테스트하는 데 도움이 된다. 특히 데이터 시각 정보를 제시하는 웹 사이트에서 차트의 일부 색상이 다른 색상과 구별되지 않을 수 있으므로 이 도구가 유용하다.

 

37. Tennon Check

사후약방문식의 웹 접근성 테스팅 문제를 해결하기 위해 Tenon은 기존 도구 세트에 자연스럽게 통합될 수 있는 API를 제공한다. Tenon은 사용하는 모든 타입의 IDE, CMS, 자동화된 빌드 및 배포 도구, 단위 테스팅 도구, 승인 테스팅 도구, 또는 이슈 추적 도구 상에서 사용할 수 있다. 이 확장 기능은 브라우저에 버튼을 추가하고, 그걸 클릭하면 현재 보고 있는 페이지가 WCAG 2.1에 기반한 접근성 테스트를 받게 된다.

 

38. Siteimprove Accessibility Checker

Siteimprove Accessibility Checker는 접근성 이슈에 대해 웹 페이지를 평가하는 도구이다. 감지된 접근성 이슈를 페이지 상에 바로 강조 표시하여 콘텐츠에 대한 직관적이고 시각적인 피드백을 제공한다. 모두 분석이 전적으로 크롬 브라우저 내에서 수행되므로 비밀번호로 보호되는 페이지, 비공개 페이지, 다단계 양식(multi-step forms), 동적 콘텐츠 등을 안전하게 평가할 수 있다.

 

 

성능 테스팅을 위한 도구

39. Performance Analyser

사이트 성능이 웹사이트 고객을 붙잡는 가장 중요한 측면 중 하나라면 빠른 페이지 속도를 보장하는 것이 첫번째 우선순위가 된다. Performance AnalyserResource, Navigation, User Timing API를 통해 리퀘스트를 그 타입, 도메인, 로드 시간 별로 즉시 볼 수 있도록 하여 현재 페이지를 분석하는 데 도움이 된다.

 

40. BlazeMeter

BlazeMeter는 성능 분야에서 인기가 높은 도구이다. BlazeMeter 크롬 확장 프로그램을 사용하면 다음을 수행할 수 있다.

  • 브라우저가 보내는 모든 HTTP/S 리퀘스트와 사용자 인터액션을 녹화하고, 동기화된 JMeter 및 Selenium 스크립트를 생성하고, 이를 BlazeMeter에 자동으로 업로드하여 클릭 한 번으로 실행할 수 있다.
  • 성능 테스트를 녹화하거나 실행하기 위해 JMeter 또는 Selenium을 설치할 필요가 없다. 크롬 확장 프로그램이 JMeter 및 Selenium 스크립트를 자동으로 생성한다.
  • 로컬 크롬 브라우저 상에서 녹화된 Selenium 세션을 디버그하고 테스트할 수 있다.
  • 로컬에서 JMeter를 사용하는 경우 크롬 확장에서 생성한 JMX 파일을 디버그하고 개선할 수 있다.

 

반응형

+ Recent posts