Kỹ thuật Kiểm thử thiết kế giao diện người dùng

Một phần của tài liệu (LUẬN văn THẠC sĩ) kỹ thuật kiểm thử các ứng dụng web luận văn ths công nghệ thông tin 60 48 05 (Trang 47 - 63)

CHƯƠNG 3: TRÌNH BÀY CÁC KIỂU KIỂM THỬ TRONG KIỂM THỬ ỨNG DỤNG WEB VÀ CÁCH ỨNG DỤNG

3.1. Kỹ thuật Kiểm thử giao diện người dùng

3.1.1. Kỹ thuật Kiểm thử thiết kế giao diện người dùng

Kỹ thuật kiểm thử thiết kế giao diện người dùng đánh giá mức độ một thiết kế quan tâm đến người dùng, bởi cung cấp hướng dẫn rõ ràng, phân phát thông tin phản hồi, và duy trì tính nhất quán của ngôn ngữ và phương pháp. Vấn đề về tính dễ sử dụng(ease of use) và nhìn cảm nhận (look and feel) đƣợc xem xét cẩn trọng trong kiểm thử thiết kế giao diện người dùng. Các vấn đề liên quan đến duyệt giao diện, khả năng phù hợp của các mặt thiết kế, tìm kiếm các vùng thiết kế lỗi, các nút lệnh, khả năng sử dụng, khả năng truy cập đƣợc khẳng định trong kiểm thử thiết kế giao diện.Hai câu hỏi chính để hiểu rõ của phần mềm cần được kiểm thử trước khi bắt đầu kiểm thử giao diện người dùng.

Ai là người dùng chính của ứng dụng?

Phương pháp thiết kế nào đã được sử dụng?

Bước 1 (Xem xét yêu cầu của người dùng):Nhân viên kiểm thử đại diện cho người dùng cần phải biết rõ yêu cầu của người dùng. Nhân viên kiểm thử cần có những thông tin sau đây để cho việc kiểm thử đạt chất lƣợng:

Mô tả sơ lược về người dùng

Kinh nghiệm về máy tính

Kinh nghiệm về Web

Hiểu biết về lĩnh vực

Kinh nghiệm về ứng dụng cụ thể

Bảng 3.1 cung cấp cách phân loại bốn thuộc tính của kinh nghiệm người dùng.

Thiết kế giao diện người dùng nên được đánh giá mức độ mà các đặc tính của phần mềm cần được kiểm thử phù hợp với kinh nghiệm và kỹ năng của người dùng.

TIEU LUAN MOI download : skknchat@gmail.com

