Tổng hợp checklist test giao diện web (năm 2023)

Visits: 265

5/5 - (2 bình chọn)

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.

Checklist Test Giao Diện Web:

1/ Textbox – name, address, title

Checklist test textbox dạng name, address, title:

checklist test (textbox-mail-address)
  • Để 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: abcd0123
  • 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:

textbox-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:

textbox-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:

textbox-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:

textbox-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:

textbox-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:

textbox-creditcardnumber
  • 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:

textbox-digitcode
  • 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:

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:

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
  • 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
  • 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:

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):

tablelist
  • 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:

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.

mua-2-tang-1-banner1

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

RSS
Follow by Email
LinkedIn
Share
Instagram
Scroll to Top
Scroll to Top