Để website đạt được chất lượng cao như đã đề ra, bạn luôn cần chú ý ở khâu kiểm tra. Nếu bạn là người thiết kế thì cũng cần tự mình đối chiếu các tiêu chuẩn thiết kế giao diện website với giao diện thực tế. Bởi trong quá trình thiết kế luôn có những sai sót. Âu đó cũng là điều bình thường. Còn bạn là một tester thì đây là công việc của bạn rồi. Bạn có thể bám vào các bản yêu cầu của website, giao diện website đã được thống nhất, các tiêu chuẩn để tạo ra các checklist. Dựa trên checklist là cách để kiểm soát chất lượng website một cách tốt nhất. 

Để wesite có chất lượng cao thì người thiết kế, người test luôn phải tự đặt ra các tiêu chuẩn cao cho mình, cho sản phẩm của mình. Những người có tư duy như vậy sẽ trở thành những nhân viên giỏi, quản lý xuất sắc và tất yêu sẽ thành công.

Dưới đây là những công việc cụ thể cần thực hiện khi kiểm tra giao diện website.
Theo quy trình thiết kế website chuyên nghiệp thì một dự án thiết kế web sẽ có một đội thiết kế giao diện (desgin), từ file desgin psd một đội khác sẽ cắt sang HTML. File giao diện đó sẽ được chuyển sang cho đội test để test CSS. Vậy để kiểm tra giao diện cho Website thì làm như thế nào? Chúng ta sẽ lấy file design làm chuẩn cho việc test CSS.

Khi kiểm tra giao diện website, các bạn cần quan tâm đến một số điểm sau:

1. Kiểm tra tổng thể giao diện

 
ID Checklist Description Expected Output
1 Môi trường kiểm thử đã được “Clear”? Môi trường kiểm thử đã sẵn sàng
2 Kiểm tra tổng thể giao diện màn hình? 1. Các label, textbox, combo có độ dài, rộng và khoảng cách bằng nhau, không xô lệch
2. Các label sử dụng cùng 1 loại font, cỡ chữ, căn lề trái
3. Các trường hợp bắt buộc nhập phải có dấu (*)
4. Kiểm tra tất cả lỗi về chính tả, cấu trúc câu, ngữ pháp trên màn hình
5. Form được bố trí hợp lý và dễ sử dụng
3 Kiểm tra biểu tượng của trỏ chuột khi click vào button hoặc vào link Con trỏ chuột có xuất hiện hình bàn tay khi di đến button hoặc link không?
4 Kiểm tra trường text Với các trường nhập Text thì đã test các trường hợp sau chưa: Blank, Max Length, Validad, unvalidad, ký tự đặc biệt, số âm
5 Kiểm tra khi click vào các link Truy cập đến màn hình tương ứng với 1 mục được chọn
6 Kiểm tra màn hình ở trạng thái mặc định? Màn hình chức năng được mở:
– Hiển thị title của chức năng trên màn hình
– Focus được set vào trường đầu tiên có thể edit
– Hiển thị đầy đủ các trường như trong tài liệu thiết kế
– Hiển thị các giá trị mặc định của các trường đúng.
7 Kiểm tra thứ tự di chuyển trỏ trên màn hình khi nhấn phím Tab? Con trỏ di chuyển lần lượt theo thứ tự: Từ trái qua phải, từ trên xuống dưới
8 Kiểm tra thứ tự con trỏ di chuyển ngược lại trên màn hình khi nhấn Shift-Tab? Con trỏ di chuyển ngược lại theo thứ tự: từ dưới lên trên, từ phải qua trái
9 Kiểm tra thực hiện chức năng chính của màn hình khi nhấn Enter? 1. Nếu chuột ko focus vào button nào thì Thực hiện chức năng của button chính
2. Nếu đang focus vào 1 button thì sẽ thực hiện chức năng của button
10 Kiểm tra trường hợp Refresh màn hình (Nhấn F5)? 1. Refesh lại màn hình
2. Sau khi refresh, các chức năng vẫn thực hiện đúng
11 Có xuất hiện thành cuộn dọc, và thanh cuộn ngang? Chỉ xuất hiện khi cần thiết
12 Khả năng di chuyển giữa các mục khác nhau trên form? Có thể sử dụng phím tab để di chuyển giữa các mục trên form
13 Kiểm tra phân trang – Đánh số thứ tự tăng dần và liên tục
– Không hiển thị link [Trước] khi ở trang 1
– Không hiển thị link [Sau] khi ở trang cuối
– Chuyển về trang đầu, trang cuối, trước, sau hoặc 1 trang bất kỳ
14 Thanh điều hướng hiển thị nhất quán trên màn hình? Thiết kế thanh điều hướng trên các màn hình
15 Các trang có rõ ràng và không bị cắt mất phần văn bản không? Các phần phải hiển thị rõ ràng: Khi văn bản quá dài thì có thể sử dụng phân trang nhưng không cắt phần văn bản trong cùng một trang
16 Các trang web được hiển thị tốt trên nhiều trình duyệt và nhiều độ phân giải khác nhau không? Kiểm tra giao diện các trang phải hiển thị tốt trên các môi trường yêu cầu
17 Màu sắc của những siêu liên kết (hyperlink) có đúng chuẩn? Đúng với thiết kế
18 Màu nền chung của toàn bộ màn hình có được set đúng theo yêu cầu không? Đúng với thiết kế
19 Kiểm tra màu chữ, font, font size của tất cả các textbox có set đúng theo yêu cầu không? Hiển thị đúng với yêu cầu
20 Kiểm tra màu chữ, font, font size của tất cả các textbox có set đúng theo yêu cầu không? Kiểm tra màu chữ, font, font size của tất cả các label đúng theo yêu cầu
21 Kiểm tra màu nền Kiểm tra background (màu nền) của tất cả các label có set đúng theo yêu cầu không?
22 Kiểm tra màu chữ và màu nền các textbox Kiểm tra màu chữ và màu nền của các textbox trong chế độ read-only có được set đúng theo yêu cầu hay không?
23 Những đường link có sử dụng màu sắc tiêu chuẩn không? Đúng với thiết kế
24 Tất cả các nội dung có cùng font chữ không? Đúng với thiết kế
25 Tất cả các văn bản có thẳng hàng không? Đúng với thiết kế
26 Kiểm tra các control trên màn hình Tất cả các control trên màn hình  được căn đều  (Label, textbox, checkbox, list , …)
27 Kiểm tra xem các web/cửa sổ có thể truy cập trực tiếp từ menu không? Tất cả các trang web/cửa sổ đều có thể truy cập từ menu.
28 Kiểm tra Số bản ghi trên 1 trang Hiển thị đúng số bản ghi được thiết lập hiển thị trên 1 trang
29 Kiểm tra title của trang Cần hiển thị title đúng và hợp lý trên các trang khách nhau
30 Kiểm tra Style của paging Thống nhất 1 Style hiển thị chung
 

