Software Testing

Chương 4. Các kỹ thuật thiết kế

kiểm thử

1 Software testing - HVQ

 MỤC TIÊU CHƯƠNG 4

❑ Sinh viên nắm được các kiến thức và kỹ năng:
• Hiểu được kỹ thuật thiết kế kiểm thử cho giao diện (GUI).

• Có thể tự phân tích và thiết kế được các trường hợp kiểm thử (testcase).

• Áp dụng kiến thức đã học này, thực hiện kiểm thử các hệ thống phần mềm
thực tế.

2 Software testing - HVQ

 NỘI DUNG

THIẾT KẾ KIỂM THỬ CHO GIAO DIỆN (GUI)

1. Giao diện người dùng (GUI) là gì?

2. Kiểm thử giao diện người dùng (GUI Testing).

3. Thiết kế test case kiểm thử giao diện người dùng.

3 Software testing - HVQ

 Để hiểu Thiết kế và kiểm thử giao diện(GUI) trước tiên
hãy hiểu:

Giao diện người dùng (GUI) là gì?

4 Software testing - HVQ

 GIAO DIỆN NGƯỜI DÙNG (GUI) LÀ GÌ?
Có hai loại giao diện cho ứng dụng máy tính:

▪ Giao diện dòng lệnh (Command QTest

Line Interface) là nơi chúng ta nhập
văn bản và máy tính phản hồi lại
lệnh đó.

Command Line Interface

5 Software testing - HVQ

 GIAO DIỆN NGƯỜI DÙNG (GUI) LÀ GÌ?
Có hai loại giao diện cho ứng dụng máy tính:
▪ GUI là viết tắt của “Giao Diện Người
Dùng Đồ Họa (Graphical User Interface)”,
nơi chúng ta có thể tương tác với máy
tính bằng hình ảnh đồ họa thay vì văn
bản.
Thí dụ: nếu chúng ta truy cập trang webpage
https://egov.vaa.edu.vn/login.html, những gì
chúng ta thấy trên trang chủ chính là giao diện
đồ họa (GUI) của trang web. Người dùng không
nhìn thấy mã nguồn, giao diện là những gì hiển
thị trước mắt người dùng.
Graphical User Interface
6 Software testing - HVQ
 GIAO DIỆN NGƯỜI DÙNG (GUI) LÀ GÌ?
Sau đây là một số thành phần giao diện người dùng (GUI) có thể
được sử dụng để tương tác giữa người dùng và ứng dụng:

Male Female Radio Button

One Two Check Box

Text Box

List Box/Dropdown List

Login Button

Forgot password Hyper Link . . .

7 Software testing - HVQ

 CÁC THÀNH PHẦN CỦA GUI
Thành phần
Window (Cửa sổ làm việc)
Button (Nút bấm)
Textbox (Hộp văn bản)
Checkbox (Ô đánh dấu)
Radio Button (Nút chọn)
Dropdown List (DS thả xuống)
Label (Nhãn)
Table (Bảng)
8 Software testing - HVQ
Mô tả
Thành phần cơ bản nhất của giao diện đồ họa người dùng, chứa đựng các
thành phần khác của GUI và là nơi để người dùng thấy được và tương tác với
thiết bị.
Các nút mà người dùng có thể nhấp (click) vào để thực hiện một hành động
nào đó, chẳng hạn như gửi biểu mẫu hoặc bắt đầu một quá trình.
Các ô mà người dùng có thể nhập văn bản, chẳng hạn như tên, mật khẩu
hoặc thông tin tìm kiếm.
Các hộp nhỏ mà người dùng có thể nhấp để chọn hoặc bỏ chọn một tùy chọn.
Các vòng tròn nhỏ cho phép người dùng chọn một trong nhiều tùy chọn độc
lập.
Một danh sách các tùy chọn có thể mở rộng mà người dùng có thể chọn.
Văn bản hiển thị để cung cấp thông tin hoặc mô tả cho người dùng về các
thành phần khác trên giao diện.
Các bảng để hiển thị dữ liệu theo hàng và cột.
 CÁC THÀNH PHẦN CỦA GUI
Thành phần
Link (Liên kết)
Image (Hình ảnh)
Menu (Trình đơn)
Toolbar (Thanh công cụ)
Slider (Thanh trượt)
Icon (Biểu tượng)
Progress Bar (Thanh tiến trình)
Tooltip (Chú giải công cụ)
9 Software testing - HVQ
Mô tả
Văn bản hoặc hình ảnh mà người dùng có thể nhấp vào để chuyển đến một
trang khác hoặc thực hiện một hành động.
Các hình ảnh được sử dụng để hiển thị nội dung hoặc làm các phần tử tương
tác như nút hoặc liên kết.
Danh sách các tùy chọn hoặc lệnh mà người dùng có thể chọn.
Một thanh chứa các nút hoặc biểu tượng để thực hiện các chức năng nhanh
chóng.
Một thanh có thể kéo để điều chỉnh giá trị trong một phạm vi, chẳng hạn như
âm lượng hoặc độ sáng.
Các hình ảnh nhỏ đại diện cho chương trình, tệp hoặc chức năng nào đó mà
người dùng có thể nhấp vào để mở hoặc thực hiện.
Một thanh hiển thị tiến độ của một quá trình đang diễn ra, chẳng hạn như tải
xuống hoặc cài đặt.
Thông tin bổ sung hiển thị khi người dùng di chuột qua một thành phần giao
diện …
 Kiểm thử giao diện người dùng
(GUI Testing) là gì?

10 Software testing - HVQ

 KIỂM THỬ GIAO DIỆN NGƯỜI DÙNG (GUI TESTING)
▪ Kiểm thử giao diện người dùng (GUI Testing) là quá trình xác nhận
các thành phần giao diện nêu trên (slide trước)
→ Đã đúng hay chưa ?
▪ Mục đích của kiểm thử giao diện đồ họa (GUI) là đảm bảo các chức
năng của ứng dụng phần mềm hoạt động theo đúng các đặc tả kỹ
thuật, bằng cách kiểm tra các màn hình (window) và các thành phần
điều khiển như: menu, nút bấm (buttons), hộp văn bản (textboxs),
biểu tượng (icons), hình ảnh (images), liên kết (links) v.v.

11 Software testing - HVQ

 KIỂM THỬ GIAO DIỆN NGƯỜI DÙNG (GUI TESTING)
Trong thí dụ này, nếu chúng ta thực
hiện GUI Testing :
▪ Trước tiên chúng ta sẽ kiểm tra xem
các hình ảnh có hiển thị hoàn toàn
trên các trình duyệt khác nhau hay
không.
▪ Các liên kết phải hoạt động và các
nút bấm phải hoạt động khi được
nhấp vào, các text box có khả năng
nhập bình thường không.
▪ Ngoài ra, nếu người dùng thay đổi
kích thước màn hình, các hình ảnh
hoặc nội dung không được bị thu
nhỏ, cắt xén hay chồng chéo lên
nhau.
▪ Đặc biệt, trọng tâm là cấu trúc thiết
kế, các hình ảnh và kiểm tra xem
chúng có hoạt động đúng hay
không.

12 Software testing - HVQ

 NHU CẦU CỦA KIỂM THỬ GIAO DIỆN NGƯỜI DÙNG (GUI TESTING)

Bây giờ, khái niệm cơ bản về kiểm thử giao diện người dùng (GUI
testing) đã rõ ràng. Một vài câu hỏi sẽ xuất hiện trong đầu như:
• Tại sao phải kiểm thử GUI?
• Nó có thực sự cần thiết không?
• Kiểm thử chức năng và logic của ứng dụng đã đủ rồi chăng?
• Vậy tại sao lại phải tốn thời gian vào kiểm thử GUI?

Để có câu trả lời, hãy nghĩ như một người dùng, không phải như
một người kiểm thử.

13 Software testing - HVQ

 NHU CẦU CỦA KIỂM THỬ GIAO DIỆN NGƯỜI DÙNG (GUI TESTING)

• Người dùng không có bất kỳ kiến thức nào về phần mềm/ứng dụng.
Chính giao diện người dùng (GUI) của ứng dụng quyết định xem
người dùng có tiếp tục sử dụng ứng dụng đó hay không.
• Một người dùng bình thường trước tiên sẽ quan sát thiết kế và hình
thức của ứng dụng/phần mềm và xem nó dễ hiểu với họ như thế nào.
• Nếu người dùng không thoải mái với giao diện hoặc thấy ứng dụng
khó hiểu, họ sẽ không bao giờ sử dụng lại ứng dụng đó. Đó là lý do tại
sao, giao diện người dùng (GUI) là một vấn đề cần quan tâm, và việc
kiểm thử đúng cách cần được thực hiện để đảm bảo rằng GUI không
có lỗi.

14 Software testing - HVQ

 Kiểm tra những gì trong kiểm thử giao
diện người dùng (GUI Testing)?

15 Software testing - HVQ

 KIỂM TRA NHỮNG GÌ TRONG KIỂM THỬ GIAO DIỆN NGƯỜI DÙNG (GUI
TESTING)?
Danh sách kiểm tra bên dưới sẽ đảm bảo chi tiết cho kiểm thử giao
diện người dùng (GUI Testing):
1. Kiểm tra tổng thể giao diện:
• Kiểm tra tất cả các thành phần GUI (elements) về kích thước, vị trí,
chiều rộng, chiều dài và khả năng nhập ký tự hoặc số.
• Kiểm tra xem các thông báo lỗi có hiển thị chính xác.
• Kiểm tra xem khoảng cách, ranh giới của các thành phần (elements)
khác nhau trên màn hình có phân biệt rõ rãng.
• Kiểm tra sự căn chỉnh của văn bản có phù hợp.

16 Software testing - HVQ

 KIỂM TRA NHỮNG GÌ TRONG KIỂM THỬ GIAO DIỆN NGƯỜI DÙNG (GUI
TESTING)?
1. Kiểm tra tổng thể giao diện:
• Kiểm tra xem font chữ được sử dụng trong ứng dụng có thể đọc được
không.
• Kiểm tra màu sắc của font chữ, màu nền và các thông báo cảnh báo
có hài hòa không.
• Kiểm tra rằng các hình ảnh (images), biểu tượng (icons) có độ nét, rõ
ràng tốt không, canh chỉnh phù hợp không.
• Kiểm tra xem vị trí của các thành phần GUI khi thay đổi độ phân giải
màn hình khác nhau.

17 Software testing - HVQ

 KIỂM TRA NHỮNG GÌ TRONG KIỂM THỬ GIAO DIỆN NGƯỜI DÙNG (GUI
TESTING)?
2. Kiểm tra tính hợp lệ:
• Kiểm tra xem maxlength của các elements nhập đúng không.
• Kiểm tra có phân biệt chữ hoa hoặc thường, phân biệt chữ 1, 2, 3
byte,… (Thí dụ: trong tiếng nhật phân biệt
全角: cho phép nhập tất cả 1,2,3 byte
半角: chỉ cho phép nhập 1/2 byte)
• Kiểm tra cho phép nhập các ký tự đặc biệt không.
• Kiểm tra rằng các định dạng (format) đã đúng chưa (thí dụ: format
tiền tệ, thập phân, ddMMyyyy, …).
• Kiểm tra thứ tự Tab theo đúng trình tự top-left-bottom-right hay
không, focus vào vị trí đầu tiên element đúng không …
18 Software testing - HVQ
 KIỂM TRA NHỮNG GÌ TRONG KIỂM THỬ GIAO DIỆN NGƯỜI DÙNG (GUI
TESTING)?

Kiểm tra xem có thể thực thi đúng chức

năng, logic dự định của ứng dụng bằng
cách sử dụng các GUI hay không.

19 Software testing - HVQ

 Sử dụng kỹ thuật nào để kiểm thử giao diện người
dùng (GUI Testing)?

→ Sử dụng kỹ thuật Kiểm thử thủ công

(Manual Based Testing)

20 Software testing - HVQ

 KỸ THUẬT KIỂM THỬ THỦ CÔNG (MANUAL BASED TESTING)
Kiểm thử thủ công (Manual Based Testing) còn gọi là kiểm thử dựa
trên hướng dẫn, là một phương pháp trong đó các nhà kiểm thử thực
hiện kiểm tra các tính năng của phần mềm bằng cách thủ công, thay vì
sử dụng các công cụ tự động hoặc kịch bản kiểm thử tự động.
▪ Trong phương pháp này, các nhà kiểm thử sử dụng tài liệu yêu cầu và
các hướng dẫn chi tiết (testcases) để kiểm tra từng tính năng, chức
năng và giao diện người dùng của phần mềm để đảm bảo rằng chúng
hoạt động đúng và đáp ứng được nhu cầu của người dùng.
▪ Phương pháp kiểm thử này thường được sử dụng trong các trường
hợp mà việc sử dụng các công cụ tự động không phù hợp hoặc không
khả thi, hoặc khi yêu cầu một mức độ kiểm tra chi tiết và thủ công
cao.
21 Software testing - HVQ
 KỸ THUẬT KIỂM THỬ THỦ CÔNG (MANUAL BASED TESTING)
Thí dụ: Các nhà phát triển phần mềm dựa trên yêu cầu của người dùng và đã xây
dựng một “Ứng dụng đồ họa Calculator”.

1. Trước khi đến tay người sử dụng, nhà phát triển cần phải kiểm tra về giao diện và
chức năng có hoạt động đúng theo yêu cầu hay không.
2. Được cung cấp tài liệu test với 2 test case (thực tế nhiều testcase hơn) như sau:
ID DESCRIPTION STEPS EXPECTED RESULT
Kiểm tra các thành 1. Vào cửa sổ Start - Ứng dụng được mở ở mode
phần trên giao diện khi 2. Chọn Calculator Standard.
Testcase 1
ứng dụng được khởi - Các elements được hiển thị
tạo (Init) giống với Layout của thiết kế
Kiểm tra cộng 2 số theo 1. Chọn nút (or nhập) - Kết quả bằng 282
Testcase 2 cách thủ công: 1, 5, 9 và + và 1, 2, 3 - Màn hình hiển thị tính toán:
“159 + 123” 2. Chọn nút (or nhập) = 159 + 123 = 282

22 Software testing - HVQ

 KỸ THUẬT KIỂM THỬ THỦ CÔNG (MANUAL BASED TESTING)
Tester thực thi (excute) kiểm thử Testcase 1
Actual Expected

Tester

Open “Ứng dụng đồ họa Calculator”

23 Software testing - HVQ

 KỸ THUẬT KIỂM THỬ THỦ CÔNG (MANUAL BASED TESTING)
Tester thực thi (excute) kiểm thử Testcase 2
Actual Expected

Tester 159 + 123 = 282

Chọn nút:
1, 5, 9
+
1, 2, 3 Chọn
nút =

24 Software testing - HVQ

 Từ thí dụ trên, để thực thi (excute) được test case thì
chúng ta cần phải có Test cases, vậy test cases được
thiết kế dựa vào đâu?

Tài liệu Layout

đặc tả kỹ thuật (mockup, figma)

25 Software testing - HVQ

 Thiết kế testcases cho giao diện người
dùng (GUI) như thế nào?

26 Software testing - HVQ

 THIẾT KẾ TESTCASE CHO GIAO DIỆN NGƯỜI DÙNG (GUI)

Chúng ta chia Layout thành 2 phần

User Interface Function

Bao gồm những thành phần UI Bao gồm những tính năng, logic
(elements): Textboxs, dropdown được yêu cầu: Submit nút Login
list , buttons, Icon, image, hyper đăng nhập hệ thống, liên kết
link, label hiển thị… link màn hình quên mật khẩu,…

Sau đó thiết kế các test cases cho từng phần này

27 Software testing - HVQ
 THIẾT KẾ TESTCASE CHO GIAO DIỆN NGƯỜI DÙNG (GUI)

Thí dụ: Cần thiết kế testcases để kiểm thử cho giao
diện web Add User và yêu cầu đặc tả như sau:
Để thêm một người dùng mới, cần điền đầy đủ thông
tin gồm Name, DOB (ngày sinh), Address.
• Trong đó Name và DOB là bắt buộc nhập. Sẽ cảnh
báo (màu đỏ) và focus khi bỏ qua thông tin này.
• Address nếu vượt quá 500 ký tự thì hiển thị cảnh báo
“Exceed 500 characters”.
• Hiển thị thông báo màu xanh “Successfully added
new user” khi submit thành công, ngược lại khi thất
bại thì hiển thị màu đỏ “Failed to add new user”.
• Không cho phép submit nhiều lần.
28 Software testing - HVQ
 THIẾT KẾ TESTCASE CHO GIAO DIỆN NGƯỜI DÙNG (GUI)
Thiết kế testcases cho giao diện Add User
Add User
screen

UI Function
Đặc tả
Icon Validate
Chức năng
Add User Submit
Giao diện Multiple click
Name
Layout
DOB

Address Lưu ý: Trường hợp nhiều màn hình (screen) thì ta

áp dụng tương tự sơ đồ này cho màn hình 2, 3, …
Submit
29 Software testing - HVQ
 THIẾT KẾ TESTCASE CHO GIAO DIỆN NGƯỜI DÙNG (GUI)
Thiết kế testcases cho UI

ID DESCRIPTION STEPS EXPECTED RESULT

Icon
TC 1 Kiểm tra vị trí - - Phía trên cùng bên trái title “Add User”
Add User
Kiểm tra vị trí, font chữ, tên hiển - Phía trên cùng và giữ màn hình
TC 2 -
thị - Font chữ màu Blue, đậm, tên “Add User”
Name
- Phía dưới title “Add User” và giữ màn hình
Kiểm tra vị trí, font chữ, khả năng
TC 3 - - Font chữ màu đen, thường , cho phép
nhập, tên hiển thị
nhập vào, tên “Name (*)”

30 Software testing - HVQ

 THIẾT KẾ TESTCASE CHO GIAO DIỆN NGƯỜI DÙNG (GUI)
Thiết kế testcases cho UI

ID DESCRIPTION STEPS EXPECTED RESULT

DOB
- Phía dưới “Name” và giữ màn hình
Kiểm tra vị trí, font chữ, khả năng
TC 4 - - Font chữ màu đen, thường , cho phép
nhập, tên hiển thị
nhập vào, tên “DOB (*)”
Address
- Phía dưới “DOB” và giữ màn hình
Kiểm tra vị trí, font chữ, khả năng
TC 5 - - Font chữ màu đen, thường , cho phép
nhập, tên hiển thị
nhập nhiều dòng vào, tên “Address”
Submit
- Phía dưới cùng và giữ màn hình, text canh
Kiểm tra vị trí, font chữ, màu nền, giữa
TC 6 -
khả năng nhập, tên hiển thị - Font chữ màu trắng, thường, màu nền
green, cho phép click vào, tên “Submit”
31 Software testing - HVQ
 THIẾT KẾ TESTCASE CHO GIAO DIỆN NGƯỜI DÙNG (GUI)
Thiết kế testcases cho Function

ID DESCRIPTION STEPS EXPECTED RESULT

Validate
- Cảnh báo (màu đỏ) bắt buộc nhập cho
1. Name: không nhập
TC 7 Kiểm tra bắt buộc nhập Name element Name
2. Click nút Submit
- Element Name được focus
- Cảnh báo (màu đỏ) bắt buộc nhập cho
1. DOB: không nhập
TC 8 Kiểm tra bắt buộc nhập DOB element DOB
2. Click nút Submit
- Element DOB được focus
1. Address: nhập 10 dòng,
Kiểm tra nhập vượt quá số ký tự - Hiển thị cảnh báo “Exceed 500 characters”
TC 9 mỗi dòng có 51 ký tự
Address - Element Address được focus
2. Click nút Submit

32 Software testing - HVQ

 THIẾT KẾ TESTCASE CHO GIAO DIỆN NGƯỜI DÙNG (GUI)
Thiết kế testcases cho Function
ID DESCRIPTION STEPS EXPECTED RESULT
Submit
- Submit form thành công
1. Nhập dữ liệu valid cho
- Một bản ghi (record) được tạo
TC 10 Kiểm tra submit thành công Name, DOB, Address
- Hiển thị thông báo màu xanh “Successfully
2. Click nút Submit
added new user”
- Submit form không thành công
1. Nhập dữ liệu invalid cho
- Không có bản ghi (record) nào được tạo
TC 11 Kiểm tra submit không thành công Name, DOB, Address
- Hiển thị thông báo màu đỏ “Failed to add
2. Click nút Submit
new user”.
Multiple click
1. Nhập dữ liệu valid cho
- Chỉ cho phép click nút Submit một lần cho
Name, DOB, Address
TC 12 Kiểm tra click submit nhiều lần đến khi response form trả về thành công
2. Click nhiều lần nút
- Click 2, 3 … không tác dụng.
Submit
33 Software testing - HVQ
 BÀI TẬP
Bài tập: Chức năng góp ý trên ứng dụng web được thiết kế
như sau:
Để gởi thông tin góp ý, người dùng cần điền đầy đủ thông
tin Họ và tên, địa chỉ email, số điện thoại, nội dung cần góp
ý.
• Trong đó email, điện thoại, góp ý là bắt buộc, thông báo
lỗi sẻ hiển thị “{element} là bắt buộc nhập” khi bỏ qua
những thông tin này.
• Nội dung góp ý phải trên 10 ký tự và có thể được viết
trên nhiều dòng, thông báo “Nhập tối thiểu 10 ký tự” khi
nhập ít hơn 10 ký tự.
• Thông báo “Gởi góp ý thành công” sẽ được hiển thị sau
khi thông tin gởi thành công vào Email công ty.
• Thông báo “Không gởi thành công” kèm theo nội dung
lỗi sẽ được hiển thị nếu thông tin gởi không thành công.
Hãy thiết kế các testcase để kiểm tra cho GUI.

34 Software testing - HVQ

 TỔNG KẾT CHƯƠNG 4

❑ Giao diện người dùng (GUI) là gì?

❑ Kiểm thử giao diện người dùng (GUI Testing).

❑ Thiết kế test case kiểm thử giao diện người dùng.

35 Software testing - HVQ

 Thank you

36 Software testing - HVQ