(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội Học viên: Nguyễn Thị Ngọc Hương

Bảng 3.1 Đánh giá kinh nghiệm người dùng[8]

MỨC ĐỘ KINH NGHIÊM Không có=0

Thấp =1 Trung bình =2 Cao =3

THUỘC TÍNH KINH NGHIỆM TỐI THIỂU Kinh nghiệm về máy tính

Kinh nghiệm về Web Hiểu biết về lĩnh vực Kinh nghiệm về ứng dụng

Một khi đã có mô tả về người dùng của ứng dụng cần được kiểm thử thì sẽ có phương pháp thiết kế phù hợp đối với người dùng. Chúng ta cũng có thể xác định các đặc tính của ứng dụng làm cho ứng dụng quá phức tạp hoặc quá đơn giản. Một thiết kế quá đơn giản cũng nhƣ một thiết kế quá phức tạp có thể dẫn đến làm mất đi khả năng khai thác sản phẩm. Bảng 3.2 nêu rõ người dùng được hướng đến của ứng dụng mẫu đƣợc đánh giá nhƣ thế nào.

Bảng 3.2 Đánh giá người dùng được hướng đến của ứng dụng mẫu[8]

MỨC ĐỘ KINH NGHIÊM Không có=0

Thấp =1 Trung bình =2 Cao =3

THUỘC TÍNH KINH NGHIỆM TỐI THIỂU

Kinh nghiệm về máy tính 2-3

Kinh nghiệm về Web 2-3

Hiểu biết về lĩnh vực 1-3

Kinh nghiệm về ứng dụng 0

TIEU LUAN MOI download : skknchat@gmail.com

(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội Học viên: Nguyễn Thị Ngọc Hương

Bước 2 (Xem xét thiết kế) : Bước này nghiên cứu thiết kế dùng cho ứng dụng.

Các loại ứng dụng và người dùng khác nhau yêu cầu các thiết kế khác nhau.

Ví dụ, một chương trình có ba lựa chọn rẽ nhánh, một người dùng không có kinh nghiệm có thể phù hợp hơn bởi việc đƣa ba lựa chọn đó vào luồng gồm năm màn hình giao diện, qua một chức năng tự động. Ngược lại, một người dùng chuyên nghiệp các dịch vụ thông tin có thể thích hơn nhận tất cả các lựa chọn chỉ trên một màn hình, như thế người dùng đó có thể truy cập đến các lựa chọn nhanh hơn.Các chủ đề cần xem xét khi đánh giá một thiết kế:

Phương pháp thiết kế:Các phép ẩn dụ trong thiết kế là cầu nối về nhận thức, giúp cho người dùng hiểu được lô-gíc của luồng giao diện bởi liên hệ với các kinh nghiệm người dùng có thể đã có trong thực tế ở nơi khác. Một ví dụ của phép ẩn dụ trong thiết kế là các danh mục Web sử dụng thiết kế liên tưởng đến danh mục các thẻ của thƣ viện. Một ví dụ khác về phép ẩn dụ là các ứng dụng lập lịch có giao diện nhƣ sự bố trí của một lịch đặt bàn và một sổ địa chỉ liên lạc.Ví dụ của hai phép ẩn dụ khác nhau trong thiết kế:

Hình 3.1 mô tả một ứng dụng sử dụng phép ẩn dụ dựa trên tài liệu. Nó gồm không gian làm việc mà dữ liệu được nhập vào và được thao tác bởi cách tương tự như viết trên giấy

Hình 3.1 Phép ẩn dụ dựa trên tài liệu

Hình 3.2 minh họa ví dụ phép ẩn dụ dựa trên thiết bị. Máy tính ảo này bao gồm các điều khiển giao diện được thiết kế để nhận đầu vào của người dùng và thực hiện các hàm tính toán

TIEU LUAN MOI download : skknchat@gmail.com

(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội Học viên: Nguyễn Thị Ngọc Hương

Hình 3.2 Phép ẩn dụ dựa trên thiết bị

Ví dụ: Hai phương pháp khác nhau để chuyển tải cùng thông tin và các nút điều khiển Hình 3.3 chuyển tải các lựa chọn duyệt đến người dùng qua các nút radio ở trên cùng của màn hình giao diện

Hình 3.3 Lựa chọn qua nút radio

Hình 3.4 chuyển tải cùng các lựa chọn qua một trình đơn kéo xuống (pull-down menu) ActiveX hoặc Java applet

TIEU LUAN MOI download : skknchat@gmail.com

(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội Học viên: Nguyễn Thị Ngọc Hương

Hình 3.4 Lựa chọn qua trình đơn kéo xuống

Các ví dụ trên đây chỉ đơn giản là chỉ ra các phương pháp thiết kế khác nhau, không phương pháp thiết kế nào đúng hơn. Vai trò của kiểm thử viên không phải là để đánh giá thiết kế nào tốt nhất mà nhân viên kiểm thử cần quan tâm đến các lỗi thiết kế, chỉ ra nhiều sự phụ thuộc của thiết kế càng sớm càng tốt, chỉ ra sự không nhất quán của sự cài đặt giao diện.

Ví dụ: Nếu phương pháp thiết kế đã sử dụng trình đơn kéo xuống như vậy trình đơn kéo xuống nên đƣợc sử dụng nhất quán trong tất cả các giao diện chứ không sử dụng nút lựa chọn radio cho các giao diện khác

Tương tác của người dùng (đầu vào dữ liệu): Người dùng có thể thực hiện nhiều loại thao tác dữ liệu qua bàn phím và các sự kiện chuột. Các phương pháp thao tác dữ liệu đƣợc tạo ra qua các điều khiển giao diện màn hình và các công nghệ khác, nhƣ cắt và dán, kéo và thả

TIEU LUAN MOI download : skknchat@gmail.com

(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội Học viên: Nguyễn Thị Ngọc Hương

Các điều khiển giao diện người dùng: Các điều khiển giao diện người dùng là các đối tượng đồ họa cho phép người dùng tương tác với ứng dụng. Chúng cho phép người dùng khởi tạo các hoạt động , yêu cầu hiển thị dữ liệu, và đặc tả các giá trị dữ liệu. Các điều khiển thường được mã hóa, cài đặt bởi các phần tử trong trang HTML như nút radio, hộp kiểm tra, nút điều khiển, thanh cuộn, trình đơn kéo xuống, trường văn bản, vân vân.

Hình 3.5 gồm một hộp văn bản (text box) chuẩn của HTML cho phép người dùng nhập vào chuỗi có giới hạn, và một hộp văn bản cuộn cho phép người dùng nhập vào nhiều dòng văn bản. Nhắp chuột vào nút Submit ở dưới các hộp này sẽ gửi dữ liệu nhập vào đến một trình chủ Web. Nút Reset cho phép các hộp văn bản quay trở về trạng thái mặc định ban đầu.

Hình 3.5 cũng gồm các nút radio. Các nút radio là loại trừ lẫn nhau, nghĩa là chỉ một nút đƣợc chọn trong cùng một thời điểm. Các hộp kiểm tra (check boxes) thì ngƣợc lại cho phép nhiều lựa chọn trong một tập hợp đƣợc lựa chọn đồng thời.

Hình 3.5 Các điều khiển HTML bao gồm một hộp văn bản chuẩn HTML và một hộp văn bản cuộn

TIEU LUAN MOI download : skknchat@gmail.com

(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội Học viên: Nguyễn Thị Ngọc Hương

Hình 3.6 bao gồm một trình đơn kéo xuống cho phép người dùng lựa chọn một trong nhiều mục được định nghĩa trước. Nhắp chuột vào nút Submit sẽ gửi chọn lựa của người dùng đến trình chủ Web. Nút Reset đặt lại trình đơn về trạng thái mặc định ban đầu. Các nút nhấn (Go Home và Search) khởi tạo các hành động, các truy vấn tìm kiếm, gửi dữ liệu đến cơ sở dữ liệu, các siêu liên kết…

Hình 3.6 cũng bao gồm các ví dụ hình ảnh có thể đƣợc sử dụng nhƣ những siêu liên kết hay các nút nhấn.

Hình 3.6 Các điều khiển HTML bao gồm một trình đơn kéo xuống

Hình 3.7 và 3.8 minh họa cài đặt của các điều khiển chuẩn HTML trên một trang Web. Hình 3.7 mô tả các đối tƣợng liên kết đồ họa, các tiêu đề liên kết khi di chuyển chuột qua, hoặc thuộc tính ALT, và một liên kết văn bản nhƣ chúng đƣợc giới thiệu cho người dùng. Hình 3.8 mô tả đoạn mã HTML sinh ra các đối tượng này.

TIEU LUAN MOI download : skknchat@gmail.com

(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội Học viên: Nguyễn Thị Ngọc Hương

Hình 3.7 Các liên kết đồ họa, liên kết văn bản khi di chuyển chuột qua và trường văn bản

Hình 3.8 Đoạn mã HTML cho liên kết đồ họa, liên kết văn bản khi di chuyển chuột qua và liên kết văn bản

TIEU LUAN MOI download : skknchat@gmail.com

(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội Học viên: Nguyễn Thị Ngọc Hương

Các điều khiển chuẩn HTML, nhƣ bảng và siêu liên kết có thể đƣợc kết hợp với hình ảnh để mô phỏng các thành phần giao diện đồ họa nhƣ trong ứng dụng Windows hay Macintosh, nút điều khiển, hộp thoại, v.v… Phần bên trái của hình 3.9 mô tả một khung HTML đƣợc kết hợp với hình ảnh và liên kết để mô phỏng thanh duyệt

Hình 3.9 Bảng, mẫu, và khung mô phỏng các điều khiển giao diện trong Windows Các điều khiển giao diện người dùng động: Các thể đa phương tiện HTML cho phép sử dụng các đối tƣợng giao diện động nhƣ Java applet, điều khiển ActiveX, và script (JavaScript và VBScript)

Script: Script là những câu lệnh có thể thực thi bởi trình duyệt khi trang HTML nạp hoặc khi chúng đƣợc gọi dựa trên một số sự kiện. Một script ở dạng ngôn ngữ lập trình hướng đối tượng, nghĩa là các lệnh của chương trình xác định và gửi các câu lệnh đến các thành phần riêng biệt của trang Web. Các script không cần biên dịch và có thể chèn trực tiếp vào các trang HTML. Các script đƣợc nhúng vào trong mã HTML với thẻ <SCRIPT>.

Các script có thể đƣợc thực thi trên phía trình chủ hoặc trên phía trình khách.

Các script phía trình khách thường được sử dụng để đặt các giá trị cho các điều khiển giao diện người dùng, chỉnh nội dung trang Web, và xử lý lỗi.

TIEU LUAN MOI download : skknchat@gmail.com

(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05(LUAN.van.THAC.si).ky.thuat.kiem.thu.cac.ung.dung.web.luan.van.ths.cong.nghe.thong.tin.60.48.05

Khoa Công Nghệ Thông Tin Đại Học Công Nghệ - Đại Học Quốc Gia Hà Nội Học viên: Nguyễn Thị Ngọc Hương

Các phương pháp duyệt: Các phương pháp duyệt mô tả người dùng một ứng dụng Web hay các trang Web nhƣ thế nào, từ một điều khiển giao diện đến một điều khiển khác ở trong cùng một trang (màn hình, cửa sổ, hay hộp thoại) và từ một trang đến một trang khác. Người dùng duyệt thường được đánh giá bởi mức độ dễ dàng chúng cho phép người dùng truy cập đến các chức năng và dữ liệu thường được sử dụng. Nhân viên kiểm thử cần phải đặt các câu hỏi sau:

 Phương pháp duyệt của ứng dụng có trực quan không?

 Khả năng truy cập các chức năng và dữ liệu thường được sử dụng có nhất quán trong toàn chương trình?

 Người dùng có thể luôn luôn nói được họ ở đâu trong chương trình và các lựa chọn duyệt nào là có thể dùng đối với họ?

 Thông tin được giới thiệu cho người dùng có tốt không?

 Nếu chương trình sử dụng một không gian làm việc trung tâm, không gian này có nhất quán từ màn hình này đến màn hình khác?

 Các quy ƣớc duyệt có nhất quán trong toàn ứng dụng (thanh duyệt, trình đơn, siêu liên kết…)?

 Đánh giá việc sử dụng nhất quán các di chuyển chuột, nhắp chuột và kéo các đối tƣợng trong ứng dụng. Kết quả của các hành động này có khác nhau từ một màn hình đến màn hình tiếp theo?

 Các phím thay thế chuột đƣợc sử dụng nhất quán trong toàn bộ ứng dụng?

 Tất cả các chức năng có thể truy cập qua các hành động chuột và bàn phím?

 Nhấn phím Tab liên tục và xem xét lộ trình đƣợc tạo ra. Lộ trình có lô- gíc và nhất quán không?

 Nhấn phím Shift-Tab liên tục và xem xét lộ trình đƣợc tạo ra. Lộ trình có lô-gíc và nhất quán không?

 Xem các phím tắt đƣợc hỗ trợ. Chúng có hoạt động không? Có sự trùng lặp trong chúng?

 Các chức năng duyệt đã đƣợc kiểm thử cho khả năng truy cập?

 Nếu người dùng nhắp chuột lên nút trả tiền bằng thẻ tín dụng trên một trang thương mại điện tử trong khi người dùng đó đợi câu trả lời từ trình chủ, giao tác sẽ đƣợc gửi đi nhiều lần?

Các nút lệnh: Trong toàn bộ ứng dụng tên của các nút lệnh trên màn hình không đƣợc sử dụng một cách nhất quán. Điều này một phần là do ý nghĩa của các tên nút lệnh thường biến đổi từ chương trình này sang chương trình khác. Nếu các đặt tên của các nút lệnh thay đổi bên trong một chương trình thì sẽ dẫn đến sự nhầm lẫn của người dùng. Ví dụ, nếu một nút Submit được sử dụng để lưu trữ dữ liệu trong một

TIEU LUAN MOI download : skknchat@gmail.com

Một phần của tài liệu (LUẬN văn THẠC sĩ) kỹ thuật kiểm thử các ứng dụng web luận văn ths công nghệ thông tin 60 48 05 (Trang 47 - 63)

Tải bản đầy đủ (PDF)

(124 trang)