2. Checklist kiểm tra giao diện Home và các thông tin người sử dụng

 
No Test case Expected result
1 Kiểm tra thông tin header – Image, slogan, favicon của công ty hiển thị đúng, rõ ràng, đồng nhất trên các màn hình khác nhau
– Kích thước hợp lý, không quá to, không quá nhỏ, không bị vỡ trên các trình duyệt khác nhau
2 Kiểm tra thông tin User Thông tin hiển thị bao gồm image, tên user và link để xem user profile, log out, Expiry date (times left)”
3 Chuyển trạng thái ngôn ngữ Kiểm tra chính tả, kiểm tra có thể chuyển đổi giữa hai ngôn ngữ tiếng Anh và tiếng Nhật
4 Kiểm tra thông tin hiển thị trong mục footer Hiển thị thông tin tên công ty, địa chỉ, số điện thoại liên lạc, đồng nhất trên các trang khác nhau
5 Kiểm tra màn hình trang Home page 1. Phải gồm đủ các link
2. Kiểm tra các image đi kèm đã đúng thiết kế chưa?
3. Kiểm tra các style đã đúng và hợp lý chưa?
6 Kiểm tra banner Kiểm tra banner đúng thiết kế, đặt đúng vị trí
7 Kiểm tra menu phải của Front End Screen – Phải có đủ các menu và sub-menu
– Kế thừa trên các trang Front end khác
8 Kiểm tra menu phải của Back End Screen – Có menu và sub-menu đầy đủ
– Kế thừa trên các trang Back end khác
9 Kiểm tra các trường hợp đăng nhập thành công 1. Trên form Login, người dùng nhập đúng thông tin Email và Password
2. Click button “Sign in”
=> Hệ thống hiển thị màn hình Home page
10 Kiểm tra các trường hợp đăng nhập thành công khi nhập sai Username, password 1. Trên màn hình Login, người dùng nhập: Sai định dạng Email hoặc thông tin Email, Password không đúng
2. Click button “Sign in”
=> Hệ thống đưa ra cảnh báo tương ứng
11 Kiểm tra các trường hợp đăng nhập thành công khi Subscriber Package hết hạn 1. Trên màn hình Login, người dùng nhập thông tin Username, Password
2. Click button “Sign in”
=> Hệ thống đưa ra cảnh báo tương ứng
12 View Profile 1. Trên màn hình Home page
2. Người dùng click vào hình ảnh Avata hoặc tên user
=> Hệ thống sẽ hiển thị thông tin chi tiết của user đó
13 Edit profile 1. Người dùng click vào mục “Edit profile” trên menu phải
2. Trên form edit người dùng cập nhật thông tin: Title, First name, Last name, Address, Date of Birth
14 Change password 1. Người dùng click vào mục “Change password” trên menu phải
2. Trên form change password người dùng cập nhật thông tin: Pass word cũ, password mới cần thay đổi


Các khâu trong quá trình kiểm tra giao diện website khá nhiều công đoạn, nhưng việc đưa web mang thương hiệu của bạn đến với người dùng không thể “cẩu thả” được, hãy kiểm tra lại thật kĩ để hạn chế lỗi phát sinh thấp nhất.

Tất Thành luôn tự hào là một trong số ít những đơn vị cung cấp dịch vụ thiết kế giao diện website chất lượng, được trải qua quá trình kiểm tra nghiêm ngặt với đội ngũ giàu kinh nghiệm. 

Liên hệ ngay tới hotline: 0963239222 để Tất Thành có thể hỗ trợ bạn nhanh nhất!  

 

Xem thêm các bài viết cùng chủ đề: