Fresher Tester

Web UI thường gặp

★ Bài viết này tập hợp một số UI thường gặp trên Web mà Fresher Tester cần nắm vững. Các nhóm thành phần (element) sẽ được gom thành 4 nhóm:

1. Element để nhập thông tin

Các element cơ bản trong phần này bao gồm: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field.

Checkbox

Checkbox cho phép chọn một, nhiều, hoặc tất cả lựa chọn từ UI. Thường thì các checkbox sẽ được trình bày theo cột dọc. Nếu quá nhiều lựa chọn, thì có thể chấp nhận dạng nhiều cột hoặc là sử dụng thanh cuộn (scroll).

Radio button

Khác với checkbox, radio button chỉ cho phép chọn MỘT lựa chọn cùng lúc trên UI. Thường thì các radio button sẽ được trình bày theo cột dọc. Nếu quá 5 lựa chọn, thì thường sẽ sử dụng dropdown list thay thế.

Dropdown list

Chỉ được phép chọn MỘT giá trị (value) trong danh sách các giá trị cho trước.

Còn gọi là combobox, danh sách thả xuống cho phép bạn chọn một giá trị tại một thời điểm, tương tự như radio button, nhưng gọn hơn giúp tiết kiệm không gian.

Một dạng tương tự nữa là autocomplete, nó cho phép bạn thay vì click vào icon để hiển thị danh sách thì bạn có thể nhập trực tiếp giá trị cần tìm vào đó.

List box

Listbox tương tự như checkbox nhưng cho phép bạn chọn nhiều mục cùng một lúc. Listbox sử dụng không gian nhỏ gọn hơn nhờ scroll (thanh cuộn). Để chọn một giá trị, click vào nó. Để chọn nhiều giá trị nằm gần nhau, click vào giá trị đầu tiên, đè giữ phím shift và click chọn giá trị sau cùng. Muốn chọn nhiều giá trị nằm xa nhau, đè giữ phím control và click chọn từng giá trị.

Button

Button (nút) sẽ thực hiện một hành động nào đó khi bạn click vào nó. Thường button chỉ có tên (nhãn – label hoặc text) giúp người dùng biết button đó để làm gì, có khi nó sẽ có kèm icon (biểu tượng) và text hoặc chỉ có icon.

Toggle

Toggle thường dùng để gom các lựa chọn có liên quan đến nhau lại thành một cụm, tiện cho việc sử dụng.

Toggle (nút chuyển đổi) cho phép người dùng thay đổi cài đặt giữa hai trạng thái, bật-tắt, chọn-không chọn, tắt-mở (thiết lập nào đó). Chúng hiệu quả nhất khi các trạng thái bật / tắt khác nhau về mặt trực quan.

Text field

Text field cho phép người dùng nhập text (văn bản). Có thể cho phép một dòng hoặc nhiều dòng tuỳ theo lập trình.

Khi kiểm thử, chú ý thử số lượng lượng ký tự ít nhất, nhiều nhất, và các loại ký tự có thể nhập được. Đừng quên thử copy & paste (ctrl+V).

Date time field – Date picker

Datetime picker cho phép bạn chọn ngày giờ (hoặc cả ngày giờ) giúp tăng sự nhất quán về định dạng thông tin được nhập vào hệ thống. Nó cũng cho phép bạn tự nhập trực tiếp vào ô nhập (textbox field).

Date picker, time picker, hoặc datetime picker (bộ chọn ngày hoặc bộ chọn thời gian) cho phép chọn một giá trị duy nhất từ một tập hợp được xác định trước.

Transfer list

Transfer list (danh sách chuyển hoặc shuttle) cho phép người dùng di chuyển một hoặc nhiều mục danh sách giữa các danh sách. Thường 2 danh sách để bên trái và phải, hoặc trên và dưới. Bạn có thể chọn và di chuyển tất cả hoặc vài giá trị trong danh sách.

~~~

Sẽ cập nhật tiếp

2. Element giúp điều hướng

3. Element hiển thị thông tin

4. Element khác

Happy testing!

Leave a Reply

Your email address will not be published.