Lượt đọc: 172
Việc kiểm tra giao diện web là rất quan trọng để đảm bảo rằng trang web hoạt động tốt và đáp ứng nhu cầu của người dùng. Bằng cách thực hiện checklist test giao diện web như dưới đây, bạn có thể giúp trang web của mình đạt được chất lượng cao và mang lại trải nghiệm tốt nhất cho người dùng.
NỘI DUNG CHÍNH
Checklist Test Giao Diện Web:
1/ Textbox – name, address, title
Checklist test textbox dạng name, address, title:
- Để trống hoặc nhập space
- Nhập kí tự thường: abcdefghijklmnopqrstuvwxyz
- Nhập kí tự in hoa: ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Nhập kí tự số: 0123456789
- Nhập kí tự đặc biệt: !”#$%&'()-^\@[;:],./\=~|`{+*}<>?_
- Nhập kí tự 2 bytes: ａｂｃｄ０１２３
- Nhập số kí tự < min length
- Nhập số kí tự > max length
- Nhập số kí tự >= min length và <= max length
- Nhập mã code html, script
2/ Textbox – password
Checklist test textbox dạng password:
- Để trống hoặc nhập space
- Nhập số kí tự < min length (8)
- Nhập số kí tự > max length (20)
- Nhấn icon ẩn/ hiện password
- Nhập đúng format password: bao gồm ít nhất 1 chữ hoa, 1 chữ thường, 1 chữ số, 1 kí tự đặc biệt
- Nhập sai format password: thiếu 1 chữ hoa / 1 chữ thường / 1 chữ số / 1 kí tự đặc biệt
- Nhập password không match với username
- Nhập password gần giống với username
- Nhập password match với user
- Nhập password cũ
- Nhập password mới đổi
3/ Textbox – phone
Checklist test textbox dạng phone:
- Để trống hoặc nhập space
- Nhập kí tự số
- Nhập kí tự không phải số
- Nhập số kí tự < min length (thường là 10 số)
- Nhập số kí tự > max length (thường là 12 số)
- Nhập số 0 ở đầu
- Nhập mã số điện thoại quốc gia (ví dụ: +84)
4/ Textbox – email
Checklist test textbox dạng email:
- Để trống hoặc nhập space
- Nhập đúng format email, bao gồm 4 phần:
– Tên người nhận: có thể dài tối đa 64 kí tự, kí tự a-z, A-z, số 0-9, kí tự đặc biệt !#$%&’*+-/=?^_`{|.
– Kí tự @: tách tên người nhận vào tên miền.
– Tên miền: có thể dài tối đa 253 kí tự, kí tự a-z, A-z, số 0-9, dấu gạch nối (-) và dấu chấm (.)
– Tên miền cấp cao nhất: được đặt sau tên miền phổ biến nhất là .com, .net, .org. - Ví dụ một số kiểu đúng định dạng email:
simple@example.com
very.common@example.com
disposable.style.email.with+symbol@example.com
other.email-with-hyphen@and.subdomains.example.com
“”test..user””@example.org
fully-qualified-domain@example.com
user%””!example.com@example.org - Nhập sai format email, không đủ 1 trong 4 phần hoặc nhập kí tự không cho phép
- Ví dụ một số kiểu sai định dạng email:
Abc.example.com (thiếu @)
A@b@c@example.com (chứa nhiều @)
a””b(c)d,e:f;g<h>i[j\k]l@example.com
just””not””right@example.com
this is””not\allowed@example.com
underscore@its_not_allowed.example.com (chứa _ tại domain)
1234567890123456789012345678901234567890123456789012345678901234+x@example.com (tên người nhận >64 kí tự)
QA[icon]CHOCOLATE[icon]@test.com (chứa icon) - Nhập email đã tồn tại (trường hợp đăng ký)
- Nhập email đã bị khóa (trường hợp bị block)
- Nhập email có tên miền không cho phép
5/ Textbox – url
Checklist test textbox dạng url:
- Để trống hoặc nhập space
- Nhập link không có http, https, www
- Nhập link có http, https, www
- Nhập link đúng format: {protocol}{domain}{path}
kí tự được chấp nhận: -_.~!*'();:@&=+$,/?%#[]?@ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 - Nhập link sai format: {protocol}{domain}{path}
có chứa kí tự không được chấp nhận, ví dụ:
http://www.example.com/and\here.html (chứa \)
http:www.example.com/main.html (thiếu // sau http)
http:www.example.html (sai domain) - Nhập số kí tự < min length Nhập số kí tự > max length
- Kiểm tra nếu textbox có thể nhập url đã được mã hóa
6/ Textbox – zipcode
Checklist test textbox dạng zipcode:
- Giới hạn 7 hoặc 8 kí tự
- Cho phép hoặc không cho phép nhập dấu –
- Kiểm tra khi nhập mã zipcode tồn tại (data so sánh từ DB hoặc API)
- Kiểm tra nhập mã zipcode không tồn tại (data so sánh từ DB hoặc API)
7/ Textbox – creditcard number
Checklist test textbox dạng creditcard number:
- Giới hạn 16~25 số (tùy theo loại credit card)
- Chỉ được phép nhập số
- Kiểm tra khi nhập số creditcard tồn tại
- Kiểm tra khi nhập số creditcard không tồn tại
- Kiểm tra khi nhập số creditcard đã hết hạn
- Kiểm tra khi nhập số creditcard không match với các thông tin khác như credit account name, digit code, thời hạn thẻ
8/ Textbox – digit code
Checklist test textbox dạng digit code:
- Giới hạn 3-4 số (tùy theo loại credit card)
- Chỉ được phép nhập số
- Kiểm tra khi nhập số digit code không match với các thông tin khác như credit account name, creditcard number, thời hạn thẻ
9/ HyberLink
Checklist test hyberLink:
- Nhấn vào sẽ mở ở tab mới hay là ở tab hiện tại
- Nhấn vào mở đúng trang đã setting
- Khi mở link không tồn tại thì redirect tới trang 404
- Có hiệu ứng khi hover vào link
10/ Combolist
Checklist test combolist:
- Click vào thì hiển thị list item
- Kiểm tra list item có đủ dữ liệu chưa (load lên từ DB / default list)
- Kiểm tra thứ tự hiển thị list item
- Có thể nhập thêm giá trị vào combolist
- Có thể chọn option all hay không (thường để giá trị là blank hoặc all)
- Có thể nhập thêm giá trị đã tồn tại vào combolist hay không
- Có thể search các item trên combolist
11/ Dropdownlist
Checklist test dropdownlist:
- Click vào thì hiển thị list item
- Kiểm tra list item có đủ dữ liệu chưa (load lên từ DB / default list)
- Kiểm tra thứ tự hiển thị list item
- Có thể nhập thêm giá trị vào combolist
- Có thể chọn option all hay không (thường để giá trị là blank hoặc all)
- Có thể nhập thêm giá trị đã tồn tại vào combolist hay không
- Có thể search các item trên combolist
12/ Checkbox
Checklist test checkbox:
- Checkbox có thể check / uncheck khi click chuột hoặc nhấn phím space
- Có thể chuyển giữa các checkbox bằng phím tab
- Khi không check
- Khi check 1
- Khi check all
- Có thể check được nhiều option cùng field
13/ Radio
Checklist test radio:
- Radio có thể check / uncheck khi click chuột hoặc nhấn phím space
- Có thể chuyển giữa các radio bằng phím tab
- Khi không check
- Chỉ có thể check được 1 option
14/ Upload image, video
Checklist test upload image, video:
- Không upload image, video và nhấn submit
- Upload image có format được chấp nhận: png, jpg, jpeg, gif,… (tùy theo spec)
- Upload image có format không được chấp nhận: webp, bitmap,… (tùy theo spec)
- Upload video có format được chấp nhận: mp4, mov, wmv,… (tùy theo spec)
- Upload video có format không được chấp nhận: avi, flv,… (tùy theo spec)
- Upload file > max size cho phép
- Upload file < min length cho phép
- Upload file > max length cho phép
- Upload hình, video có kích thước ảnh cao, 4k ,8k
- Kiểm tra chức năng drag & drop image, video
- Khi upload thành công thì hiện message thông báo thành công
- Khi upload không thành công thì hiện message thông báo thất bại
- Khi upload file thì hiện loading progress hoặc % cho người dùng
- Khi đang upload có thể cancel hay không
- Kiểm tra reload page khi đang upload thì cancel hay upload file chế độ ngầm
- Có cho phép upload nhiều file 1 lần hay không
- Kiểm tra nơi lưu file đã upload
- Hiện tên, dung lượng, kích thước file sau khi đã upload thành công
- Check security khi upload, không cho phép upload file chứa mã độc, file cần được quét virus.
15/ Table list (Web, Windows)
Checklist test danh sách, table list (Web, Windows):
- Kiểm tra list data hiển thị so với database
- Kiểm tra list data sau khi thêm item
- Kiểm tra list data sau khi sửa item
- Kiểm tra list data sau khi xóa item
- Kiểm tra thứ tự hiển thị item trên list
- Kiểm tra page navi
- Switch Item/page: 10,20,50
- Click < << số page > >>
- Nhập số page không tồn tại
- Kiểm tra khi có nhiều dữ liệu: ~ 1000 item
- Focus trên table và nhấn từ phím:
– Tab: có thể chuyển qua lại các field
– PgUp, PgDn: có thể chuyển lên đầu, xuống cuối list item
– Delete: Nhấn delete thì có thể xóa item hay không
– Enter: Xác nhận nhập và chuyển sang field kế tiếp”
16/ Scroll list (Mobile)
Checklist test scroll list (Mobile):
- Kiểm tra list data hiển thị so với database
- Kiểm tra list data sau khi thêm item
- Kiểm tra list data sau khi sửa item
- Kiểm tra list data sau khi xóa item
- Kiểm tra thứ tự hiển thị item trên list
- Kiểm tra khi có nhiều dữ liệu: ~ 1000 item
- Khi scroll thì load thêm item
- Kiểm tra khi scroll nhanh list thì có bị crash app
- Tap liên tục vào các item trên list
- Tap nhiều item trên list cùng lúc
- Pull down thì reload lại list
- Kiểm tra khi swipe thì có hiện button để delete item hay không
17/ Calendar
Checklist test calendar:
- Để trống hoặc nhập space
- Nhập calendar theo format YYYY/MM/DD
- Giới hạn 10 kí tự
- Kí tự cho phép: 0-9, /, –
- Giới hạn chỉ nhập 1900~2099 ở phần năm (tùy theo yêu cầu)
- Giới hạn chỉ nhập 01~12 ở phần tháng MM
- Giới hạn chỉ nhập 01~31 ở phần ngày DD
- Khi nhập tháng thì giới hạn ngày nhập trong tháng đó
- Giới hạn thời gian nhập start ~ end
- Start time phải nhỏ hơn end time
- Trường hợp là ngày sinh thì chỉ cho phép nhập < thời gian hiện tại
18/ Button, submit
Checklist test button, submit:
- Kiểm tra button ở trạng thái active hay inactive (màn hình ở mode view, edit)
- Không được phép nhấn submit nhiều lần liên tiếp
- Hiển thị loading trong quá trình xử lý, không nhấn được các thành phần khác trên page
19/ Captcha
Checklist test captcha:
- Không nhập captcha và submit thì hiện message báo lỗi
- Nhập captcha không khớp như trong hình và submit thì hiện message báo lỗi
- Nhập captcha khớp như trong hình (nhập chữ hoặc kéo thả) thì có thể submit thành công
- Reload page thì hiện captcha mới
- Nhấn button reload captcha thì hiện captcha mới
- Captcha có thể hoạt động khi có adblocker
- Thời gian để hiện captcha là 1~2s
- Captcha không gây khó nhìn cho người dùng
20/ Textarea
Checklist test textarea:
- Tương tự checklist test textbox dạng name, address, title
- Kiểm tra khi nhấn enter để xuống dòng
- Kiểm tra số lượng dòng mặc định hiển thị
- Kiểm tra số lượng dòng tối đa
- Có thể kéo thả để thay đổi kích thước textarea
21/ Tooltip
Checklist test tooltip:
- Hover hoặc click vào icon tooltip để hiện nội dung tooltip
- Kiểm tra nội dung tooltip đã theo mô tả hay chưa
- Nội dung tooltip cần hiện rõ ràng, không bị che mất bởi các thành phần khác
- Hover hoặc click lần nữa để ẩn tooltip
22/ Toggle
Checklist test toggle:
Kiểm tra default của toggle là ON hay OFF
Khi nhấn vào có thể đổi trạng thái ON <=> OFF
Toggle hoạt động được khi trên màn hình cũng có nhiều toggle khác
Hiển thị đúng màu săc của toggle ON (xanh), OFF (đỏ)
Nhấn liên tục cũng không xảy ra lỗi khi thay đổi trạng thái
23/ View image, video, pdf
Checklist test hiển thị image, video, file pdf:
- Hiển thị ở dạng popup hoặc mở ở tab mới
- Hiển thị đúng tỉ lệ width x height, không bị stretch, vỡ hình / video
- Video view có thể thao tác player bình thường: pause, stop, next. prev, zoom,…
Lời Kết
Checklist test giao diện web được cung cấp trong bài viết này do mình đúc kết được trong quá trình làm việc nhưng chỉ mang tính chất tham khảo. Bạn có thể tùy chỉnh lại checklist cho phù hợp với yêu cầu từng dự án đưa ra, từ đó chuyển thành list test case một cách chính xác, nhanh chóng hơn.
Hy vọng bài viết này đã cung cấp cho bạn những thông tin hữu ích về kiểm tra giao diện web. Nếu bạn có góp ý hãy để lại bình luận bên dưới nhé. Cảm ơn vì đã theo dõi.
