Các tiện ích hữu ích cho việc kiểm thử phần mềm trên Chrome (Phần 1)

Google Chrome hiện nay là một trình duyệt rất mạnh được rất nhiều người ưa chuộng. Các tiện ích mà Chrome cung cấp cũng rất được lòng người sử dụng. Những tiện ích đó hoàn toàn miễn phí, quá trình cài đặt rất nhanh chóng, cách sử dụng rất dễ dàng mang lại rất nhiều tính năng hấp dẫn cho người sử dụng. Tuy nhiên giữa hàng trăm hàng nghìn những tiện ích mà Chrome cung cấp thì đâu là những tiện ích hữu ích nên sử dụng cho việc kiểm thử phần mềm. Trong phần 1 này, tôi sẽ giới thiệu một số các tiện ích hữu ích cho việc kiểm thử giao diện web trên trình duyệt Chrome

I - Một số các tiện ích hữu ích cho việc kiểm thử giao diện web:

1 - Screen Ruler:

Screen Ruler là tiện ích đơn giản của chrome nhưng hiệu quả của nó mang lại thì vô cùng tuyệt vời. Như chính tên gọi của nó, đây là một công cụ để đo các kích thước trên màn hình. Sử dụng Screen Ruler trong khi test, bạn có thể đo chiều dài, chiều rộng, padding của đối tượng bằng cách đơn giản là đặt chúng dựa trên tiêu chí mà mình muốn kiểm tra. Screen Ruler thực sự hữu ích để kiểm tra Web UI, nó giúp ta tìm ra các lỗi không nhìn thấy và đảm bảo ứng dụng web sẽ hoàn hảo trên từng pixel.

2 - Font Extensions:

2.1 - WhatFont:

Việc kiểm tra font chữ và kích thước font được sử dụng cho từng vùng cụ thể trên trang web xem đã đúng với thiết kế hay chưa là một việc mà chúng ta không thể bỏ qua. Tiện ích WhatFont sẽ giúp chúng ta thực hiện điều đó rất đơn giản. Chỉ cần di chuột vào vùng bạn muốn biết font trên một trang web, WhatFont sẽ đưa ra font được sử dụng. Nếu bạn cần thêm thông tin về các service dùng cho web font, WhatFont cũng sẵn sàng đáp ứng.

2.2 - Font Inspector:

Chỉ bằng một vài thao tác đơn giản nhấp chuột và di chuyển chuột lên các phần tử của trang web, Font Inspector sẽ cung cấp các thông tin liên quan đến font chữ như tên font, chiều cao dòng và kích thước rất nhanh chóng

3 - ColorZilla:

ColorZilla là một tiện ích của chrome về chọn màu sắc. Nó cho phép bạn tìm ra chính xác màu sắc đã được sử dụng trên trang web. ColorZilla thực sự rất hữu ích khi bạn cần kiểm tra màu sắc của web có khớp với design hay không.

4 - PerfectPixel

Nếu bạn là một tester mong muốn ứng dụng mình test hoàn hảo đến từng pixel so với design thì tiện ích này chính là dành cho bạn! Bạn có thể đặt bức ảnh trong suốt phủ lên bề mặt trang web sau đó so sánh từng pixel.

5 - IE Tab:

IE tab là một giả lập trình duyệt IE phổ biến nhất. Sử dụng IE Tab, bạn có thể test các trang web với các phiên bản khác nhau của IE mà không cần phải xa trình duyệt Chrome yêu thích của bạn.

6 - Web Developer:

Web developer, cũng có một add-on cùng tên trên Firefox , cung cấp một loạt các tính năng cho web developer trên thanh công cụ. Nó không có đầy đủ tính năng như trên Firefox counterpart nhưng vẫn là một trong các tiện ích hữu dụng nhất của chrome cho kiểm thử. Bạn có thể quản lý bộ nhớ cache của trình duyệt, quản lý cookies, kiểm tra và highlight các thành phần của web, tiêu đề của thuộc tính, các thông tin khác trên trang web, giúp tiết kiệm thời gian trong khi test.

7 - Các tiện ích hỗ trợ việc mô phỏng các loại màn hình với các kích thước khác nhau:

7.1 - Resolution Test

Resolution Test giúp bạn dễ dàng test các ứng dụng web trên các màn hình có độ phân giản và kích thước khác nhau. Bạn có thể chọn từ danh sách các màn hình có độ phân giải phổ biến nhất mà các website hay dùng, hoặc sử dụng kích thước tự tùy biến. Nó tạo ra các kích cỡ màn hình và mô phỏng ứng dụng web trong kích thước màn hình bạn muốn.

7.2 - Window Resizer

Đây là một tiện ích của chrome rất hữu ích trong kiểm thử ứng dụng web. Nó làm mọi thứ cho Chrome giống như những thứ mà Firesizer làm cho Firefox như thay đổi kích thước cửa sổ trình duyệt để mô phỏng các độ phân giải màn hình khác nhau, cho phép bạn kiểm tra layout của website sẽ thay đổi như thế nào trên các kích thước màn hình khác nhau. Bạn có thể chọn từ các độ phân giải màn hình đề xuất hoặc thêm các độ phân giải màn hình mà bạn tự tạo ra (và lưu chúng). Một vài chức năng Window Resizer có mà Resolution Test không có là Window Resizer cho phép bạn thiết lập tùy biến các phím tắt quan trọng và bạn cũng có thể export các thiết lập đó và import vào một máy tính khác để sử dụng.

II - Hướng dẫn cài đặt:

Bước 1: Vào google.com -> đăng nhập vào account google của bạn

Bước 2: Truy cập Chrome Web Store tại địa chỉ : https://chrome.google.com/webstore

Bước 3: Chọn mục apps hoặc extensions, sau đó chọn cái cần tải > bấm add to chrome là xong

Trên đây thực sự là một số công cụ rất hữu ích, hỗ trợ rất nhiều cho chúng ta trong quá trình kiểm thử giao diện của một trang web trên trình duyệt Chrome. Hi vọng bài viết này sẽ giúp ích cho các bạn. Trong bài viết sau, tôi sẽ giới thiệu tiếp một số các tiện ích hữu ích khác nữa của chrome mà các tester cần quan tâm.